Welcome to WebmasterWorld Guest from 54.221.87.97

Forum Moderators: open

Message Too Old, No Replies

ajax easiest way to update a mysql database without reloading

     

skoff

5:32 am on Feb 15, 2012 (gmt 0)

5+ Year Member



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

7:04 am on Feb 15, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

1:16 pm on Feb 15, 2012 (gmt 0)

5+ Year Member



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

10:54 pm on Feb 15, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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...]