Jquery event when div is being refreshed

Question

right now , I use jQUery(document).ready to "inject" javascript into a div.

All is fine - but The problem is - that the same div is being refreshed via AJAX - and the JS in that case is not being "re-injected"..

(if someone is interested - the div is actually a "widget in wordpress "widgets admin" area)

My problem is that jQuery(document).ready obviously does not work (the DOM is already "ready") and when I tried jQuery('#divname').ready - I also could not make it work.

I even tried .ajaxComplete() but to no avail ...

I am not sure if it is a general method problem or a specific WP widgets problem..

EDIT I - for popular request : my script :-)

//php wrapper function here ...

// .. php stuff.

    return "

    <script type='text/javascript'>
var map;
var markersArray = []; // to be used later to clea overlay array
jQuery(document).ready(function() {
    var lat = ". $lattxt . " ; // .. php variable.
    var lon = ". $lontxt . " ; // .. php variable.
    var marker;
    // ...continue boring google map code 
    };
    map = new google.maps.Map(jQuery('#DivName')[0], myOptions);
   // ...tinue boring google map code 

    function placeMarker(location) {
       ///...continue boring google map code 
        }
    }

});</script>
    <div id='DivName' style='height:200px; width:100%;' ></div><br />
    ";

what I am actually doing is creating a DIV and initiating google map. The problem is when this "widget" (or "div") is being "saved" via AJAX for options and refreshed - the Javascript is not working (it IS being injected in the code - but not "initiating..)

As I said before - this method is working just fine on the "first" go - but if the div is being refreshed - it is not working anymore even if the div is there and the javascript also there ...

EDIT 1 :

I have found the following links which might or might not help anyone with similar problems :

a short explanation of the problem with a possible solution : http://www.johngadbois.com/adding-your-own-callbacks-to-wordpress-ajax-requests/

Two related questions :

markItUp for Wordpress widget

jQuery Functions need to run again after ajax is complete

That being said - I was not yet able to solve my specific problem. if i will I will post complete answer.

It is unclear what you mean by "inject". Are you trying to attach a handler to the div contents? Are you trying to do something else once the AJAX code is loaded? — Jeff B, Mar 16 '12 at 16:20

score 2 · Answer 1 · answered Mar 16 '12 at 16:15

I'm not sure about a WP callback you can use, but a pure jQuery way to handle these types of situations is to delegate the event handling to the nearest containing HTML element that is never refreshed.

There used to be ".delegate()" but in recent versions you can use:

$('#nearest-stable-container').on("click", ".widget", function(){...});

Because the handler is attached to something that never leaves the DOM, this persists across changes to ".widget".

Jeff B · Accepted Answer · 2012-03-16T16:47:26.723

1

I believe you want DOM mutation events. These fire whenever the DOM changes.

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents

Specifically, DOMSubtreeModified, however browser support is limited.

There is a jQuery plugin that may help:

https://github.com/jollytoad/jquery.mutation-events

However, more detail about what you are actually trying to accomplish may help. There may be a simpler way to do what you want.

Edit:

If I understand now (and it is still not entirely clear), you are injecting this javascript into your div, but it is not running because the code is waiting for jQuery(document).ready().

If this is the case, you should be able to either:

Get rid of the jQuery(document).ready() wrapper, and your code will run as soon as it loads, but may cause problems on the initial load.
Reformat your code so you can call your function after the AJAX load:

var map;
var markersArray = []; // to be used later to clea overlay array

function doMap() {
    var lat = ". $lattxt . " ; // .. php variable.
    var lon = ". $lontxt . " ; // .. php variable.
    var marker;
    // ...continue boring google map code 
    };
    map = new google.maps.Map(jQuery('#DivName')[0], myOptions);
   // ...tinue boring google map code 

    function placeMarker(location) {
       ///...continue boring google map code 
        }
    }

};

jQuery(document).ready(function() {
    doMap();
});

</script>

Then call doMap() after your reload. Of course, this is a guess again.

edited Mar 16 '12 at 16:47

answered Mar 16 '12 at 16:15

Jeff B

29,943
7
61
90

- thanks I have updated the question. I will look at your suggestion, although I suspect that my "problem" is a lot more simple than what It might seem.. or not :-) – Obmerk Kronen Mar 16 '12 at 16:25
Added edit. Tell me if I am on the right track. I believe you are loading the script via AJAX, and then want it to run? – Jeff B Mar 16 '12 at 16:48
yes and no - I am not loading the script via AJAX . I am loading it "normally" and it works. but in the same div there is a "save" button that performs AJAX refresh to that div. and when it does - The script it not working . (if you are familiar with wordpress it is a widget in the widgets setup page) - anyhow I will try your method to see if it can work . Unfortunately right now I had just messed up some other part - So I will post back As soon as I get things back on track again .. – Obmerk Kronen Mar 16 '12 at 16:58
Ah, so you want to initialize the Google map div again after the div is updated by AJAX that you don't control? Then you want to combine my second fix with a `DOMSubtreeModified` trigger (fix 1) on `#DivName`. – Jeff B Mar 16 '12 at 17:08
sorry about the delay - yes , I do have SOME control over the widget code - becuse I write it according to the WP WIDGETS API - your method in the answer have the same problem like my initial - when the div is refreshed - the DOM apperantly already passed the "READY" state -- It might as well be a WP specific problem of me not knowing how to control the functions in the class ..But even if it was not WP - the problem still occurs - when refreshing a div AFTER the DOM is ready ..how does one initiate ?? – Obmerk Kronen Mar 17 '12 at 17:03
If I understand, the widget is doing the AJAX call? If so, in the callback for the AJAX call, you need to call `doMap()`, assuming you organize your code like in my answer. – Jeff B Mar 17 '12 at 21:20
Thanks a lot - you have been a great help. I found this http://www.johngadbois.com/adding-your-own-callbacks-to-wordpress-ajax-requests/ - which might explain my problem - and I hope that combining this with your answer will give me some positive results .. – Obmerk Kronen Mar 18 '12 at 06:29
oh .. and see edit 1 if you are interested of why it is a WP speccific problem and why possible solutions .. – Obmerk Kronen Mar 18 '12 at 08:28

score 0 · Answer 3 · edited Jul 23 '13 at 17:39

0

I was having the exact same issue (within WordPress) and thought I would share my answer for anyone else who may come across this.

In order to get my script working after the widget is saved I used this code:

$(document).ajaxComplete( function() { /* do code here */ });

This will trigger after you click the save. Hope this helps someone out!

edited Jul 23 '13 at 17:39

Keith Smiley

61,481
12
97
110

answered Jul 23 '13 at 17:18

Nick Young

359
3
2

Jquery event when div is being refreshed

3 Answers3