Loading data on click with jquery.

[creata.physics]

Hello friends.

I've recently started to learn javascript because it is quite amazing and very necessary for what I'm doing.

So I'm trying to just grab some basic concepts and build small test scripts using the jquery framework.

 

What I've started on is a script that allows users to pull data from another page and output the content.

I've been able to pull all data from my database and output it when clicking the input button.

My issue is that, if I click the button more than once without refreshing the page, the script will only be called once.

 

I want to have a button, once the button is clicked, a random username is outputted in a div.

Here's what I got going on right now:

<script type="text/javascript">
$.ajax({
    url: 'index.php?component=roadmap&module=ajax&action=toggle',
    success: function(data) {
        $(".buttonLoad").click(function() {
            $("#loading").html('<img src="images/loader.gif" />');
            $(".result").html(data);
            $("#loading").hide();
        });
    }
});
</script>
Load a random user from the databse.
<input type="button" class="buttonLoad" value="Load!" />
<div class="result"></div>

 

I'm using the function ajax() because the jquery framework said it is the function that underlies all ajax requests, which is what this is, so it seemed like my best bet.

I'll also post the php code just in case:

$random = $this->db->fetch_row("select user_name from zxt_users order by RAND() limit 1");
@header( "Content-type: text/html;charset=utf-8" );
print $random['user_name'];
exit();

 

Like I said, the script does work, just once.

I'm guessing the issue is with the function ajax() only allowing the same request once but I'm not sure which is why I'm here for help.

If anymore information is required I'll be more than happy to provide it.

[creata.physics]

I went ahead and looked at jquery's .load function and it seems appropriate.

I'm now using this code which does work:

        $(document).ready(function(){
            $(".buttonLoad").click(function() {
                $("#loading").html('<img src="images/loader.gif" />');
                $(".result").load("index.php?component=roadmap&module=ajax&action=toggle");
                $("#loading").hide();
            });
        });

I'm just not sure if this is the best way to go about this method. It doesn't seem like it's ajax.

[haku]

I think this is what you want:

 

(function($)
{
  function clickListener()
  {
    $(".buttonLoad").click(function()
    {
      $("#loading").html('<img src="images/loader.gif" />');
      $.ajax(
      {
        url: 'index.php?component=roadmap&module=ajax&action=toggle',
        success: function(data) {
          $(".result").html(data);
          $("#loading").hide();
        }
      });
    });
  }

  $(document).ready(function()
  {
    clickListener();
  });
}(jQuery));

[haku]

I'm just not sure if this is the best way to go about this method. It doesn't seem like it's ajax.

 

It is. $.load() makes an ajax call. In your case, you are using the whole document it returns, so it's an ok method to use, with no worries. One of the nice things about $.load() is that you can pass it a CSS selector that references a piece of the document, and you can load that into the selector that $.load() is called off of.

[creata.physics]

Thats a bunch haku. I've marked the topic as solved, your method actually shows the loading image when mine didn't, so I appreciate that a bunch.

 

I have a question if you have the time. Why did you define the function clickListener() inside of function($)?

[.josh]

I have a question if you have the time. Why did you define the function clickListener() inside of function($)?

 

creates scope, puts inside namespace, makes it to where you can't call clickListener() from just anywhere

[haku]

Exactly. I actually use the function name clickListener() in many scripts, and if I were to leave it outside of the (function($){}), they would collide with each other. By keeping it inside of the function, it only exists to code inside that function.