...

View Full Version : what's the best way to do this?



esthera
03-13-2013, 08:16 AM
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

sunfighter
03-13-2013, 09:38 PM
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?

esthera
03-13-2013, 09:43 PM
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

sunfighter
03-13-2013, 10:05 PM
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:


<!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>

esthera
03-13-2013, 10:10 PM
but how do I call showit() after the picture is uploaded?

I don't want to refresh the page - just that div

sunfighter
03-14-2013, 04:05 PM
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?

esthera
03-15-2013, 08:13 AM
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?

felgall
03-15-2013, 08:49 AM
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.

felgall
03-15-2013, 08:52 AM
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.

sunfighter
03-15-2013, 03:28 PM
@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.

rnd me
03-15-2013, 04:42 PM
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.

sunfighter
03-15-2013, 05:49 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum