DRI in jquery? - n00b question

Question

can someone tell me how to make and call my own jquery functions? (im an absolute front end noob)

take this example code :-

      <script>
  $(document).ready(function(){
    $.getJSON("http://127.0.0.1:8000/json/storylist/",
        function(data){
          $.each(data.stories, function(i,item){
      $row = item.title;
      $('#storylist tr:last').after("<tr><td>" + item.id + "</td><td>" + item.date + "</td><td>" + item.title + "</td><td></td><td>" + item.priority + "</tr>");
            if ( i == 3 ) return false;
          });
        });

           $("#refresh").click(function(event){
          alert("yay u clicked refresh!");

    $.getJSON("http://127.0.0.1:8000/json/storylist/",
        function(data){
          $.each(data.stories, function(i,item){
      $row = item.title;
      $('#storylist tr:last').after("<tr><td>" + item.id + "</td><td>" + item.date + "</td><td>" + item.title + "</td><td></td><td>" + item.priority + "</tr>");
            if ( i == 3 ) return false;
          });
        });


      }); 
  });

      </script>

you see the json call and code to edit the table is reproduced 2 times. my intention is for the json portion to run once when page is loaded, and each time when the user clicks the refresh link. if i go ahead with the current code, obviously it would be a major PITA in mantaining it.

Any clues?

Answer 1

try to wrap the JSON function into another function:

function JSONrequest(){
     $.getJSON("http://127.0.0.1:8000/json/storylist/",
        function(data){
          $.each(data.stories, function(i,item){
                $row = item.title;
                $('#storylist tr:last').after("<tr><td>" + item.id + "</td><td>" + item.date + "</td><td>" + item.title + "</td><td></td><td>" + item.priority + "</tr>");
            if ( i == 3 ) return false;
          });
        });

}

$(document).ready(function(){JSONrequest()});
$("#refresh").click(function(){JSONrequest()});

Now when you call the JSONrequest function you always execute the same block of code

Answer 2

One way to do this is to simply declare your own function — an ordinary JavaScript function — and pass that function to the .click() method and call it from .ready():

function requestStories() {
    $.getJSON("http://127.0.0.1:8000/json/storylist/",
        function(data){
          $.each(data.stories, function(i,item){
                $row = item.title;
                $('#storylist tr:last').after("<tr><td>" + item.id + "</td><td>" + item.date + "</td><td>" + item.title + "</td><td></td><td>" + item.priority + "</tr>");
            if ( i == 3 ) return false;
          });
        });
    }); 
}

$(document).ready(function() {
    $("#refresh").click(requestStories);
    requestStories();
});

Alternatively, if that .click() handler is only doing the JSON request, you can simply call .click() immediately after giving it the function to cause it to run. For example:

$(document).ready(function() { $("#refresh").click(function() { $.getJSON("http://127.0.0.1:8000/json/storylist/", function(data){ $.each(data.stories, function(i,item){ $row = item.title; $('#storylist tr:last').after("" + item.id + "" + item.date + "" + item.title + "" + item.priority + ""); if ( i == 3 ) return false; }); }); }); return false; }).click(); });

Notice that extra .click() at the end. That means, "Now that I've provided you a function to run when #refresh is clicked, pretend #refresh was clicked. Keep in mind that this will run all code associated with such a click, so this is valid only if this function is the only thing you intend to run.