Reload div using jquery load function working only once and how to pass a variable

Question

I have very limited knowledge with scripts so I hope you guys can help me with a simple solution to a small problem that I have...

I'm using the following jquery function to refresh a div with new content when a link is clicked

<script> 
$(function() {       
$("#myButton").click(function() {
$("#loaddiv").fadeOut('slow').load("reload.php").fadeIn("slow");
});
});
</script>

My problem is, I need to send 2 variables to the reload.php page to use in a mysql query (I have no idea how to accomplish that), also I need to make multiple links work with this function, at the moment I have multiples links with the same id and only the first link works so I guess I must associate different ids to the function in order for this to work, how can I do that?

here's the page where i'm using this: http://www.emulegion.info/teste/games/game.php

Answer 1

You may want to use document ready instead of function on your first line as this will make sure the code is not executed until the full page (and all elements) have loaded.

You can then use the callback functions of the fade and load to perform actions in a timely manner.

additional variables you can add after the .php, these can then be read in your reload.php file as $var1 = $_GET['var1']; Do make sure to sanitize these though for security.

<script type="text/javascript">

// execute when document is ready
$(document).ready(function() {

  // add click handler to your button
  $("#myButton").click(function() {

    // fade div out
    $("#loaddiv").fadeOut('slow',function(){

      // load new content
      $("#loaddiv").load("reload.php?var1=foo&var2=bar",function(){

        // content has finished loading, fade div in.
        $("#loaddiv").fadeIn('slow');

      }); // end load content

    });  // end fade div out

  }); // end add click to button

}); // end document ready

</script>

For different variables you could add a HTML5 style variable to your button.

<input type="button" id="myButton" data-var1="foo" data-var2="bar" />

You can retrieve this when the button is clicked:

// add click handler to your button
  $("#myButton").click(function() {

  // get vars to use
  var var1 = $(this).data('var1');
  var var2 = $(this).data('var2');

  ... 

  load("reload.php?var1="+var1+"&var2="+var2

if you have multiple buttons/links I would use class instead of id "myButton". that way you can apply the function to all buttons with the above script. Just replace "#myButton" for ".myButton"

Answer 2

First, you should use .on('click', function() or .live('click', function() to resolve your one click issue.

You'll want to do something like:

<script> 
$(function() {       
$("#myButton").on('click', function() {
var a = 'somthing';
var b = 'something_else';
$.post('url.php', {param1: a, param2: b}, function(data) {
   //data = url.php response
  if(data != '') {
   $("#loaddiv").fadeOut('slow').html(data).fadeIn("slow");
  }
});
});
});
</script>

Then you can just put var_dump($_POST); in url.php to find out what data is being sent.

Answer 3

Try creating a function that would accept parameters that you want. Like:

$(document).ready(function(){
    $('.link').click(function(){
        reload(p1,p2);
    });
});

function reload(param1, param2){
    $("#loaddiv").fadeOut('slow').load("reload.php?param1="+param1+"&param2="+param2).fadeIn("slow");
}

But by doing the above code your reload.php should be using $GET . Also you need to use class names for your links instead of id .

Answer 4

<script type="text/javascript">

// execute when document is ready
**$(document).ready(function() {**

  **$("#myButton").click(function() {**

    **$("#loaddiv").fadeOut('slow',function(){**

      **$("#loaddiv").load("reload.php?var1=foo&var2=bar",function(){**

        // content has finished loading, fade div in.
        $("#loaddiv").fadeIn('slow');

      }); 

    });  
  }); 
}); 

</script>
  $("#myButton").click(function() {

  // get vars to use
  var var1 = $(this).data('var1');
  var var2 = $(this).data('var2');