Solved

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

Posted on 2011-03-18
38
837 Views
Last Modified: 2012-08-13
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
0
Comment
Question by:Wayne Barron
  • 21
  • 17
38 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 35172140
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35172237
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
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35172690
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35172921
>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
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35173000
I added in the replacement code, and still nothing.

Where did you put the 1st line of code to make it work?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35173056
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
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35173104
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35173109
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35173121
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35173382
could you update your page on the link : http://ee.cffcs.com/ajax/1/1.asp
I will take a look
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35173387
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
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35173530
OK.
Its all there.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35173544
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
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35173555
OK.
It is trying, but still jumps to the other page.

(Updated live)
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35173715
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35173717
remove line 18
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35174001
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35174015
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
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35174031
http://ee.cffcs.com/ajax/1/1-1.asp

The original is still up there.
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 82

Expert Comment

by:leakim971
ID: 35174037
currently : http://ee.cffcs.com/ajax/1/replace.asp

don't return the links.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 35174044
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35174047
( on my side I created a fake replace.asp returning the links )
0
 
LVL 30

Author Closing Comment

by:Wayne Barron
ID: 35174084
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35174100
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
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35175809
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35175815
no problem, don't hesitate if you need a bit of info
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35176472
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35176593
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
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35176752
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35177040
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
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35177318
Changed everything and still nothing
http://ee.cffcs.com/ajax/1/1-1.asp
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35177328
Your button name is Submits

You must remove the << s >> at the end
$("input[type='button'][name='Submit']").click(function() {
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35177380
So you want both form elements to have the same name?
The button
The hidden item?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35177389
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
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35177393
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35177396
no prob, have a nice week and a lot of fun!
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35177423
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
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35177516
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

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now