24, July 2008

Attachment research log - webmaster forum

 
Webdigity webmaster forums
This forum shares its ad revenue with its members!
[ Home | Help | Search | Forum's Shop | Archive | Login | Register | Webmaster Directory ]
Webdigity Webmaster Forums  >  Web Development  >  JavaScript
Topic: Attachment research log		 « previous next »
Pages: [1] Print

Author Topic: Attachment research log  (Read 624 times)
Community Supporter ?
What a dork
*
Posts: 17
114 credits
Members referred : 0
« on: Oct 03, 2007, 05:58:07 AM »
This will cover attachments from the ground up and will move into fancy AJAX Jscript objects.

We start with a simple web page (index.html) that has an iframe in it which has  a form.
The page will have a link when clicked will submit the form that is the iframe page.
« Last Edit: Oct 04, 2007, 06:40:03 AM by apple2 »
Community Supporter ?
What a dork
*
Posts: 17
114 credits
Members referred : 0
« Reply #1 on: Oct 03, 2007, 06:00:27 AM »
Most easy way to attach without refresh is to use IFRAMES.

Structure of example:

File 1:
web page code with link
iframe code includes file 2 inside of file 1
jscript to activate the form in file 2

File 2:
form


File 3:
page returned when form is submitted
this page has the ablity to update information in file 1 such as show the image that was attached.

AGAIN:
File 1 includes File 2 in it.
You don't load File 2 directly.
File 2 is loaded with an iframe tag.

To submit file 2 the link in file 1 activates Javascript which has access through jscript commands to the form in File 2.
The submit function is called by Javascript as if you had clicked it in the second form.
« Last Edit: Oct 04, 2007, 06:39:34 AM by apple2 »
Community Supporter ?
What a dork
*
Posts: 17
114 credits
Members referred : 0
iframe form jscript submit without refresh code
« Reply #2 on: Oct 03, 2007, 06:11:05 AM »
index.html

<HTML>
<BODY>
<IFrame name='theiframe' Src='iframe.html' ></IFrame>
<br>
<div onclick="frames['theiframe'].document.forms['iframeform'].submit();">Submit</div>
</BODY>
</HTML>


iframe.html

<HTML>
<BODY>
<Form name='iframeform' method=post action='test.html'>
This is a form in the file iframe.html<br>
Click the submit link below which is in index.html to submit me!<br>
Text field: <input type=text name='temp'><br>
Images: <input type=file name='file'>
</Form>
</BODY>
</HTML>


test.html

<HTML>
<BODY>
Without refreshing the whole page I appear!<br>
The browser is showing index.html<br>
This is the output from test.html which was called by iframe.html<br>
Iframe.html is included in index.html by usign the iframe tag.<br>
</BODY>
</HTML>



What is going on:
In index.html which is the page you pull up in the browser you include another web age in a box called iframe.html

<IFrame name='theiframe' Src='iframe.html' ></IFrame>

In index.html we have a link when clicked it submits the form in the iframe.
To do that jscript needs to know the name of the iframe and the name of the form in the iframe.

get the document model object for the frame:
frames['theiframe'].document.
get the form object in that page named iframeform and call its submit function:
.forms['iframeform'].submit()

<div onclick="frames['theiframe'].document.forms['iframeform'].submit();">Submit</div>


Thats it!
« Last Edit: Oct 04, 2007, 06:51:29 AM by apple2 »
Community Supporter ?
What a dork
*
Posts: 17
114 credits
Members referred : 0
Roadmap
« Reply #3 on: Oct 04, 2007, 06:31:43 AM »
Whats next?
We will add some PHP to take the uploaded image.
When you click browse jscript can automatically submit the form.
The resulting page that comes back will be the same form so we can add another attachment.
Each time an attachment is added it will update the main page with an image of the attachment.

Here is filles I am working with to do this: http://www.air4web.com/files/upload/ Visit through proxy

Bell and whistle:
Sometimes it is nice to add attachments in the post text.
A new BBcode is to include attachments inline with [attachment=] and below your post is a link by each attachment which adds it.
« Last Edit: Oct 04, 2007, 06:51:58 AM by apple2 »
Community Supporter ?
What a dork
*
Posts: 17
114 credits
Members referred : 0
« Reply #4 on: Oct 10, 2007, 06:29:30 AM »
Alright now I've got it uploading attachments.
Ideally it would handle gifs off to PHP.
I probably won't post more here unless you ask a question.
Thanks!
Trackback URI for this entry : http://www.webdigity.com/trackback.php?topic=7181
Tags : javascript php attachments fancy slick without refreshing Bookmark this thread : Digg Del.icio.us Dzone more....

Topic sponsors:
Get a permanent link here for $1.99!


Pages: [1] Print 
Webdigity Webmaster Forums  >  Web Development  >  JavaScript
Topic: Attachment research log		 « previous next »
Jump to:
User Area
Welcome, Guest. Please login or register.
Did you miss your activation email?
Jul 24, 2008, 09:58:48 PM





Login with username, password and session length

Donate to our community, and get a permanent link back to your site!

Donate to our community, and get a permanent link back to your site!


Forum Statistics
Total Posts: 35.717
Total Topics: 7.379
Total Members: 3.710
Tutorials : 56
Resources : 143
Designs : 220
Latest Member: prolist

46 Guests, 3 Users online :

10 users online today:

Recent topics
Re: Looking to Buy a Websit...
Your Thoughts on Forum SEO...
How To Mask URL?
Learning HTML+CSS
hi
Re: www.hiddenrate.com - ne...
Re: Yahoo Directory VS 8k D...
Re: Login with Example1.php...

HumanWorks Network
Technology news
Webmaster articles
Sublime web directory
RSS Feed directory and viewer

Readers

Web Design Gallery · Whois Lookup · Pagerank · Tag Browsing · Lo-fi version · Syndication · Webmaster forum history · Advertise
Developed by HumanWorks © 2005 - 2008 Webdigity webmaster community · sublime directory
Webdigity Webmaster Forums | Powered by SMF 1.0.12. © 2001-2005, Lewis Media. All Rights Reserved.