How can one trigger a function onchange of a div?

Question

Here's a question which has proved very difficult to find an answer online for.

Let's say a user runs an ajax function onclick to fill the contents of a div.

But, what if the ajax output is php, and for that onclick, i want other divs on the page to change in a manner that is dependent on the contents of div1?

This means I need to wait for div1 to actually change so i can use the ajax output of the php calculations to adjust div2 accordingly.

After some testing i've found out that i cant add a call to a second ajax function at the end of the first because it seems to run before the div content from the first ajax call actually changes.

So how can i trigger an ajax call onchange of the contents of a div?

A similar question is asked [here](http://stackoverflow.com/questions/648996/how-do-i-monitor-the-dom-for-changes). — undefined, Oct 31 '12 at 08:41

score 1 · Accepted Answer · answered Oct 31 '12 at 08:39

1

All ajax calls take a callback to run when the call completes, put your logic in there.

answered Oct 31 '12 at 08:39

Jamiec

133,658
13
134
193

I think this is exactly what i was looking for. Thanks, i'll do some research. Is there any specific format i should follow? – user1787489 Oct 31 '12 at 09:08
@user1787489 - if you're using jQuery the answers below have the example you want. For anything else, i'd check the relevant documentation – Jamiec Oct 31 '12 at 09:23

score 0 · Answer 2 · answered Oct 31 '12 at 08:40

You could use Jquery

$('#div1').change(function(){
    doAjax( $(this).html() );
});

Or in the callback of the ajax

$.ajax({
    url: 'http://yoururl.com',
    type: 'post',
    data: { key: value },
    success: function( data ){
        doAjax( data );
    }
});

score 0 · Answer 3 · answered Oct 31 '12 at 08:44

If you are aware of jquery, this is what you should try:

        $.ajax({
                traditional: true,
                type: "post",
                url: '<your_url>',
                beforeSend: function () {
                      //your logic to perform operation before ajax request
                },
                data: {
                    //data to send
                },
                success: function(response) {
                   //your logic to perform operation after ajax request
                   //here make another ajax request
                }
            });

How can one trigger a function onchange of a div?

3 Answers3