jquery change variable on click and update

Question

I have a PHP page that uses a $_GET['file'] to determine what is outputted on the page. On a page called index.php I use a jQuery ajax function to load the PHP page inside index.php like so:

$.ajax({
  url: "data.php",
  data: {file: 'folder/'},
  success: function(data) {
    $('#remote-files').html(data);
  }
});

Think of this as a server file browser, (shows the files and folders on the server). The data variable above determines that it should start in the folder named 'folder'. Now it will display a bunch of folders and files on the page that are inside the folder named 'folder'. What I want to do is be able to click one of the folders inside 'folder' and go into that new folder. Now the problem is, with the function above it almost seems to cancel out the javascript below it, because under that script I have a function that when the user hovers over a folder, the background color changes, (this is done with jQuery), but when the script is there, the background doesn't change on hover, but if I add a alert('hi'); under the above function, it will work.

So basically Im asking is there a way I can be able to click on a folder, and update the $_GET['file'] variable without refreshing or reloading the page, just update the loaded page?

Answer 1

Really need more code to give a better answer.

My guess is you need to do something this:

$.ajax({
  url: "data.php",
  data: {file: 'folder/'},
  success: function(data) {
    $('#remote-files').html(data);
    //now apply the mouseover/out handlers to the *new* elements inside #remote-files.  They are brand new!
  }
});

the call to .html() is inserting HTML code into the the element, thereby creating a bunch of shiny new child elements. If you attached handlers to the original elements, you need to do it again for the new ones.

If this isn't right, post more of your code so we can see how you're doing things. There's way too little code in the question to figure out what's going on.

Answer 2

When your PHP file outputs the HTML, it should/could be in the following format

HTML:

<a href="javascript: loadSubfolder('path/to/subfolder')">Subfolder</a>

And javascript:

function loadSubFolder(folder) {
    $.ajax({
        url: "data.php",
        data: {file: folder+'/'},
        success: function(data) {
        $('#remote-files').html(data);
        //now apply the mouseover/out handlers to the *new* elements inside #remote-files.  They are brand new!
        }
    });
}