Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,456
    Thanks
    15
    Thanked 0 Times in 0 Posts

    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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,036
    Thanks
    23
    Thanked 589 Times in 588 Posts
    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?

  • #3
    Senior Coder
    Join Date
    May 2004
    Posts
    1,456
    Thanks
    15
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,036
    Thanks
    23
    Thanked 589 Times in 588 Posts
    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>

  • #5
    Senior Coder
    Join Date
    May 2004
    Posts
    1,456
    Thanks
    15
    Thanked 0 Times in 0 Posts
    but how do I call showit() after the picture is uploaded?

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

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,036
    Thanks
    23
    Thanked 589 Times in 588 Posts
    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.

  • #7
    Senior Coder
    Join Date
    May 2004
    Posts
    1,456
    Thanks
    15
    Thanked 0 Times in 0 Posts
    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?

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 644 Times in 634 Posts
    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/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 644 Times in 634 Posts
    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/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #10
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,036
    Thanks
    23
    Thanked 589 Times in 588 Posts
    @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.

  • #11
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,276
    Thanks
    10
    Thanked 581 Times in 562 Posts
    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 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #12
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,036
    Thanks
    23
    Thanked 589 Times in 588 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •