Submit form with Ajax, allow user to load submitted data into another div. (Without Refresh) Example provided

I ask this question back in Sept 2010, and am not really sure WHY I closed it out with the code that I provided, as I cannot see how it resolved the issue.
( Original Question: http://www.experts-exchange.com/Q_26455629.html )
Anyway.

What this project needs to do is the following:

Sutmit form
Load in <DIV> (This works)
Click on links in <div> and load in another <div> (Does not work, Redirects to the page instead)
I need this to work without having to refresh the page.
The original project loads from the database, this is a cutdown exact example, but without the database part
To keep it simple)

This project is to load Videos from YouTube.
NOW.
1.asp => Form to submit to ajax DIV
2.asp => Has the youTube code for loading the video into the page.
Replace.asp => Replaces code that generates the youTube links.
Additional files are AJAX and JQuery related.
(Plus: Simple_Working.asp, this is the simple working version)

This is using the ajaxsbmt.js
This is an old demo, and well, ajaxsbmt.js works in it, so.

Can someone assist in making this a reality?
Thank you

Examples and Code download

This is what I am needing to work
http://ee.cffcs.com/ajax/1/1.asp

This is the Simple working Example of the code
http://ee.cffcs.com/ajax/1/simple_Working/1.asp

Code for both
http://ee.cffcs.com/ajax/1/1.zip

Carrzkiss
LVL 31
Wayne BarronAuthor, Web DeveloperAsked:
Who is Participating?
 
leakim971PluritechnicianCommented:
Oups! We need to pass Myvid as argument, sorry, here the code updated :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0032)http://ee.cffcs.com/ajax/1/1.asp -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Video Test</title>
<script src="http://ee.cffcs.com/ajax/1/jquery-1.2.6.min.js"></script>
<script src="http://ee.cffcs.com/ajax/1/jquery.ajaxify.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {   
		$("input[name='Submit']").click(function() {		
			$("#DivVid").html("<img src=\"loading.gif\">");
			$.post("replace.asp", $("#FormVid").serializeArray(), function(content) {
				$("#DivVid").html(content);
				var done = $(".options").ajaxify({
					target: '#container',
					loading_img:'loading.gif',
					method:'POST'
				});
				if(!done) alert("bad news : ajaxify had returned false!");
			});
		});
	});
</script>
</head>
<body>
<form name="FormVid" id="FormVid" action="replace.asp" method="post" onsubmit="return false;">
<table>
<tbody><tr><td>Link</td><td><textarea name="MyVids" cols="50" rows="4">[youtube=vD9viOfFxZM]Lita Ford Falling In and Out of Love[/youtube]
[youtube=rOGUWaeAraQ]WARLOCK - Live - ECT - 1985 (NEW Version) Doro Pesch[/youtube]</textarea></td></tr>
<tr><td colspan="2"><input type="button" name="Submit" value="Submit Video" ></td></tr>
</tbody></table>
</form>
<hr>
<table>
<tbody><tr><td style="vertical-align:top; text-align:left;">
<p></p><div id="DivVid"></div><p></p><br>
</td>
<td style="padding-left:25px; vertical-align:top; text-align:left;">
<div id="container">Video Will Load here...(Suppose to?)</div></td>
</tr></tbody></table>
</body></html>

Open in new window

0
 
leakim971PluritechnicianCommented:
Hello carrzkiss,

You need to ajaxify each time the link are loaded. Currently when you ajaxify the links, there's none of them in the page. Links come once you click on the button [Submit video]
Jquery do the job one time, at page load for all the link in the page, not for the new ones.

Else you can use livequery too : http://max.jsrhost.com/ajaxify/example.php?action=live


Clipboard02.jpg
0
 
leakim971PluritechnicianCommented:
the same way if you want to add event on dynamicaly added element use live : http://api.jquery.com/live/ 
instead bind on the event
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Hey leak
The screenshot, did you get it to work? or did you do something else?
If you got it to work, would be great if you can provide some helping code.

As for Ajaxify.
I have used it prior, but really cannot remember what I did when I used it before.
(I hate when you do something in the past, but cannot remember how you did it?)

The live.
That I have been reading up on, and found this
http://beski.wordpress.com/2010/11/01/jquery-ajax-link-inside-ajax-loaded-content-problem/
Which I have been playing around with, but need to get the code to pass the links properly, once they are submitted to the page.
As right now, it is not getting passed in the demos that I have made.

This is starting to become sort of a pain.
I can just as easily have it to where when the members submit the new YouTube links, it will tell them to Refresh the page to get the clickable live data.
That is the way it "Was", but this is a new version of the site that I am working on and I wanted to make this work, since I could not get it to work the first time.

I will do some more checking on the live, the Ajaxify, it is a lot of code, I stripped it out the last time, to make it work with something, will just have to find what I had before and see if I can figure out what I did and how it got it to work.

