Go Back   CodingForums.com > :: Client side development > JavaScript programming > Ajax and Design

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 03-13-2013, 08:16 AM   PM User | #1
esthera
Senior Coder

 
Join Date: May 2004
Posts: 1,431
Thanks: 14
Thanked 0 Times in 0 Posts
esthera can only hope to improve
what's the best way to do this?

I have a page that I click a button - open a popup with a form -process that form and then I close it

I would like to switch it to ajax that it opens the popup - submits and then
with ajax updates that div

what's the best way to do this and does anyone know of any good tutorials explaining htis
esthera is offline   Reply With Quote
Old 03-13-2013, 09:38 PM   PM User | #2
sunfighter
Senior Coder

 
Join Date: Jan 2011
Location: Missouri
Posts: 2,376
Thanks: 18
Thanked 350 Times in 349 Posts
sunfighter is on a distinguished road
Opening a popup and displaying a form: Use the html you are using now.
To submit the form using ajax; I can think of nothing simpler then this http://www.malsup.com/jquery/form/

ajax updates that div What div are you talking about? What info is being used to update it?
sunfighter is offline   Reply With Quote
Old 03-13-2013, 09:43 PM   PM User | #3
esthera
Senior Coder

 
Join Date: May 2004
Posts: 1,431
Thanks: 14
Thanked 0 Times in 0 Posts
esthera can only hope to improve
the form is saving a picture so I want to be able to update a div of the page that called the popup to show the picture

I do this now with an iframe but I imagine ajax would be much better
esthera is offline   Reply With Quote
Old 03-13-2013, 10:05 PM   PM User | #4
sunfighter
Senior Coder

 
Join Date: Jan 2011
Location: Missouri
Posts: 2,376
Thanks: 18
Thanked 350 Times in 349 Posts
sunfighter is on a distinguished road
ajax really not needed, nor an iframe for that matter. Someone wants to upload an image called "dogface.png". You have that name and should know where your php is going to place it. I'd put it into a folder. When ajax tells you success has happened display the image.

Example:
Code:
<!HTML>
<html>
<head>
</head>
<body>
<div id="cf" style="height:100px;width:100px;">
	<img id="top" style="width:100%;height:100%;" src="">
</div><br /><br /><button type="button" onclick="showit();">Ajax Success</button>

<script type="text/javascript">
function showit(){
	document.getElementById("top").src = "images/dogface.png"; // PUT YOUR IMAGE HERE
}
</script>
</body>
</html>
sunfighter is offline   Reply With Quote
Old 03-13-2013, 10:10 PM   PM User | #5
esthera
Senior Coder

 
Join Date: May 2004
Posts: 1,431
Thanks: 14
Thanked 0 Times in 0 Posts
esthera can only hope to improve
but how do I call showit() after the picture is uploaded?

I don't want to refresh the page - just that div
esthera is offline   Reply With Quote
Old 03-14-2013, 04:05 PM   PM User | #6
sunfighter
Senior Coder

 
Join Date: Jan 2011
Location: Missouri
Posts: 2,376
Thanks: 18
Thanked 350 Times in 349 Posts
sunfighter is on a distinguished road
With over a thousand post here I would think a person knows how to call a javascript function. And how to collect a variable and how to pass it to a js function.

W3Schools is a great way to learn to program javascript. I'd spend a little time here and get the basics down.

For calling and passing read this: http://www.w3schools.com/js/js_functions.asp

P.S. Did you run what I gave you? Did the page refresh? Did the div magically show the image? And did the image (Even if larger then the div) fit perfectly?

Last edited by sunfighter; 03-14-2013 at 04:21 PM..
sunfighter is offline   Reply With Quote
Old 03-15-2013, 08:13 AM   PM User | #7
esthera
Senior Coder

 
Join Date: May 2004
Posts: 1,431
Thanks: 14
Thanked 0 Times in 0 Posts
esthera can only hope to improve
i know how to call a javascript funciton but I have a link on page 1
to page 2
form on page 2 submits to submitpage 2 - from submit page2 I want to refresh a div on page 1
is that possible?
esthera is offline   Reply With Quote
Old 03-15-2013, 08:49 AM   PM User | #8
felgall
Master Coder

 
felgall's Avatar
 
Join Date: Sep 2005
Location: Sydney, Australia
Posts: 5,451
Thanks: 0
Thanked 496 Times in 488 Posts
felgall is a jewel in the roughfelgall is a jewel in the roughfelgall is a jewel in the rough
Quote:
Originally Posted by sunfighter View Post
W3Schools is a great way to learn to program javascript.
Only if you are studying history - most of the JavaScript that site teaches is the antiquated way you had to do it for Netscape 4. Modern browsers support the far superior modern unobtrusive version of JavaScript that can be attached to the bottom of the HTML and interact with the entire page.

Try to put two scripts written the w3schools way into the one page and likely they will break one another - that's the cause of perhaps 25% of the beginner posts about JavaScript - clashes caused by using antiquated coding methods.
__________________
Stephen
Learn Modern JavaScript - http://javascriptexample.net/
Helping others to solve their computer problem at http://www.felgall.com/
felgall is offline   Reply With Quote
Old 03-15-2013, 08:52 AM   PM User | #9
felgall
Master Coder

 
felgall's Avatar
 
Join Date: Sep 2005
Location: Sydney, Australia
Posts: 5,451
Thanks: 0
Thanked 496 Times in 488 Posts
felgall is a jewel in the roughfelgall is a jewel in the roughfelgall is a jewel in the rough
Quote:
Originally Posted by esthera View Post
2 submits to submitpage 2 - from submit page2 I want to refresh a div on page 1
is that possible?
yes - pass a value in the querystring (after the ? on the end of the url) to tell the first page what it needs to refresh in the div and then have JavaScript read that and perform the update.
__________________
Stephen
Learn Modern JavaScript - http://javascriptexample.net/
Helping others to solve their computer problem at http://www.felgall.com/
felgall is offline   Reply With Quote
Old 03-15-2013, 03:28 PM   PM User | #10
sunfighter
Senior Coder

 
Join Date: Jan 2011
Location: Missouri
Posts: 2,376
Thanks: 18
Thanked 350 Times in 349 Posts
sunfighter is on a distinguished road
@esthera: Sorry my mind reading skills are so bad. No way to know you were putting image on another page without code (Show the importance to paste code here) and your insistence on not refreshing the page thew me.

@felgall: I do understand that W3School is not the be all, end all, but it is a great site to learn from, it is my first go to page for advice. It does answer my questions 90%+ of the time. If I knew of a good site that kept up to date on javascript I'd go there. I find sites with bits and pieces, but never one with all or most of the current info.
sunfighter is offline   Reply With Quote
Old 03-15-2013, 04:42 PM   PM User | #11
rnd me
Senior Coder

 
rnd me's Avatar
 
Join Date: Jun 2007
Location: Urbana
Posts: 3,455
Thanks: 9
Thanked 466 Times in 450 Posts
rnd me is a jewel in the roughrnd me is a jewel in the roughrnd me is a jewel in the rough
Quote:
Originally Posted by sunfighter View Post
If I knew of a good site that kept up to date on javascript I'd go there. I find sites with bits and pieces, but never one with all or most of the current info.
three words: M. D. N.

ex: https://developer.mozilla.org/en-US/docs/JavaScript

or just google whatever it is you're learning: "mdn websockets" or "mdn localstorage" or "mdn a ping" almost always gets the latest info out there and well-written comprehensive documentation, up-to-date compat tables, and relevant examples.

i would not use w3fools for anything, they are outdated in their references, the tutorials demonstrate improper ways of doing things, and then there's all the advertising... yuck.
__________________
my site (updated 5/13)
STATS (2013/5) HTML5:90.2% MOB:14% IE7:0.5% IE8:8.6% IE9:9.8% IE10:10%
rnd me is offline   Reply With Quote
Old 03-15-2013, 05:49 PM   PM User | #12
sunfighter
Senior Coder

 
Join Date: Jan 2011
Location: Missouri
Posts: 2,376
Thanks: 18
Thanked 350 Times in 349 Posts
sunfighter is on a distinguished road
OK thanks for that rnd me. I shall spend a little more time on this site and see what I think. I do use them.
sunfighter is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 02:22 PM.


Advertisement
Log in to turn off these ads.