Solved

Submit form without reload

Posted on 2004-10-06
12
573 Views
Last Modified: 2008-01-09
hey, I have a CSS popup that appears on a page with a small form... I'd like the user to be able to pick something from the form, and have that submitted via HTTP... but I Don't want the whole page to reload; I would just hide the CSS popup at that point and the main page of the site would be behind it, ready to go. make sense? the problem I have is that the browser wants to reload after an http post. any suggestions on how to get around that? seems like I've seen this done someplace but I'm not sure how. Javascript?

best
Eric
0
Comment
Question by:pnoeric
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +2
12 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 12245609
Hi pnoeric,

It's possible with frames or iframes. Or do you not want to use them?

Frames->http://wp.netscape.com/assist/net_sites/frames.html among others
Iframes->http://webmonkey.wired.com/webmonkey/96/37/index2a.html?tw=authoring among others

Regards,
Zyloch
0
 

Author Comment

by:pnoeric
ID: 12245686
Ew! no frames, no iframes!! ;-) no other way, eh? all browsers have to do that reload?
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12245697
Yes. Basically, unless you use xmlhttp which isn't completely supported, but you want a try with it?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Expert Comment

by:dij8
ID: 12245770
What do you want to happen with the posted form data?  If it has an effect on what the resulting page shows then the page must be reloaded.  If it is information that will be sent on later then you could use javascript to retrieve the values and store them somewhere, hidden form fields or cookies maybe.  If it is to change the style of the page like colours et c. then you could again use javascript to change the class names of the content you want to change.  Changing class names has limited support I believe.

A simple script I have that changes the class of an object is as follows:
function changeclass(theobject, theclass) {
  if (document.getElementById) {document.getElementById(theobject).className = theclass}
  else if (document.all) {document.all[theobject].className = theclass}
}

theobject being the id of the element you want changed.
0
 

Author Comment

by:pnoeric
ID: 12245791
Thanks dij8. I think cookies might be my answer, but can cookies be dropped after a page is drawn?! The data I'm storing is a code that is used on a totally different page, so nothing that impacts the current page, nothing to do with the page design, etc.

best
Eric
0
 
LVL 1

Expert Comment

by:unclearMind
ID: 12245958
Greetings,

As far as I know you can handle cookies via JavaScript quite easy.
The core of this technique is the document.cookie object

The basic interactions are:

Set a cookie : document.cookie = "myCookieName=myCookiesValue";
Retrieve the value of a cookie : alert(document.cookie)

Well, not exactly cause the Object document.cookie holds all the cookies
in pairs of names and values
.
So in order to get a specific cookie you have to create a function like this:


function getCookie(name) {
  var allCookies = document.cookie;
  var prefix = name + "=";
  var begin = allCookies.indexOf("; " + prefix);
  if (begin == -1) {
    begin = allCookies.indexOf(prefix);
    if (begin != 0) return null;
  } else
    begin += 2;
  var end = document.cookie.indexOf(";", begin);
  if (end == -1)
    end = allCookies.length;
  return unescape(allCookies.substring(begin + prefix.length, end));
}

Regards
0
 
LVL 10

Expert Comment

by:dij8
ID: 12246835
Another cookie settings script which might be helpful:
function setcookie(cname,cv,age) {
  if (age) {
    var today = new Date()
    cexp = new Date(today.getTime() + (age*24*60*60*1000));
    document.cookie = cname + "=" + escape (cv) + "; expires=" + cexp.toGMTString() + "; path=/"
  } else {
    document.cookie = cname + "=" + escape (cv) + "; path=/"
  }
}
function getcookie(cname) {
  var c = document.cookie
  cs = c.indexOf(cname)
  if (cs!=-1) {
    ce = (c.indexOf(";",cs)>0)? c.indexOf(";",cs):c.length
    cv = unescape(c.substr(cs+cname.length+1,ce-(cs+cname.length+1)))
    return cv
  } else {
    return false
  }
}
function deletecookie(cname) {
  cexp = new Date()
  cexp.setTime(cexp.getTime() -1)
  document.cookie = cname + "=; expires=" + cexp.toGMTString()
}


Probably the key thing with setting cookies is the path.  Unless you have specific reasons not to, set the path to the root of the website(/).  The basics of setting a cookie using JavaScript is the "document.cookies = ..." function.  It works something like this:
seperate properties using semicolons (;).  There are more than below but these should be sufficient.
document.cookie = "CookieName=CookieValue; expires=DateTimeToExpire; path=/"

Where CookieName can be whatever you want, CookieValue is the value you want the cookie to hold.
DateTimeToExpire is a date in a specific format.  JavaScripts toGMTString() function does this for you.  My line of code "cexp = new Date(today.getTime() + (age*24*60*60*1000));" gets todays date and time and basically adds a number of days (age being the number of days you wish the cookie to last).  The numbers you see there are hours, minutes, seconds, milliseconds to total a single day.

Not trying to outdo you there unclearMind, just adding an alternative. :-)
0
 

Author Comment

by:pnoeric
ID: 12265462
Hmm. I think I found an example of what I mean. Check out this Amazon page:

http://www.amazon.com/exec/obidos/tg/detail/-/B0002LI11M/qid=1097309551/sr=8-1/ref=pd_ka_1/102-7226434-4822548?v=glance&s=music&n=507846

On the far left column, about 1/2 way down, there's a place ot rate the music-- 1 through 5 stars, a coupl eof checkboxes.

When you click those it looks liek something is being saved/sent back to the server. But the entire page doesn't reload.

No frames, no iframes. How're they doing this?

E
0
 
LVL 3

Accepted Solution

by:
PaulPosition earned 125 total points
ID: 12266252
The Amazin' Amazon trick...

They link to a page that returns HTTP 204 message which means 'data received but no content to transmit back : keep using current page' to the browser...
=====
(that's quoted from http://www.artima.com/forums/flat.jsp?forum=121&thread=6008 ) :
   "I found the spec entry on http 204: RFC 1945 - Hypertext Transfer Protocol -- HTTP/1.0: 204 No Content The server has fulfilled the request but there is no new information to send back. If the client is a user agent, it should not change its document view from that which caused the request to be generated. This response is primarily intended to allow input for scripts or other actions to take place without causing a change to the user agent's active document view. The response may include new metainformation in the form of entity headers, which should apply to the document currently in the user agent's active view.
   "So in short, you can submit information to the server and not have to do a page rebuild. Which is a nice trick for functionality like in the Amazon example - they have a "Saved" message that they make appear so the user knows something happened...."
=====
One thing to note : you really NEED to use some javascript or something so you can 'tell' your user that his clicking on the submit button *did* send the information. Else he might just sit there and click until he's blue in the face)

I don't know what server technology you're using, but it shouldn't be too difficult to google something out of those informations :)
0
 
LVL 3

Expert Comment

by:PaulPosition
ID: 12266436
Just to add to that, here's an more in-depth article about the technique, with code samples in both PHP and ASP.

(As an aside, I didn't know about 'no refresh link' or such. But after reading your last msg. I simply loaded the 'live-http-headers' from mozilla and looked at what was sent-received when clicking the amazon.com's 'rate this album' link. 'HTTP 204' was new to me, so a little search got us our info..  )
0
 
LVL 3

Expert Comment

by:PaulPosition
ID: 12266438
(argh, sorry subcribers for the many updates.. Forgot the link)
http://www.sitepoint.com/article/no-refresh-links/2
0
 

Author Comment

by:pnoeric
ID: 12267073
Jackpot. That's what I was after. thanks!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

738 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