On one of my pages, page A, I have a form that passes parameters to a script using AJAX. The results are loaded into div B on the same page. This setup is functioning properly. Now, I want to add another form in div B that will pass parameters to a different script for an additional AJAX call. The results should be loaded into div C on page A. Unfortunately, I am having trouble getting this to work.
I searched online and found a similar question on Stack Overflow, but it seems to focus on triggering a second AJAX call automatically rather than through a form submission like in my case.
The current working code I have, which utilizes Prototype, looks like this:
first.php
<script type="text/javascript" src="js/prototype.js"></script>
<script>
Ajax.Responders.register({
onCreate: function(){ Element.show('spinner')},
onComplete: function(){Element.hide('spinner')}
});
</script>
<form id="first_form">
<input /> etc, etc
<input type="button" onclick="first_box()" value="Call get_first_data.php">
</form>
<script>
function first_box(){
new Ajax.Updater(
'first_div',
'get_first_data.php', {
method: 'post',
parameters: $('first_form').serialize()
});
}
</script>
<div id="first_div">
<p>The output from get_first_data.php appears here.</p>
<img alt="spinner" id="spinner" src="images/ajax-loader.gif" style="display:none;" />
</div>
To extend this functionality, I aim to trigger another script from the output of get_first_data.php within the first_text div on page first.php. The result of this second script should also display on first.php. I attempted to replicate the above code with adjustments in get_first_data.php, but it doesn't seem to be working as intended.
get_first_data.php
<script type="text/javascript" src="js/prototype.js"></script>
<script>
Ajax.Responders.register({
onCreate: function(){ Element.show('spinner')},
onComplete: function(){Element.hide('spinner')}
});
</script>
<form id="second_form">
<input /> etc, etc
<input type="button" onclick="second_box()" value="Call get_second_data.php">
</form>
<script>
function second_box(){
new Ajax.Updater(
'second_div',
'get_second_data.php', {
method: 'post',
parameters: $('second_form').serialize()
});
}
</script>
<div id="second_div">
<p>The output from get_second_data.php should appear here, but it's not displaying.</p>
<img alt="spinner" id="spinner" src="images/ajax-loader.gif" style="display:none;" />
</div>
... continue with the remaining content from get_first_data.php ...
Lastly, I would like to know how to achieve the same functionality using jQuery instead of Prototype.