homepage Welcome to WebmasterWorld Guest from 54.196.62.23
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
ajax easiest way to update a mysql database without reloading
skoff

5+ Year Member



 
Msg#: 4417752 posted 5:32 am on Feb 15, 2012 (gmt 0)

Hi everyone! So i'll try to be as clear as possible!

So what i want to do is this :

Every time someone click on a team name it adds a record inside a mysql table.
I'm looping through my table records to sort all teams
Example :
-Team 1
-Team 2
-Team 3

If i click on team 1 i want to be able to see the record beside it so it would become :
Example :
-Team1 (1)
-Team2
-Team3

The thing is that i know how to add the record to my database and all of this. The point where i'm stuck right now is that i want this to be transparent so if i click on a team name i dont want the page to be refreshed. I know i can do something like that with ajax or jquery but that's the information that i'm missing.

Hope someone will be able to help me with that!

Thanks!

 

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4417752 posted 7:04 am on Feb 15, 2012 (gmt 0)

Assuming generated HTML has structure like

<span onclick="getTeam(this,1234)"><span>Team 1</span><span class="reply"></span></span>

function getTeam( spanEl, sqlId ) {
spanEl.find('.reply').load( '/getteam.php?id=' + sqlId );
}

skoff

5+ Year Member



 
Msg#: 4417752 posted 1:16 pm on Feb 15, 2012 (gmt 0)

thanks for the reply! but could you give me more information about the ajax code because im not really familiar with that. I dont really know the way on how to insert this in my code. Like i said, for the php/mysql thing i have no problem but for the ajax i dont know that much!

Thanks again

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4417752 posted 10:54 pm on Feb 15, 2012 (gmt 0)

spanEl.find('.reply').load( '/getteam.php?id=' + sqlId )

spanEl - is the span element clicked

spanEl.find('.reply') - is the following span with class="reply" this we wish to update with php reply from server

.load( '/getteam.php?id=' + sqlId ) - sends GET request to server in this case url is '/getteam.php?id=1234', change to whatever may be appropriate, returned html placed in element.

see [api.jquery.com...]

place javascript inside any existing javascript block, if none add to head section of html

<SCRIPT type="text/javascript">
function getTeam( spanEl, sqlId ) {
spanEl.find('.reply').load( '/getteam.php?id=' + sqlId );
}
</SCRIPT>

Note that .load() is GET request to server, if server update is involved .post() may be needed

see [api.jquery.com...]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved