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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2006
    Location
    Mid-Missouri, USA
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Problems sorting list via AJAX

    I cannot seem to get this sample list (created from a MySQL DB using PHP) to sort via AJAX request. I'm wanting to learn AJAX incorporating PHP but I can't get this simple alphabet list to work. Nothing happens when I click on my links. Here is the code:

    index.php:
    PHP Code:
    <?
    include("lib.class.php");
    $db_conn->connect_to_db("fadedele_ajaxDB");
    ?>
    <html>
    <head>
        <title>Ajax</title>
        <script type="text/javascript" src="global.js"></script>
    </head>


    <body>

    Order By:
    <span id="refreshListOrderAsc" style="color: 335599; cursor: pointer" onClick="orderListBy(ASC);">Ascending</span>
      |  
    <span id="refreshListOrderDesc" style="color: ccaa66; cursor: pointer" onClick="orderListBy(DESC);">Descending</span>

    <br /><br />
                
    <div id="alphabetList">
                
    <?

        $alphabet 
    mysql_query("SELECT * FROM `alphabet` ORDER BY `id` ASC");

        while (
    $row mysql_fetch_array($alphabet)) {
            
               
    $letter $row['letters'];
            
    $letterID $row['id'];
            
    ?>

    <span id="alphabetList"><? echo $letter ?></span><br />

    <? ?>
                
    </div>

    </body>
    </html>
    global.js:
    Code:
    // stores the reference to the XMLHttpRequest object
    var xmlHttp = createXmlHttpRequestObject();
    
    // retrieves the XMLHttpRequest object
    function createXmlHttpRequestObject()
    {    
      // will store the reference to the XMLHttpRequest object
      var xmlHttp;
      // if running Internet Explorer
      if(window.ActiveXObject)
      {
        try
        {
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e)
        {
          xmlHttp = false;
        }
      }
      // if running Mozilla or other browsers
      else
      {
        try
        {
          xmlHttp = new XMLHttpRequest();
        }
        catch (e)
        {
          xmlHttp = false;
        }
      }
      // return the created object or display an error message
      if (!xmlHttp)
     
        alert("Error creating the XMLHttpRequest object.");
      else
        return xmlHttp;
    }
    
    // make asynchronous HTTP request using the XMLHttpRequest object
    function orderListBy(orderByType)
    {
      // proceed only if the xmlHttp object isn't busy
      if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
      {
    
        xmlHttp.open("GET", "list.php?orderBy=" + orderByType, true);
        xmlHttp.send(null);
        
        // define the method to handle server responses
        xmlHttp.onreadystatechange = handleServerResponse;
      }
    }
    
    // executed automatically when a message is received from the server
    function handleServerResponse()
    {
      // move forward only if the transaction has completed
      if (xmlHttp.readyState == 4)
      {
        // status of 200 indicates the transaction completed successfully
        if (xmlHttp.status == 200)
        {
          document.getElementById("alphabetList").innerHTML = xmlHttp.responseText;
        }
        // a HTTP status different than 200 signals an error
        else
        {
          alert("There was a problem accessing the server: " + xmlHttp.statusText);
        }
      }
    }
    list.php:
    PHP Code:
    <?

    include("lib.class.php");
        
    $db_conn->connect_to_db("fadedele_ajaxDB");
        
    $orderBy $_GET['orderBy'];

    $alphabet mysql_query("SELECT * FROM `alphabet` ORDER BY `id` " $orderBy);

    while (
    $row mysql_fetch_array($alphabet)) {
            
           
    $letter $row['letters'];
        
    $letterID $row['id'];
            
    ?>

    <span id="alphabetList"><? echo $letter ?></span><br />

    <? ?>
    I know that I am using the GET method correctly because i can go to "/list.php?orderBy=DESC" and it works fine.

    Any help would be great! Thanks.

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Enclose the parameters to your orderListBy function within single quotation marks.

    dumpfi
    "Failure is not an option. It comes bundled with the software."
    ....../)/)..(\__/).(\(\................../)_/)......
    .....(-.-).(='.'=).(-.-)................(o.O)...../<)
    ....(.).(.)("}_("}(.)(.)...............(.)_(.))Ż/.
    ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
    Little did the bunnies suspect that one of them was a psychotic mass murderer with a 6 ft. axe.

  • Users who have thanked dumpfi for this post:

    panther21001 (12-06-2008)

  • #3
    New to the CF scene
    Join Date
    Mar 2006
    Location
    Mid-Missouri, USA
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Haha, thanks dumpfi! I knew it had to be something small...

    But now another issue arises: Instead of replacing the current list (innerHTML) it appends to the end of the list, removing the final two letters (Aa or Zz).

    Can you please take a quick look at what I have uploaded?

    http://www.fadedelement.com/ajax/

    Thanks!

  • #4
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    You use the same id for your div as for your span elements. Give each element an unique id and the problem should go away.

    dumpfi
    "Failure is not an option. It comes bundled with the software."
    ....../)/)..(\__/).(\(\................../)_/)......
    .....(-.-).(='.'=).(-.-)................(o.O)...../<)
    ....(.).(.)("}_("}(.)(.)...............(.)_(.))Ż/.
    ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
    Little did the bunnies suspect that one of them was a psychotic mass murderer with a 6 ft. axe.

  • Users who have thanked dumpfi for this post:

    panther21001 (12-06-2008)

  • #5
    New to the CF scene
    Join Date
    Mar 2006
    Location
    Mid-Missouri, USA
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks again dumpfi. That was most certainly the problem! I'm glad you caught it, and taught me that I need to be more careful when I review my code next time.


  •  

    Posting Permissions

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