Question

I am developing a control panel for a project, and I am having a bit of a conflict with some of my code. I am running some jQuery so that every link will insert the content of the requested page into a DIV. This code is located in the index.php page, so it’s on first on the page to be run, no matter what. You never actually navigate away from the index.

$('a').live("click",function(){
var external = $(this).attr('class');
if (external == "externalLink") {
return true;
}
var page = $(this).attr('href');
if (!(page == "#") && (page)) {
    $("#loading").fadeToggle("fast", "linear");
    $("#split-view-right #content").load(page, function(){
        var parentHeader = $("#split-view-right #content #parentHeader").html();
        $("#split-view-right #header").html(parentHeader);  
        $("#loading").fadeToggle("fast", "linear");
    });
}
return false;
});

In the #header, I also have some code being put there, including some buttons. Some of them I have just link to a page, which works great, but some I require to run a script. When I try to define a script to run on one of these pages, it will not find the button unless I run it with ‘.live’. The problem with that is, when I try to go to another page after it runs that live script, it ignores the hyperlink and runs that code again. Heres a sample of the code being run.

$(function() {
$("#headerbutton").live('click', function() {
    $("#loading").fadeToggle("fast", "linear");
    var title = $("input#title").val();
    var partnum = $("input#partnum").val();
    var descript = $("textarea#descript").val();    
    var startprice = $("input#startprice").val();
    var minprice = $("input#minprice").val();
    var domship = $("input#domship").val(); 
    var intship = $("input#intship").val();
    var startdate = $("input#startdate").val();
    var droprate = $("input#droprate").val();   
    var dataString = 'title='+title+'&partnum='+partnum+'&descript='+descript+'&startprice='+startprice+'&minprice='+minprice+'&domship='+domship+'&intship='+intship+'&startdate='+startdate+'&droprate='+droprate;    
    $.post("savenewproduct.php",
    { "title": title, "partnum": partnum, "descript": descript, "startprice": startprice, "minprice": minprice, "domship": domship, "intship": intship, "startdate": startdate, "droprate": droprate },     
    function(postdata){
        $("#split-view-right #content").load('upload_images.php?id=' + postdata.newID, function(){
            var parentHeader = $("#split-view-right #content #parentHeader").html();
            $("#split-view-right #header").html(parentHeader);  
            $("#loading").fadeToggle("fast", "linear");
        });
    }, "json");
    return false;
});
});

What I would like to try and do (unless there is a better solution) is to make it so each time I run a ‘.load’, I can run a ‘.die’ script to cancel out the previous live codes on that page.

Any ideas?

Answer 1

I’m not sure if I’ve understood your details enough, but here’s what I take from this.

Firstly, it sounds like .one() would’ve saved your behind here, if not for the .live() requirement. If you can manage to refactor your code so that you can take advantage of .one(), that would be great.

Barring that, why not just stick a .die() call on your .load() function’s callback? From what I can see, your code is basically:

$('#headerbutton').live('click', function() {
    // some stuff
    $.post(foo, bar, function () {
        $("#split-view-right #content").load(herp, function () {
             // some stuff
             // some more stuff
             // ...
             // what's stopping you from doing something like this:

             $('#headerbutton').die('click');
        });
    });
});

That would effectively cancel out the .live() handler on your #headerbutton.