Calling jquery.load(); from an existing javascript file.

Question

I'm not trying to load javascript with jquery or anything of that sort.

Currently I'm modifying swfupload (if you'r familiar with it, great, otherwise it shouldn't matter) to work with a website I'm building. I need the ability to upload, store and delete files. I have the uploading and storing working great.

I have a file called handlers.js that runs most of the interactions. I'd like to modify one of the functions (the one that is called when a user clicks on a little cancel button) to call a php file. The only way I know how to do this is by using jquery's load function. But I can't seem to get it to work?

How can I access these things in a javascript file?

I've tried:

alert($("#messages").html());
$("#messages").load("delete_file.php", {name: this.id});

Messages is a div in my page and none of these things are working. Though I don't get any errors...

Any help would be great!

Answer 1

I'm not sure I understand your question entirely. Are you trying to modify an onclick handler for an existing element or are you trying to load the page?

Based on just the code you posted, first, order matters. So when you do alert, nothing is in the messages div yet. Which is why you see nothing in the alert.

Second, the load function is asynchronous, so you actually need a callback:

$("#messages").load("delete_file.php", {name: this.id}, function() {
   alert($("#messages").html());
});

Answer 2

You want to do an ajax fetch I think, something like:

$.get( 
   'delete_file.php', 
   { name: this.id }, 
   function(htmlFromServer)
   { 
       $("#messages").html(htmlFromServer) 
       //do other things with the html that comes down 
   } 
);

Read http://api.jquery.com/jQuery.get/

Answer 3

If the delete_file.php is doing action that will change the state or data, then doing it using GET is not recomended (both $.load() and $.get()).

Always POST to send data that will change existing data or state.

$.post("delete_file.php",
       {name: this.id},
       function(data){
         $("#messages").html(data);
       });

This is a best practice, because if you let the delete_file.php process name from a $_GET variable, then something as simple as google web crawler spider can wreak havoc your data in no time.