Question

I’ve been working on this for hours and having alot of difficulty- been unable to find a solution.

I have two divs. div3 must change its contents accordingly whenever div2 changes. Div2 is changed via ajax, thus when this happens it must trigger another ajax call to change div3 as well.

Here are the details:

1. I have main.html, which contains several different clickable buttons. Onclick, each of these buttons will trigger an ajax function to load, which outputs a php file in div2.

2. This php script outputs the results of a database query, which are different depending on which button in main.html was clicked.

3. I have a div- div3, which is supposed to display the contents of a subsection of data of the current div 3 output.

4. Thus it logically follows that whenever div2 changes, div3 contents must change accordingly.

5. Initially i thought i could just put the function call to the second ajax function at the end of the php file, that way it would always load right after the php file, but apparently java cannot be read from within an ajax output.

Here’s what i’ve tried:

1. Tried putting a function call in javascript <script> tags at the end of the php file, but didnt work for above mentioned reasons.
2. I tried to call the function as an onload event of the last div of the php file, but it doesnt work.
3. I tried to add onchange to the div2 element so that whenever the contents is changed via ajax the second ajax script runs, but it didnt work.
4. I tried to call my second ajax function from the very end of the first ajax function, but that prevented my first function from working properly.
5. Strangely enough, if i attach the function to an onclick event in the php file, and click on it from div2 when the php has loaded, it works, and updates div3 contents.

All i need to do is find a way to turn that onclick function call into something automatic whenever either the php page loads, or when div2 contents change.

Additional notes:
1. I’d like to stay away from eval if i can, because i tried to learn it but the methodology of developing an appropriate regex and all the other details seemed very complicated to me. It might take me hours to develop an appropriate approach and even then might not work….I’d prefer to stick with all the possible simple options i’ve overlooked or might not have implemented properly.
2. I’ll be watching this post like a hawk so if you need additional details feel free to request. I didnt post my code because it’s fairly lengthy and hard to encapsulate the nature of the problem in a more brief example.

Thanks!

Answer 1

If I understood you correctly, you can try something like this:

$.ajax({
  type:'post',
  url:'url goes here',
  data:{<insert data being passed>},
  success:function(ret)
  {
      $('div y').html(ret); // populate div y

      $.ajax({
        type:'post',
        url:'second url goes here',
        data:{<insert data being passed>},
        success:function(ret2)
        {
         $('div x').html(ret2); // populate div x                
        }
      });    
  }
});

Of course this is a jquery approach of which I’m quite a big fan