Refresh div on submit

[Hazuan Nazri]

HELLO FRIENDS!,

i have problem here, i try to show mysql data using dreamweaver, now i already change the sql statement to show data when user choose the data from select list/view and click submit, so thats mean i add 'where my_column = $_POST' and its work, but the problem come when user want to show next data (Recordset Paging) the page will refresh and its wiil become like user is not choosing any data, the table empty, so i think i need to put the table into <div> and refresh the div only when user click submit.

someone can teach me how can i write the code??

This is Ajax. You may find the jQuery frameowrk useful for this.

http://api.jquery.com/jQuery.ajax/

someone can teach me how can i write the code??

Er, there are many many many tutorials online. How about you have a go yourself and come back with any questions when you get stuck?

[Hazuan Nazri]

That page i already view it, but....i cant understand anything.....

which tutorials have you tried?

Try something simple

1.Create a div and a button.
2.In your jquery/ajax use a click event handler to query a simple php file.
3.Make the php return one single variable
4.On success update the div to return that php variable.

^^That's how I would go at it.

[Hazuan Nazri]

iamthwee, can you help me with a sample code, i dont know how to code jquery/ajax.....

[pzuurveen]

http://www.w3schools.com/jquery/jquery_ajax_intro.asp

Are you able to find tutorials by yourself? If not here are a few:

https://www.google.co.uk/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&ved=0CDgQFjAB&url=http%3A%2F%2Fnet.tutsplus.com%2Ftutorials%2Fjavascript-ajax%2F5-ways-to-make-ajax-calls-with-jquery%2F&ei=-13VUe_IFcWzhAfh1oAY&usg=AFQjCNEOlhTySRP3c2WTogV6gtSBX89Tfg&sig2=jWxgt-HDKr91IE2ZsMLiPw&bvm=bv.48705608,d.ZG4

http://www.tutorialspoint.com/jquery/jquery-ajax.htm

http://tutorialzine.com/2009/09/simple-ajax-website-jquery/

http://www.sitepoint.com/ajax-jquery/

http://www.phptutorialforbeginners.com/2013/01/jquery-ajax-tutorial-and-example-of.html

http://www.youtube.com/watch?v=cDN-sFM6ack

If you're still stuck after wading through that lot, I really don't know what to suggest. Simply regurgitating code from those sites to this forum, won't really help, will it?

Why don't you try to replicate the code in a couple of tutorials, and when you get stuck, then come back and ask for help. So far, it doesn't seem that you've done anything to help yourself.

[Hazuan Nazri]

Thanks diafol, now i understand a little bit about ajax, but i still need help about this line,

.done(function( result ) {$("#msg").html( " Address of Roll no " +rno +" is "+result );})

i know this line is to call $result from another page, but can i make more for this function? and if can, how can i make it? because this tutorial just call 1 column data but i want to show it in table thats mean its call all column data and have paging like i said in my question.

I don't understand what your saying but, I'm assuming that rno is a variable already in your js script and the result should hold a string taken from your php script. The easiest way to get multiple bits of data from an ajax call would be to use json.

  $.getJSON( url, {
    dataitem1: dataitem1,
    dataitem2: dataitem2,
    format: "json"
  })
  .done(function( data ) {
    $("#msg").html( " Address of Roll no " + data.rno + " is " + data.address );
  });

The php should return json data:

//your connection and query stuff here
//if you return a single record and place data into vars like $rno and $roll_address:

echo json_encode( array("rno"=>$rno, "address"=>$roll_address) );

That should now allow the js to fill in the vars in the .done part of your code.

[Hazuan Nazri]

Thank you diafol!,

i already make it, but i only can show 1 row data only, if i can add next link or button to next data in the same DIV, its really good, can you help me?

To show multiple rows of data, you need to use

$.each(function(index, value)
{
    ...
}

If you're using json.
BUT, if you're outputting plain html in the php file, you can run this:

$.get( 
    url, 
    {dataitem1: dataitem1,dataitem2: dataitem2},
    "html"
)
.done(function( data ) {
    $("#msg").html( data );
});

[Hazuan Nazri]

no, i mean i need to use 'next' link (paging) like this

FIRST PREVIOUS Data 1 from 2 NEXT LAST