Have a good one.
Carrzkiss
0
 
leakim971PluritechnicianCommented:
>The screenshot, did you get it to work? or did you do something else?

Yes, once the two links appear on the page, I ran  :

$('.options').ajaxify({ target: '#container', loading_img:'loading.gif', method:'POST' })

Open in new window


it should work with :


$('.options').livequery(function(){
        $(this).ajaxify({
           target: '#container',
           loading_img:'loading.gif',
            method:'POST'
        });
});

Open in new window

0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
I added in the replacement code, and still nothing.

Where did you put the 1st line of code to make it work?
0
 
leakim971PluritechnicianCommented:
Did you include the plugin (jquery.livequery.pack.js) in the page ?

<script src="jquery.livequery.pack.js" type="text/javascript"></script>

Open in new window

0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Where do I find it at?
jquery.livequery.pack.js

I have looked all around and seen refrences, but cannot find it to download.
Could you please provide a link or upload it here.
Would really appreciate it.

Thanks
Carrzkiss
0
 
leakim971PluritechnicianCommented:
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
ok

Updated JS code

<script src="jquery-1.2.6.min.js"></script>
<script src="jquery.ajaxify.js" type="text/javascript"></script>
<script src="ajaxsbmt.js" type="text/javascript"></script>
<script src="jquery.livequery.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function() {   
$('.options').livequery(function(){
        $(this).ajaxify({
           target: '#container',
           loading_img:'loading.gif',
            method:'POST'
        });
});
</script>

Open in new window


Still opens in another page.
0
 
leakim971PluritechnicianCommented:
could you update your page on the link : http://ee.cffcs.com/ajax/1/1.asp
I will take a look
0
 
leakim971PluritechnicianCommented:
Currently I get a 404 error for http://ee.cffcs.com/ajax/1/jquery.livequery.js

I think it's not the right path
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
OK.
Its all there.
0
 
leakim971PluritechnicianCommented:
My bad there's an error in the js, it miss a })
<script type="text/javascript">

	$(document).ready(function() {   
		$('.options').livequery(function(){
			$(this).ajaxify({
				target: '#container',
				loading_img:'loading.gif',
				method:'POST'
			});
		});
	});

</script>

Open in new window

0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
OK.
It is trying, but still jumps to the other page.

(Updated live)
0
 
leakim971PluritechnicianCommented:
Try this :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0032)http://ee.cffcs.com/ajax/1/1.asp -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Video Test</title>
<script src="http://ee.cffcs.com/ajax/1/jquery-1.2.6.min.js"></script>
<script src="http://ee.cffcs.com/ajax/1/jquery.ajaxify.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {   
		$("input[name='Submit']").click(function() {		
			$("#DivVid").html("<img src=\"loading.gif\">");
			$.post("replace.asp", function(content) {
				$("#DivVid").html(content);
				var done = $(".options").ajaxify({
					target: '#container',
					loading_img:'loading.gif',
					method:'POST'
				});
				if(!done) alert("bad news : ajaxify had returned false!");
			});
		});
	});
</script>
</head>
<body>
<form name="FormVid" id="FormVid" action="replace.asp" method="post" onsubmit="return false;">
<table>
<tbody><tr><td>Link</td><td><textarea name="MyVids" cols="50" rows="4">[youtube=vD9viOfFxZM]Lita Ford Falling In and Out of Love[/youtube]
[youtube=rOGUWaeAraQ]WARLOCK - Live - ECT - 1985 (NEW Version) Doro Pesch[/youtube]</textarea></td></tr>
<tr><td colspan="2"><input type="button" name="Submit" value="Submit Video" ></td></tr>
</tbody></table>
</form>
<hr>
<table>
<tbody><tr><td style="vertical-align:top; text-align:left;">
<p></p><div id="DivVid"></div><p></p><br>
</td>
<td style="padding-left:25px; vertical-align:top; text-align:left;">
<div id="container">Video Will Load here...(Suppose to?)</div></td>
</tr></tbody></table>
</body></html>

Open in new window

0
 
leakim971PluritechnicianCommented:
remove line 18
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Sorry for my late reply, I had to leave out.

Does not submit the form,
When I click the submit button, it shows the ajax image, and then it disappears.
But nothing else happens...

The other page, grabs the information an processes the forms textarea.

getVids  = VidChar(request.form("MyVids"))

It is like it is not being sent.
(ajax gets me on how it sends data from one point to another
That is the reason why I stuck with what I was using, as it works for what I need and without complications, like in this case here.
I am now lost at how the form is getting processed.)

0
 
