request for form submit functionality to 'Dynamic Ajax Content'

**knabksn** · 05-28-2011, 07:38 AM

1) Script Title: :: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

3) Describe problem: This script works well. However, I was wondering if you may provide the following functionalities:

1. When the dynamic AJAX returned content contains a form, how do I submit that form via AJAX?
2. And once that form has been submitted, how do I return a new content via AJAX replacing the form itself (content 1 above)? In this case, I will display a content which contains the submitted values via the form (content 1 above)

Thank you very much!

Ferdinand

**PaulM** · 10-11-2011, 10:58 PM

I have a similar requirement which I have half-solved.

My outer page contains the DIV which will show the external page. The external page is called availability.php.

Availability.php then has a form which includes the line
<form method="post" action="javascript:ajaxpage('availability2.php', 'availabilityarea');">
This works to open availability2.php within the DIV, but the parameters that are supposed to be passed by POST don't appear in availability2.php.

I would really appreciate any suggestion of how to the solve this. I think this is the one last obstacle to getting my whole set-up working properly.

I should also have said that availability.php has a repeat of the script in its <head>.

**jscheuer1** · 10-12-2011, 03:46 AM

To do that, you're going to need something more powerful than this script. I suggest jQuery. On your outer page, in its head, put:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Then for your form:

Code:

<form action="#" onsubmit="$.ajax({url:'availability2.php', data: $(this).serialize(), cache: false, type: 'post', success: function(data){$('#availabilityarea').html(data);}});return false;">

The browser cache may need to be cleared and/or the page refreshed to see changes.

**PaulM** · 10-12-2011, 09:45 AM

John, that is brilliant, the dog's wotsits! Thanks a lot.

I actually haven't a clue what is going on there, but I just pasted in the code exactly as you posted it and it works.

Now one last thing, if I may.

My outer page has:
The Dynamic Ajax Content script in the <head>
The link to Jquery in the <head>

Code:

<script type="text/javascript">
ajaxpage(rootdomain+'/availability.php?hid='+hid, 'availabilityarea')
</script>
<div id="availabilityarea"></div>

in the <body>

Availability.php just has:

Code:

<form action="#" onsubmit="$.ajax({url:'availability2.php', data: $(this).serialize(), cache: false, type: 'post', success: function(data){$('#availabilityarea').html(data);}});return false;">

in the <body>

