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?

Answer 1

所有ajax调用都会在调用完成后执行一个回调以运行，并将您的逻辑放在那里。

Answer 2

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 );
    }
});

Answer 3

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
                }
            });