SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question jQuery AJAX Request

    Hey

    Kinda new to JavaScript and I need to make an ajax request. Basically want an input box and when the user clicks go / enter it sends an ajax request to index.php?youtube=[value of the form]

    The request will take some time to finish so I wanted to add a div with a loading image in it and then once the request is done whatever is outputted on the PHP script replaces the loading image in the div.

    So far I have:

    Code JavaScript:
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        $.ajax({
     
            type: "GET",
            url: "index.php",
            data: "youtube=",
     
            success: function(msg){
                alert( "Data Saved: " + msg );
            }
     
         });
        </script>

    But I'm kinda stuck from then onwards (got this code from jquery docs).

    Could anyone help?

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let's assume you have a form with an ID of "myForm" - it has one field ('youtube') and there is also a "data" div which will eventually contain the returned data:

    Code html4strict:
    <form id="myForm" action="index.php" method="get">
         <input type="text" name="youtube" />
         <input type="submit" />
    </form>
    <div id="data"></div>

    Supposing you want to use Ajax to post the form you could attach an event to "onsubmit" of the form:

    Code JavaScript:
    $('#myForm').submit(function(){
        // You can append an image to the form:
        $('<img src="myLoadingImage.gif" id="loadingImage" />').appendTo(this);
        // Here we are using the "get" method:
        $.get(this.action,$(this).serialize(),function(data){
            // Fade out and remove the loading image:
            $('#myLoadingImage').fadeOut(function(){
                $(this).remove()
            });
            // Show data in '#data' div
            $('#data').append(data);
        });
        return false;
    });
    Last edited by JimmyP; Sep 21, 2008 at 02:42. Reason: Added missing closing bracket
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Jimmy, thanks for the help.

    I tried what you suggested and it kind of works.

    When I put data in the form and click go it starts processing in the index.php file but no loading image gets shown and once index.php is finished loading it if I look in the URL bar the script navigates to index.php instead of staying on myPage.php

    It wouldn't suprise me if I did something wrong, any ideas?

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I missed out a closing bracket in the code above. I've fixed it now so it should work...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I still can't get it working

    Here's a link to the page:
    28poker com / vidtomp3 / ajax.php

    Put a youtube link in the textbox for index.php to work.

    (Had to put the URL to my page like that because it wont let me post URLs)

  6. #6
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, the script I gave you should be put above the </body> tag (end body tag). If you put it in the <head> then it won't work because when it runs, the form which it references (#'myForm) won't exist yet.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  7. #7
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh that works

    Just a few small problems now I need to get fixed. When you enter a youtube URL the image starts loading now but once the repsonse is outputted the loading image stays where it is. As well as that, I want it so if someone enters a youtube URL and then they decide to enter another, it resets everything and then starts the original process again, if that makes sense?

    Thanks

  8. #8
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, some updated code

    Code JavaScript:
    $('#myForm').submit(function(){
        // You can append an image to the form:
        $('#loadingImage').remove();
        $('<img src="myLoadingImage.gif" id="loadingImage" />').appendTo(this);
        // Here we are using the "get" method:
        $.get(this.action,$(this).serialize(),function(data){
            // Fade out and remove the loading image:
            $('#loadingImage').fadeOut(function(){
                $(this).remove()
            });
            // Show data in '#data' div
            $('#data').html(data);
        });
        return false;
    });
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  9. #9
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect, I appreciate your help

    Thank you

  10. #10
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just remembered something that would be quite a good feature, if someone enters a youtube link and then index.php starts processing, is there anyway I can disable the form until the request is finished?

  11. #11
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep sure... Here you go: (added line: "$(this).children('input').attr('disabled','disabled');")

    Code JavaScript:
    $('#myForm').submit(function(){
        // You can append an image to the form:
        $('#loadingImage').remove();
        $('<img src="myLoadingImage.gif" id="loadingImage" />').appendTo(this);
        // Disable form fields:
        $(this).children('input').attr('disabled','disabled');
        // Here we are using the "get" method:
        $.get(this.action,$(this).serialize(),function(data){
            // Fade out and remove the loading image:
            $('#loadingImage').fadeOut(function(){
                $(this).remove()
            });
            // Show data in '#data' div
            $('#data').html(data);
        });
        return false;
    });
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  12. #12
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, that disables the form once I press enter but when I look at firebug console the data doesn't get through - it just says:

    GET http://www.28poker.com/vidtomp3/index.php

  13. #13
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh my mistake. I guess that line should go after the ajax call:

    Code JavaScript:
    $('#myForm').submit(function(){
        // You can append an image to the form:
        $('#loadingImage').remove();
        $('<img src="myLoadingImage.gif" id="loadingImage" />').appendTo(this);
        // Here we are using the "get" method:
        $.get(this.action,$(this).serialize(),function(data){
            // Fade out and remove the loading image:
            $('#loadingImage').fadeOut(function(){
                $(this).remove()
            });
            // Show data in '#data' div
            $('#data').html(data);
        });
        // Disable form fields:
        $(this).children('input').attr('disabled','disabled');
        return false;
    });

    Sorry about all the mistakes... it's sunday lol
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  14. #14
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That disables the form and sends the data, is there anyway once I get a response I can enable the form again? (Last thing I promise )

  15. #15
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep sure, here you go:

    Added line "$('#myForm input').removeAttr('disabled');"

    Code JavaScript:
    $('#myForm').submit(function(){
        // You can append an image to the form:
        $('#loadingImage').remove();
        $('<img src="myLoadingImage.gif" id="loadingImage" />').appendTo(this);
        // Here we are using the "get" method:
        $.get(this.action,$(this).serialize(),function(data){
            // Fade out and remove the loading image:
            $('#loadingImage').fadeOut(function(){
                $(this).remove()
            });
            // Show data in '#data' div
            $('#data').html(data);
            // Enable form fields:
            $('#myForm input').removeAttr('disabled');
        });
        // Disable form fields:
        $(this).children('input').attr('disabled','disabled');
        return false;
    });
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  16. #16
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    Yep sure, here you go:

    Added line "$('#myForm input').removeAttr('disabled');"

    Code JavaScript:
    $('#myForm').submit(function(){
        // You can append an image to the form:
        $('#loadingImage').remove();
        $('<img src="myLoadingImage.gif" id="loadingImage" />').appendTo(this);
        // Here we are using the "get" method:
        $.get(this.action,$(this).serialize(),function(data){
            // Fade out and remove the loading image:
            $('#loadingImage').fadeOut(function(){
                $(this).remove()
            });
            // Show data in '#data' div
            $('#data').html(data);
            // Enable form fields:
            $('#myForm input').removeAttr('disabled');
        });
        // Disable form fields:
        $(this).children('input').attr('disabled','disabled');
        return false;
    });
    Merci!


Bookmarks

Posting Permissions

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