PDA

View Full Version : 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/dynamicindex17/ajaxcontent.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:


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

Then for your form:


<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>

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

Availability.php just has:

<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:


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

you can do:


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

And for:


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

you can do:


$('#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:


<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:


<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:


<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):


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:


<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:

<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:

<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

jscheuer1
10-13-2011, 07:12 PM
@Paul:

I figured the hid was used/set by PHP at various stages all along the way so that all of a group of something (hotels you just now said, though it should have been obvious, except using 'colorado' made me think of a region) could use the same pages and code. But as I said, the javascript variable hid appeared to only be used by the page in it's AJAX calls. If so, it only needed to be defined for them. In any case, I was imagining something like:


jQuery.ajaxSetup({data: 'hid=<?php echo $hid; ?>'});

@Arie

There you go again. Funny though, I had thought of iframe for this too, but the first thing that struck me after that was the size issue Paul just mentioned, so I discarded the notion. That and the fact that I have a ton of confidence in jQuery's ability to handle these calls.

@Both

The jQuery routines could be added to a little. Like targeting specific HTML to import from the external page so that the resulting markup is valid (this could also be done by removing any extra stuff from the external pages - like DOCTYPEs, html, head, body, script and style tags, that sort of thing). jQuery AJAX also allows for an onfailure or something like that. It might be nice to let your users know if there was a problem and what they might be able to do about it if it occurs. But even with just the 3 calls, that could get complicated. As long as all of the required files are on the server and their PHP is error free, things will work just fine like 99.99% of the time. Pretty much like it would when using iframe.

molendijk
10-13-2011, 07:57 PM
[...] I had thought of iframe for this too, but the first thing that struck me after that was the size issue Paul just mentioned, so I discarded the notion.
An advantage of the iframe above Ajax, though, is that all scripts and styles continue to function (in the iframe). Nothing special you have to do to obtain that.
I don't think the size of the iframe is a real issue, given the way I propose to create it. But I may miss something there.

As long as all of the required files are on the server and their PHP is error free, things will work just fine like 99.99% of the time. Pretty much like it would when using iframe.
You have to add JQuery, though, which is not a requirement in the case of an iframe.

So in the end I would prefer the iframe here, but, as I said, I may have missed something regarding the iframe's size. Anyway, I'm glad everything works for Paul. I'm impressed by the way you made it work, John.
===
Arie.

PaulM
12-02-2011, 11:31 AM
Having achieved a part complete page that was working beautifully thanks to the immense help of John, I went off to write some other parts of the system.

I've now returned to finish the page and encountered a couple of snags which I think are only very minor, but seemingly beyond my (very limited) capabilities. As a reminder, here are the pages concerned:
test.littlehotelsofspain.co.uk/colorado.php (http://test.littlehotelsofspain.co.uk/colorado.php) (the "outer" page)
test.littlehotelsofspain.co.uk/availability.php (http://test.littlehotelsofspain.co.uk/availability.php) (one of the external pages within the outer page)
test.littlehotelsofspain.co.uk/availability2.php (http://test.littlehotelsofspain.co.uk/availability2.php) (the page that replaces availability.php after a "submit")
I'm now working on the page called by the Book Now link so I've created booking.php and booking2.php, based on availability and availability2 and gradually being edited into the form I need.

First snag:
If a person is in availability2.php and clicks on the Availability tab, it doesn't take them back to availability.php. The same with booking. It would be nice if I could make that happen.

Second snag:
booking.php includes a javascript calendar for selecting dates. (It's beautifully simple and comes from http://www.greywyvern.com/code/javascript/#calendar.)
Exactly the same code is included in booking2.php.
It works in booking.php but not in booking2.php.

Any suggestions would be hugely appreciated.

PaulM
12-16-2011, 10:26 PM
No? No-one? :(