jQuery - Run jQuery script each time a ".load" function is called?

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?

Richard Neil Ilagan · Accepted Answer · 2011-09-28 18:49:35Z

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.

answered Sep 28, 2011 at 18:49

Richard Neil Ilagan

14.8k6 gold badges52 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Devin Over a year ago

For some reason, when I was doing that, it wasn't working. I set it as the first thing to be run after the click, which works for me. I'll just have to remember to put that bit in each time.

Richard Neil Ilagan Over a year ago

If you do that though, the .die() will also occur even if your .load() call fails, so keep that in mind. :D

Devin Over a year ago

That's fine. It's just a control panel used internally for a website we built. If it fails, you just click on the Products tab on the left to take you to the same place the button would take you.

user400654 · Accepted Answer · 2011-09-28 18:25:14Z

1

First off, the following code can be simplified:

$('a').live("click",function(){
  var external = $(this).attr('class');
  if (external == "externalLink") {
    return true;
  }
  ...

becomes

$('a:not(.external)').live("click",function(){
  ...

As far as your load problem with scripts, if you are loading a page that contains scripts, make sure that the scripts are always after the elements that they are modifying. The $(function(){}); wont actually help you here because the DOMReady event has already been triggered when the main index was loaded.

answered Sep 28, 2011 at 18:25

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Comments

Terry · Accepted Answer · 2011-09-28 19:03:59Z

1

Not sure if this helps or not but you can try and use:

$('a:not(.external)').live("click", function(e){
    e.preventDefault();
    ....
}

which will prevent the browser from following the link by default and allow you to execute your code instead.

answered Sep 28, 2011 at 19:03

Terry

14.2k9 gold badges58 silver badges84 bronze badges

Comments

Juan Ignacio · Accepted Answer · 2011-09-28 18:57:43Z

0

i would use bind() to whatever user input produces a load()

http://api.jquery.com/bind/

answered Sep 28, 2011 at 18:57

Juan Ignacio

3,2678 gold badges38 silver badges54 bronze badges

Collectives™ on Stack Overflow

jQuery - Run jQuery script each time a ".load" function is called?

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related