0

I have a header.js that includes in its ready section the following:

    var auto_refresh = setInterval(function () {
        var theToken = $('#token').text();
        $('#error-div').text('');
        $('#load_me').load("http://localhost:8080/sc_demo/tasklist.jsp?app=Home&process=tasklist&userToken="+theToken
            ).fadeIn("slow");                
}, 30000); // autorefresh the content of the div after every 3000 milliseconds(30sec)

Now, the page it loads, "tasklist.jsp" gets loaded into a div on the current page and should be refreshed every 30 seconds. The tasklist.jsp has "click" events that need to be serviced and are handled by click events in header.js. In order for those to work, even though tasklist.jsp is getting loaded into a page that already has header.js included, I have to include header.js in the tasklist.jsp. This however, leads to cascading reloads. How do I prevent this? Is it really impossible to try to have decent code reuse? Why should I need to include the header.js if it should already be in the page I loading my portion into?

John Wooten
  • 685
  • 1
  • 6
  • 21
  • The code may already be included, but it also has already been executed. When it was executed, the events were bound to the existing elements, but since it isn't re-executed, new elements do not have said events. If you bound the events using event delegation instead, you won't need to re-include header.js every time. http://learn.jquery.com/events/event-delegation/ – Kevin B Mar 05 '13 at 16:38
  • BTW, I did research and tried setTimeout instead. Same problem. As page reloads, it sets another timeout. Cascades again. Perhaps, the first step in the timeout routine would be to clear all previous timeouts? then set a new one? – John Wooten Mar 05 '13 at 16:44
  • Right, don't include the header.js in subsequent loads. – Kevin B Mar 05 '13 at 16:45
  • Read section on delegation. No idea how to modify what I'm doing so that I don't include header.js in head of tasklist.jsp. How do I write the refreshing portion and others so that they "bind" to the elements in the newly loaded portion and I don't need to include it. – John Wooten Mar 05 '13 at 16:51
  • Instead of doing `$(selector).on("event",handler)`, do `$(document).on("event",selector,handler)` – Kevin B Mar 05 '13 at 16:52
  • Thank you Kevin B! @kevin-b Changing to using $(document).on('click',selector,function() { " update the page " }); worked like a charm and after removing the header.js in my tasklist.jsp, I get regular as clockwork refreshes every 30 seconds without cascades. Top marks to you! – John Wooten Mar 05 '13 at 20:56
  • Now, possibly related problem on in same header.js time = $('#time-div').text(); var time = '+120s'; $("#renew").click(function() { // Here we want to do an asynchronous ajax update of the time on the queue entry $('#remainingTime').countdown('option',{until: time, format: "mS", expiryText: "Entry Released"}); }); $('#remainingTime').countdown({until: time, format: "mS", expiryText: "Entry Released"}); – John Wooten Mar 05 '13 at 20:59
  • http://pastebin.com/ would make that code easier to read – Kevin B Mar 05 '13 at 21:02

0 Answers0