CODEWITHSUNDEEP
jquerywordpressevents
Obmerk Kronen
Obmerk Kronen

Reputation: 15959

Jquery event when div is being refreshed

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.

Upvotes: 1

Views: 3081

Answers (3)

Nick Young
Nick Young

Reputation: 369

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!

Upvotes: 0

Jeff B
Jeff B

Reputation: 30099

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.

Upvotes: 1

peteorpeter
peteorpeter

Reputation: 4107

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

Upvotes: 2

Related Questions