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.

Answer 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:

1. 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.

2. 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.