leakim971PluritechnicianCommented:
I tested the last code and it work fine (I get the two links) on my side.
Can you update the page (http://ee.cffcs.com/ajax/1/1.asp) ?
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
http://ee.cffcs.com/ajax/1/1-1.asp

The original is still up there.
0
 
leakim971PluritechnicianCommented:
currently : http://ee.cffcs.com/ajax/1/replace.asp 

don't return the links.
0
 
leakim971PluritechnicianCommented:
( on my side I created a fake replace.asp returning the links )
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
WORKS!!!!!!!!!!!!!

I am so exhausted at the moment that I cannot really concentrate on what was done to make it work.

I will look deeper into it tomorrow and try to learn the new coding.
And maybe change over to the way you submit the forms with AJAX.

Thank you so much for your time.
You have taken something that is 5 months old, and finally resolved it.

Thank you, Thank you.
Have a great rest of the weekend and I will let you know how it turns out.

Carrzkiss
0
 
leakim971PluritechnicianCommented:
You're very welcome Sir!
Sorry for the bad code.
We should be able to get it work with livequery but perhaps an other day lol
Have a great REST of week too ;-))

0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Trying to work it into my actual site now.
Though it works perfectly in the demo, it is giving me a fit in the real project.
So.
I am picking through it now, and considering that the only thing that changed was the JS code and the form header
Everything else is the same.
Just a lot of digging I will have to do to make it all work properly.

Once again, I thank you for your time with this one.
Once it is actually working on the real site, then I will post back.

Take Care
Carrzkiss
0
 
leakim971PluritechnicianCommented:
no problem, don't hesitate if you need a bit of info
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
I have a question for you, which goes with what I stated above.
http:#a35174001

OK.
I am submitting a form, and the replace.asp page (The real one)
Holds a LOT of different Entries for different forms.
This is how it is utilized.

I look at the Submit button with name: Submit. If it is present in the form i use it like this.
<input type="submit" name="Submit" value="Submit Video" />

In the replace.asp

getSub = request.form("Submit")
' Now I use it with what application form needs to be used.
In this case, it is for the video

if getSub="Submit Video" then
'Submit video form information here.
end if


How can I pass this data to the form, and make it pick up on the form properties?
This is got me stopped right now, and this is a must have.

Thanks
Carrzkiss
0
 
leakim971PluritechnicianCommented:
That's right, jQuery.serializeArray() don't serialize the submit button

We may use :
			var params = $("#FormVid").serializeArray();
			params["Submit"] = $(this).val();
			$.post("replace.html", params, function(content) {

Open in new window

0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
I added it in, at least I think I put it in the right place.

<script type="text/javascript">
$(document).ready(function() {   
		$("input[name='Submit']").click(function() {		
			$("#DivVid").html("<img src=\"loading.gif\">");
            var params = $("#FormVid").serializeArray();
			params["Submit"] = $(this).val();
			$.post("replace.asp", params, function(content) {
				$("#DivVid").html(content);
				var done = $(".options").ajaxify({
					target: '#container',
					loading_img:'loading.gif',
					method:'POST'
				});
			});
		});
	});	
</script>

Open in new window


Still no go.
0
 
leakim971PluritechnicianCommented:
Could you add an hidden input in the form with the right name :

<input type="hidden" name="Submit" value="Submit Video" />

Open in new window


So you back to the orginal code (just an update to specify the type, line 3) :
<script type="text/javascript">
$(document).ready(function() {   
		$("input[type='button'][name='Submit']").click(function() {		
			$("#DivVid").html("<img src=\"loading.gif\">");
			$.post("replace.asp", $("#FormVid").serializeArray(), function(content) {
				$("#DivVid").html(content);
				var done = $(".options").ajaxify({
					target: '#container',
					loading_img:'loading.gif',
					method:'POST'
				});
			});
		});
	});	
</script>

Open in new window

0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Changed everything and still nothing
http://ee.cffcs.com/ajax/1/1-1.asp
0
 
leakim971PluritechnicianCommented:
Your button name is Submits

You must remove the << s >> at the end
$("input[type='button'][name='Submit']").click(function() {
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
So you want both form elements to have the same name?
The button
The hidden item?
0
 
leakim971PluritechnicianCommented:
yes, only the hidden field will be serialized with : $("#FormVid").serializeArray()
if you prefer, change the name of the submit button but in this case here too : $("input[type='button'][name='Submits']").click(function() {
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
It is fixed.
It was a goof on my page.
In the processing page, I did
request.querystring
instead of
request.form
on the Submit.

Sorry about that.
It is working now.
Thank you once again for your time.

I totally blew that one...
0
 
leakim971PluritechnicianCommented:
no prob, have a nice week and a lot of fun!
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Yea.
It is awesome how you can get something working in the demo
But it refuses to work in the live project.

A fun night this will be...
Enjoy your night

Carrzkiss
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Got it working in the site.
I am going to go to bed now and finish it up tomorrow with a rested mind.
As I am making too many mistakes right now.

Have a good one and thanks once again for your knowledge and know-how.
Carrzkiss
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.