Solved

Submit form with Ajax, allow user to view data LIVE via DIV.

Posted on 2010-09-07
13
731 Views
Last Modified: 2012-05-10
Hello All;

The following example code does the following.

Submit a textarea via Ajax, and then load the link within a <div> (This works)
The link that is provided is to load a YouTube video in another <div>
Without Refreshing the page? (Doesnt work)

How can I load the video within the Div once it is first Submitted?

(In the real program, the information is submitted to a database and retrieved upon refresh as per normal
This example is exactly the way it is without the database / refresh)

Any ideas on this one?


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


Unzip the file, contents included are:

1.asp (Main page, use this one to load the project)
2.asp (This has the youtube casing)
ajaxsbmt.js (This is to Submit the Ajax Form)
jquery.ajaxify.js (This is the Ajaxify file)
jquery-1.3.2.min.js (This is the recent copy of jQuery)
loading.gif (This is the loading gif for both Ajaxify and ajaxsbmt)
replace.asp (This is the replace for the coded [youtube=aiefnbaifbn]Same Vide[/youtube]
Simple_Working (This is a working example of the simple version)

Thanks All;
Carrzkiss
0
Comment
Question by:Wayne Barron
  • 8
  • 4
13 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33616410
<<The link that is provided is to load a YouTube video in another <div> >>
can you post the same of that link?

i guess you should be making an ajax call to that link, since if you simply open it, quite naturally it will go to a different page.

Let me know if i am missing anything
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 33616426
Hi ,
try this one. change it  in 1.asp.
@carrzkiss i thnk even u had issue previously.
i dont understand if ur using jquery then y u require ajaxsubmit.js

<body>
<form name="FormVid" id="FormVid" action="replace.asp" method="post" onsubmit="xmlhttpPost('replace.asp', 'FormVid', 'DivVid', '<img src=\'loading.gif\'>'); return false;">
<table>
<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>
<td colspan="2"><a href="javascript:submit(xmlhttpPost('replace.asp', 'FormVid', 'DivVid', '<img src=\'loading.gif\'>');)"</td></tr>
</table>
</form>
<hr />
<table>
<tr><td style="vertical-align:top; text-align:left;">
<p><div id="DivVid"><%=getVids%></div></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></table>

</body>

Open in new window

0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 33616493
Hello infosoft

I am slowly working my way away from the ajaxsubmit.js
Just have not getting that far yet.
(Kind of hard to get rid of something that works you know?
But trying to let the site grow, means leaving certain things behind, like that script.)

--------
I tested your code, and do not understand what it is suppose to be doing?
It is not the Submit that is having the issue, it is the viewing the video within the <div>
Once it is submitted.

@gurvinder372
I think you are correct, but yet.
How would I make the ajax call to the link?
I tried adding the jQuery information into the file that is sent to, but that did not work either.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33616516
<<How would I make the ajax call to the link?>>
If the link is in same domain, then you can directly make the ajax call
http://www.w3schools.com/ajax/default.asp
If the link is not in same domain, then make an ajax call to your server side script, which will invoke this link and return the information back to you

<<I tried adding the jQuery information into the file that is sent to, but that did not work either.>>
Sorry, didn't get this. Please rephrase a little.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 33616571
The page that loads the youtube video script.
I tried adding
jquery.ajaxify.js
jquery-1.3.2.min.js

As well as the ajaxify script there as well.
(That is what I was referring too)

--------

>>If the link is not in same domain, then make an ajax call to your server side script
Can you collaborate a little more on this please?
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33616589
I meant that if the link you want to make ajax call to is not in same domain, you cannot make an ajax call to it, though there is a work around
http://www.experts-exchange.com/blogs/mplungjan/B_2751-Fixing-a-cross-domain-XHR-issue-with-custom-headers.html

In such a case, you need to invoke a server side script in your own domain (say getURLContents.asp), which will invoke the url, get the contents of that url and return it back to the client side as ajax response.

0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 30

Author Comment

by:Wayne Barron
ID: 33616610
The page is on my site, the information coming from the page is from another site.
So technically, It is hosted on my own site, there for I should be able to link to it.

If you was to take a look at the scripts, you will be able to see what I am doing.
The PLayer is 2.asp, and it hosted on my site, just gets its other information from YouTube.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33616701
<<The PLayer is 2.asp, and it hosted on my site, just gets its other information from YouTube.>>
which information?

<<So technically, It is hosted on my own site, there for I should be able to link to it.>>
Sorry, i missed the logic of your conclusion. You only need to check the domain name in the link which you are invoking, which should tell you if domain of the link you are trying to access is same as yours or not.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 33616769
I listed the full url within the replace code, so that it will have it
And still opens the link/video in another page.

Still opened for more suggestions.
Will try anything.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 33617278
@insoftservice
I noticed that the only thing that you provided in the code was the link instead of a button
For that, I thank you, as it has come in very handy.

But, do you have any idea's on the issue of having the video load in the <div>
After it is submitted?

Carrzkiss
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 33643475
Any other idea's on this one guys?
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 33656183
This one is solved, the code can be found below in the attachment.
I am using jQuery Forms to do it with.
Though there is some code that is not needed in the example code below
Within the .js files.
It is a work in progress, but it WORKS!!! And right now that is all that counts.

This post will be accepted as Answer.

Thanks to those that tried to assist.
Carrzkiss
0
 
LVL 30

Accepted Solution

by:
Wayne Barron earned 0 total points
ID: 33656185
Opps. This is the code, forgot to attach it above.

jQuery Form with ASP Classic.

Carrzkiss
jQuery-Form.zip
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

759 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

17 Experts available now in Live!

Get 1:1 Help Now