SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple JQuery Ajax page

    HI Folks,

    Could soemone please post the code for a simple ajax query. Where the user submits a variable to a database, and gets a loading graphic while their waiting.

    I can't understand the examples I can find online.

    Many thanks

  2. #2
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would do it via intermediate page. JSON is one way to get the data back.

    http://stackoverflow.com/questions/1...ldest#sort-top

    If you google you can find a lot of php examples also.

    Another way to do it by getting and displaying external page inside a div tag. You can pass via url all sorts of parameters to get data from the DB, build your html and then show it inside a div tag.

    http://docs.jquery.com/Ajax/jQuery.get

    Here is a quick sample code.

    Code:
    $(document).ready(function(){ $("#ShowButton").click(function() ShowPage("page.php?clientID=12345&dataType=1"); }); functionShowPage(url) { $('#view').html('');
    $('#loader').show(); //show animation $.get(url,function(data){
    $('#view').html(data); $('#loader').hide();//hide animation $('#view').fadeIn(); }); }
    });
    You can even show animation right next to the button by putting the animation image or div message there or by moving it there. If you want to move it there then get offset position of the button that got clicked. You can then use offset.left and offset.top to position the animation image or div.
    http://docs.jquery.com/CSS/offset
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  3. #3
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for your reply.

    Can you please post he whole page code?

    As I'm struggling to layout the html and javascript in my page.

    Many thanks

  4. #4
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've had ago at a test ajax page, However, I'm having trouble getting the loading graphic to show.

    I just wnat to pass a variable to a page and echo it out into the response div. Showing the loading div while this is happening.

    My code is below, can anyone help?

    <html>
    <head>
    <script type="text/javascript" src="autocomplete/scripts/jquery-1.2.6.min.js"></script>
    <script type="text/javascript">
    function register(){
    $.ajax({
    type: "POST",
    url: "test.cfm",
    data: "w00t=" + document.getElementById("name").value,
    success: function(html){
    $("#response").html(html);
    }
    });

    $.ajaxStart(function(){
    $('#loading').show();
    });

    $.ajaxStop(function(){
    $('#loading').hide();
    });
    }
    </script>
    </head>

    <body>
    <form action="" method="post">
    <label for="name">Name/label><br />
    <input type="text" name="username" id="name" size="25" />

    <input type="button" name="submit" id="submit" value="Subscribe" onclick="register()"/>
    </form>
    <div id="response">
    <!-- Our message will be echoed out here -->
    </div>
    <div id="loading" >loading</div>
    </body>
    </html>

  5. #5
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll highly recommend that you look at these resources. Most of your questions will be answered by going through these.

    This will give you the detailed information regarding sending data to the page via ajax and then geting echo back. This is exactally what you are looking for.
    http://roshanbh.com.np/2008/04/ajax-...hp-jquery.html

    Go through the following tutorials, these are about 10 minute each but really great to start learning.

    http://net.tutsplus.com/articles/web...-video-series/

    I am out and will not be back till weekend. If you still have questions and no one is able to answer those, i'll then take a stab at those. I dont know php, my solution will be either classic asp or .net with C#.
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  6. #6
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This example code is not mine, you can take a look at it in the above post -- tutorials links.

    This is an example to load the external page. please change the jquery reference to the verion that you have.

    index.html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <title>Untitled Document</title>
            <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
      <script type="text/javascript">
       $(function() {
        $('a').click(function() {
         $('<div id="info" />').load('new_file.html #movies', function() {
          $(this).hide()
            .appendTo('#container')
            .slideDown(1000);
          });
          
          return false;
        })
       });
      </script>
        </head>
        <body>
      
      <div id="container">
       <h1>My Favorite Movies</h1>
      </div>
      <a href="new_file.html">Load Favorite Movies</a>
        </body>
    </html>
    new_file.html (this is to load in index.html)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title>Untitled Document</title>
     </head>
     <body>
      <ul id="movies">
       <li>Shawshank Redemption</li>
       <li>Contact</li>
       <li>BTTF</li>
       <li>Apollo 13</li>
       <li>A Beautiful Mind</li>
      </ul>
     </body>
    </html>
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  7. #7
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  8. #8
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats fantastic, just what I was after.

    Thanks so much!


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
  •