SitePoint Sponsor

User Tag List

Results 1 to 23 of 23

Thread: Ajax?

  1. #1
    SitePoint Guru TacMaf's Avatar
    Join Date
    Dec 2005
    Location
    Manchester, United Kingdom
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax?

    Hi, does anyone know of a simple tutorial that can help me reload a table row without reloading the page? I assume I need to use ajax to do this.

    Can anyone help?

    Thanks.

  2. #2
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It depends on what you understand a tutorial to be.

    If you think of a tutorial as something to take code from and glue it into your own, I can't think of any that I know of.

    If, however, you want to learn how to use AJAX, so that you can integrate it into your own work by changing a few things, then I think the AJAX tutorial at W3Schools would help you quite alot. Although it's based around asp as the server technology, as long as you know what needs outputting on the PHP side you'll be file with it.

    http://www.w3schools.com/AJAX/
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  3. #3
    SitePoint Guru TacMaf's Avatar
    Join Date
    Dec 2005
    Location
    Manchester, United Kingdom
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I've just read it and all it seems to tell me is how to contact a database when data is typed in. All I want to do is reload a table row. Can ajax do this?

    Thanks.

  4. #4
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It tells you what AJAX is and gives an example of it. It's not there to give you what you're looking for, it's there to show you how to get what you're looking for.

    AJAX can do anything JavaScript can do (i.e. yes, it can do what you want), with the added benefit of being able to communicate with the server.
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  5. #5
    SitePoint Guru TacMaf's Avatar
    Join Date
    Dec 2005
    Location
    Manchester, United Kingdom
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. So I guess I won't need the xmlHTTP stuff?

  6. #6
    SitePoint Evangelist bradical1379's Avatar
    Join Date
    Feb 2007
    Posts
    442
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The idea behind AJAX is to request data from the server and load it (Asynchronously) to the client side without interfering with the display or the behavior of the page.

    So basically, anything on your client side can be manipulated via an XMLHttpRequest, it just depends on how you have prepped on the server side to handle the request, and how the rest of your JavaScript decides to display the information.

  7. #7
    SitePoint Guru TacMaf's Avatar
    Join Date
    Dec 2005
    Location
    Manchester, United Kingdom
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK I can just about figure out how to reload a hidden field for my captcha script but how can I change the image of the captcha?

  8. #8
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You tell the javascript to change the source of the certain image.
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  9. #9
    SitePoint Guru TacMaf's Avatar
    Join Date
    Dec 2005
    Location
    Manchester, United Kingdom
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If a value is already set, will the ajax overwrite the current values?

  10. #10
    SitePoint Guru TacMaf's Avatar
    Join Date
    Dec 2005
    Location
    Manchester, United Kingdom
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeh. I have one last thing. I am trying to change two values to separate values from the same script. The value becomes the file return. Would I have to use 2 ajax commands or can I do this from one?

    Thanks.

  11. #11
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    153 Post(s)
    Tagged
    3 Thread(s)
    Give your table rows id's
    Code:
    <tr id="row1">
        <td>Table cell 1</td>
    </tr>
    <tr id="row2">
        <td>Table cell 1</td>
    </tr>
    you can then either use AJAX to update the database AND the table row by passing the id to update or just use AJAX to update the database and simple javascript to update the table row.

    It depends on what it is you are trying to do and how the information is sent through ie: form input or other method
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  12. #12
    SitePoint Guru TacMaf's Avatar
    Join Date
    Dec 2005
    Location
    Manchester, United Kingdom
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not 100% on what you mean.
    Currently I have:

    script.php
    PHP Code:
    <script type="text/javascript">
      xmlHttp.onreadystatechange=function()
        {
        if(xmlHttp.readyState==4)
          {
          document.Register.sessid.value=xmlHttp.responseText;
          document.Register.secimg.src=xmlHttp.responseText;
          }
        }
      xmlHttp.open("GET","scajax.php",true);
      xmlHttp.send(null);
      }
    </script>
    .....
    <td width="15%"><?php $string=''; echo '<a href="script.php#" onClick="ajaxFunction();">Test</a><img src="'.createImage($string).'" name="secimg" />'?></td>
    <td align="center" valign="center">Enter Validation Code</td>
    <td width="51%"><input type="text" name="script" value="" size="30" style="width: 100%; background: #333333; font-family: Verdana; color: white; font-size: 11px;">
    </td></tr>
    <input type="hidden" name="sessid" value="<?php echo "".md5($string).""?>">
    and scajax.php
    PHP Code:
    <?php
    echo "Test"// I want image src to change to this and
    echo "Test1"// form value to this
    ?>

  13. #13
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    You would need to separate the values somehow, like a newline. Then in the JavaScript, split that up into separate values and apply them how you want.

    Therefore::

    script.php
    PHP Code:
    <script type="text/javascript">
      xmlHttp.onreadystatechange=function()
        {
        if(xmlHttp.readyState==4)
          {
          var data = xmlHttp.responseText.split("\n");
          document.Register.sessid.value=$data[0];
          document.Register.secimg.src=$data[1];
          }
        }
      xmlHttp.open("GET","scajax.php",true);
      xmlHttp.send(null);
      }
    </script>
    .....
    <td width="15%"><?php $string=''; echo '<a href="script.php#" onClick="ajaxFunction();">Test</a><img src="'.createImage($string).'" name="secimg" />'?></td>
    <td align="center" valign="center">Enter Validation Code</td>
    <td width="51%"><input type="text" name="script" value="" size="30" style="width: 100%; background: #333333; font-family: Verdana; color: white; font-size: 11px;">
    </td></tr>
    <input type="hidden" name="sessid" value="<?php echo "".md5($string).""?>">
    and scajax.php
    PHP Code:
    <?php
    echo "Test"// I want image src to change to this and
    echo "\n";
    echo 
    "Test1"// form value to this
    ?>
    [/QUOTE]
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  14. #14
    SitePoint Guru TacMaf's Avatar
    Join Date
    Dec 2005
    Location
    Manchester, United Kingdom
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, it great. Thanks very much! I can't believe your 16!! Must be the Welsh blood (like mine )
    Thanks.

  15. #15
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    153 Post(s)
    Tagged
    3 Thread(s)
    Nice answer Jake

    I was meaning if you were updating more than one row of the database eg if it was a table of contents and you were updating individual rows within that table - in which case you would need an identifier as to which row you were updating
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  16. #16
    SitePoint Guru TacMaf's Avatar
    Join Date
    Dec 2005
    Location
    Manchester, United Kingdom
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah I see.

  17. #17
    SitePoint Guru TacMaf's Avatar
    Join Date
    Dec 2005
    Location
    Manchester, United Kingdom
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm getting an error for some reason:
    document.Register.session has no properties
    document.Register.sessid.value=$data[1];

    Why would I get this error?

  18. #18
    SitePoint Guru TacMaf's Avatar
    Join Date
    Dec 2005
    Location
    Manchester, United Kingdom
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first part of the split works fine.

  19. #19
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,094
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If its a lot of data you are after, not sure the limit but I had to change the method from GET to POST because I was loosing data.
    What I lack in acuracy I make up for in misteaks

  20. #20
    SitePoint Guru TacMaf's Avatar
    Join Date
    Dec 2005
    Location
    Manchester, United Kingdom
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, but it's only 2 words "Test". To I just changed the word get to post and there was no difference.

  21. #21
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,094
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    just changing GET to POST will not work, you will need an additional line to tell it what is posted.
    Code:
     xmlHttp.open("POST", "ajax.php", true);     
     xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    I was just giving a heads up that if you are loosing data from the table you may need to use the POST method. I was outputting many paragraphs of text and GET is limited.
    What I lack in acuracy I make up for in misteaks

  22. #22
    SitePoint Guru TacMaf's Avatar
    Join Date
    Dec 2005
    Location
    Manchester, United Kingdom
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, thanks. No luck unfortunately. Thanks.

  23. #23
    SitePoint Guru TacMaf's Avatar
    Join Date
    Dec 2005
    Location
    Manchester, United Kingdom
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it working!! Thanks guys!


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
  •