Is there a way of using Jquery to do the job of Dynamic Ajax Content in the outer page? (I could then get rid of a few k's worth of script.)

Or to put it another way:

How might I adapt the Jquery stuff to work on a text link instead of a form?

I'm a complete numpty on javascript, so Jquery is wayyyyyyyyyyyyy beyond me. I've been trying to read the tutorial and FAQs on jquery.com, but it might as well be written in Chinese for all I understand.

For the moment (the page is still very experimental) I've put a form around an image button, but I would prefer to go back to a text link if I can. The page (which is continuously evolving) is http://test.littlehotelsofspain.co.uk/colorado.php.

**jscheuer1** · 10-12-2011, 03:59 PM

Yes, and I was thinking that. First of all I would recommend forgetting about Dynamic Ajax Content's loadobjs() function. From what I can tell you're not using it anyway. It has a few problems/limitations that aren't made clear on the demo page. If you need scripts or styles for your external pages, these should go on the outer page.

And this rootdomain variable isn't really needed. It was just a way of reminding/emphasizing that AJAX requests must be to the same domain as the page making them.

Now, for a simple loading of a page, or for one with only GET data, jQuery has a shorthand for its $.ajax() method called .load(). For:

Code:

ajaxpage(rootdomain+'/prices_2012.php?hid='+hid, 'pricearea')

you can do:

Code:

$('#pricearea').load('prices_2012.php', 'hid=' + hid);

And for:

Code:

ajaxpage(rootdomain+'/availability.php?hid='+hid, 'availabilityarea')

you can do:

Code:

$('#availabilityarea').load('availability.php', 'hid=' + hid);

jQuery also has a way of waiting until the browser is finished parsing the document before executing things, as well as a way to set some defaults for AJAX requests. So you could get rid of those two little scripts in the body and place this in the head after the external tag for jQuery:

Code:

<script type="text/javascript">
jQuery(function($){
	$.ajaxSetup({cache: false, data: 'hid=colorado'});
	$('#pricearea').load('prices_2012.php');
	$('#availabilityarea').load('availability.php');
});
</script>

Further, since it appears there's only one form in the availabilityarea at a time and it appears there are only two possible identical forms and it appears they require the same onsubmit function, if all that's true, and since jQuery can assign events to elements which may not be there yet, we can skip the highlighted here:

Code:

<form action="#" onsubmit="$.ajax({url:'availability2.php', data: $(this).serialize(), cache: false, type: 'post', success: function(data){$('#availabilityarea').html(data);}});return false;">

on both availability.php and on availability2.php, and add to our code in the head:

Code:

<script type="text/javascript">
jQuery(function($){
	$.ajaxSetup({cache: false, data: 'hid=colorado'});
	$('#pricearea').load('prices_2012.php');
	$('#availabilityarea').load('availability.php');
	$('#availabilityarea form').live('submit', function(e){
		e.preventDefault();
		$.ajax({
			url: 'availability2.php',
			data: $(this).serialize(),
			type: 'post',
			success: function(data){$('#availabilityarea').html(data);}
		});
	});
});
</script>

**PaulM** · 10-12-2011, 04:28 PM

John

I am just gob-smacked. Everything you suggested worked perfectly, first time, straight out of the box. I've never had that happen before.

You are a genius.
Thanks
Paul

**jscheuer1** · 10-12-2011, 06:00 PM

I see you're still holding on to the var hid="colorado" //Paul's bit code. I checked the rest of the page and it doesn't appear to be used by anything else. So you should be able to make this external (change highlighted):

Code:

jQuery(function($){
	$.ajaxSetup({cache: false});
	$('#pricearea').load('prices_2012.php');
	$('#availabilityarea').load('availability.php');
	$('#availabilityarea form').live('submit', function(e){
		e.preventDefault();
		$.ajax({
			url:'availability2.php',
			data: $(this).serialize(),
			type: 'post',
			success: function(data){$('#availabilityarea').html(data);}
		});
	});
});

Call it - say, jq-ajax.js

And then have on the page only:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery.ajaxSetup({data: 'hid=colorado'});
</script>
<script type="text/javascript" src="jq-ajax.js"></script>

**PaulM** · 10-13-2011, 11:38 AM

That tidied it up a bit, and of course it worked perfectly first time.

Just for your info, John, there is a bit more to "hid=colorado" than meets the eye. It's actually "hid=<?php echo $hid ?>". "hid" is the hotel id which is used throughout the system and is also used as the filename for each page. (So colorado is the hid on colorado.php, and so on.) By doing it this way the code of every page will be identical except for a php line near the very top which says $hid=colorado, or whatever. The content is served by PHP and MySQL.

**molendijk** · 10-13-2011, 01:17 PM

@John&Paul,
I've been following this discussion which much interest. I wonder if all of this Ajax and JQuery stuff is really needed. We could use an iframe for including external files. As for the form, we could add some scripting that forces it to behave like a navigation tool / 'function caller'.
I was thinking of something like the following (just an illustration of what I have in mind):
main.html:

Code:

<script type="text/javascript">
//This script enables execution of scripts by putting them in the options of selectboxes (if the text of a given option corresponds with the contents of a given script, then the script is executed when the option is clicked on).
function load_script_container()
{var div_node=document.createElement('div');
div_node.setAttribute("id", "script_container");
document.body.appendChild(div_node);}
window.onload=load_script_container

function javascript_in_selectbox(which_box) {
var optionValue=document.getElementById(which_box).options[document.getElementById(which_box).selectedIndex].value;
if (optionValue=="none") {}
else {
var script_inside_selectbox_option = document.createElement('script');
script_inside_selectbox_option.type = 'text/javascript';
script_inside_selectbox_option.text = optionValue;
while(document.getElementById("script_container").firstChild)
{document.getElementById("script_container").removeChild(document.getElementById("script_container").firstChild);}
document.getElementById("script_container").appendChild(script_inside_selectbox_option);
}
}
</script>

<script type="text/javascript">
//Creating an iframe and putting it in a given div. The iframe must have '100%' for both width and height. The position and size of the iframe are given in the div.
function iframe_page(id,url,css)
{
document.getElementById(id).innerHTML='<div style="'+css+'"><iframe src="'+url+'" style="position: absolute; width: 100%; height: 100%" frameborder="0"><\/iframe><\/div>'
}

</script>

This is 'main.html'<br><br>
<select id="some_selectbox" onchange="javascript_in_selectbox('some_selectbox');selectedIndex=0">
<option value="none" selected >Some selectbox</option>
<option value="iframe_page('some_div','outer.html','position:absolute; left:100px; top: 100px; right: 100px; bottom: 100px; border: 1px solid black')" >load 'outer.html' in iframe</option>
<option value="iframe_page('some_div','http://www.dynamicdrive.com','position:absolute; left:100px; top: 100px; right: 100px; bottom: 100px; border: 1px solid black')" >load DynamicDrive in iframe</option>
</select>
<br>
<div id='some_div'></div>

outer.html:

Code:

<script type="text/javascript">
//This script enables execution of scripts by putting them in the options of selectboxes (if the text of a given option corresponds with the contents of a given script, then the script is executed when the option is clicked on).
function load_script_container()
{var div_node=document.createElement('div');
div_node.setAttribute("id", "script_container");
document.body.appendChild(div_node);}
window.onload=load_script_container

function javascript_in_selectbox(which_box) {
var optionValue=document.getElementById(which_box).options[document.getElementById(which_box).selectedIndex].value;
if (optionValue=="none") {}
else {
var script_inside_selectbox_option = document.createElement('script');
script_inside_selectbox_option.type = 'text/javascript';
script_inside_selectbox_option.text = optionValue;
while(document.getElementById("script_container").firstChild)
{document.getElementById("script_container").removeChild(document.getElementById("script_container").firstChild);}
document.getElementById("script_container").appendChild(script_inside_selectbox_option);
}
}
</script>

This is 'outer.html'<br><br>
<select id="some_selectbox" onchange="javascript_in_selectbox('some_selectbox');selectedIndex=0">
<option value="none" selected >Some selectbox</option>
<option value="alert('Hello from outer page')" >Alert</option>
<option value="parent.iframe_page('some_div','http://www.google.com','position:absolute; left:100px; top: 100px; right: 100px; bottom: 100px; border: 1px solid black')" >Load Google in this iframe</option>
</select>

But I may have misunderstood what Paul exactly wants.
===
Arie Molendijk.

**PaulM** · 10-13-2011, 05:04 PM

Hi Arie

As I think I mentioned before, I know nothing about javascript so I can't really comment on the code you have shown. I found John's solution to be very simple and elegant. And best of all, it just worked.

Iframes have a major disadvantage that you have to specify the height, but that is a variable in my application. I tried out various scripts that claimed to resize iframes to fit the content but I never got one to work properly.

For the moment I am more than happy with the solution that John gave me. Only time will tell whether that remains the case once the system goes live.

Paul