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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    trying to table sort w/ AJAX

    HI all,

    I am using AJAX to help grab records from a database..this works fine; however, I had been using a table sorting .js. I was thinking it could be done but perhaps I am not looking at it right or possibly it cannot be done. I was thinking it could because the script does not error out on me and does sort by keyboard. I am baffled. Bottom line is this..is it possible to sort a table AFTER an AJAX call using javascript?

    here is a simple table I used to show the problem...thanks!

    Demo with sorting problem to help those figure out my problem

  • #2
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bummer, no ideas?

    Well, I went ahead and coded a server-side solution. I really would have liked to use javascript instead of hitting the server again...but it does the trick for me. Pros and Cons on both. Server hit being a con while minimal coding needed to sort easily on dates/numbers/text and fast on larger recordsets

    I still would love to know why it will not show a link/clickable header...if you happen to know please post it...it's appreciated

    for those interested in server-side solution:

    see it here:Sorting done on the server mixed w/ ajax

    Code:
    <%
      sOrderBy = Request.QueryString("order_by")
      sSortOrder = Request.QueryString("sort_order")
    
      If isNumeric(sOrderBy) Then sOrderBy = CINT(sOrderBy)
    
      Select Case sOrderBy
       Case 0
        sOrderBy = "ORDER BY ColorID ASC" 
        sSortOrder = "ASC"
        sArrow = ""
       Case 1    
        Select Case sSortOrder
         Case "ASC"
          sOrderBy = "ORDER BY ColorID DESC"
          sSortOrder = "DESC"
          sColorIDArrow = "<img style=""position:absolute;right:65px;top:50%;"" src=""images/up.gif"" alt=""Ascending"">"
         Case "DESC"
          sOrderBy = "ORDER BY ColorID ASC"
          sSortOrder = "ASC"
          sColorIDArrow = "<img style=""position:absolute;right:65px;top:50%;"" src=""images/down.gif"" alt=""Descending"">"
        End Select
       Case 2
        Select Case sSortOrder
         Case "ASC"
          sOrderBy = "ORDER BY Color DESC"
          sSortOrder = "DESC"
          sColorArrow = "<img style=""position:absolute;right:50px;top:50%;"" src=""images/up.gif"" alt=""Ascending"">"
         Case "DESC"
          sOrderBy = "ORDER BY Color ASC"
          sSortOrder = "ASC"
          sColorArrow = "<img style=""position:absolute;right:50px;top:50%;"" src=""images/down.gif"" alt=""Descending"">"
        End Select  
      End Select
    
      Set oConn = Server.CreateObject("ADODB.Connection")
       sFilePath = Server.MapPath("databases/colors.mdb")
       sConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & sFilePath & ";" 
       oConn.Open sConn
    
       Set oRs = oConn.Execute("SELECT * FROM tblColors " & sOrderBy & ";")
     
       Response.Write "<table border=""1"" width=""400"">" & _
                      "<tr>" & _
                      "<th onmouseout=""this.style.color = '#000';this.style.cursor='crosshair'"" onmouseover=""this.style.color = 'blue';this.style.cursor='hand';"" style=""position:relative; width=""100"" onclick=""showColors(1,'" & sSortOrder & "');"">Color ID" & sColorIDArrow & "</th>" & _
                      "<th onmouseout=""this.style.color = '#000';this.style.cursor='crosshair'"" onmouseover=""this.style.color = 'blue';this.style.cursor='hand'"" style=""position:relative; width=""300"" onclick=""showColors(2,'" & sSortOrder & "');"">Color" & sColorArrow & "</th>" & _
                      "</tr>"    
    
       If Not oRs.EOF Then
        Do While Not oRs.EOF
         Response.Write " <tr>" & vbCrlf & _
                        "  <td>" & oRs("ColorID") & "</td>" & vbCrlf & _
                        "  <td>" & oRs("Color") & "</td>" & vbCrlf & _
                        " </tr>" & vbCrlf
    
        oRs.MoveNext
        Loop
    
       End If
    
       Response.Write "</table>"
      
    %>

  • #3
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This thread talks about a table sort in javascript which works but there has to be a better way. It is kind of ugly and choppy looking in FireFox although decent in IE. Just click on the pizzas to resort.

    http://www.codingforums.com/showthread.php?t=102638

    I figured it might spur some ideas though.

    david_kw

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I just looked at your first example again. It seems like it works fine on my machine. What is the problem? It seems like a way better solution than the one I linked.

    david_kw
    Last edited by david_kw; 12-11-2006 at 08:40 AM.

  • #5
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi david,

    i appreciate the response.

    in IE6 the table header IS NOT clickable. i am a server side programmer and unfortuantely very weak on js. perhaps an ie issue w/ innerhtml? i get no errors and it does sort; however, only by the Ctrl + Alt method. To make sure, are you referring to the first link/first table? if so, this is pure html and yes it does work well. the second table uses ajax to make a call to the database and the server spits out the html code. this is where i have a problem. it simply does not show the "link" to click on in the header...only the text. all that is needed from the sortable.js is to ensure the table has a class associated to "sortable"....and it does...very odd to me...hopefully an answer out there...again thanks for your time

  • #6
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looking at the source generated the thead for the first table looks like this

    Code:
        <th><a style="text-decoration: none; font-weight: bold; color: black;" onmouseover="this.oldstyle=this.style.cssText;this.style.color='blue'" onmouseout="this.style.cssText=this.oldstyle;" class="abc" href="#" title="Click here to Sort!" onclick="javascript:ml_tsort.resortTable(this.parentNode);return false">Color ID</a></th>
        <th><a style="text-decoration: none; font-weight: bold; color: red;" onmouseover="this.oldstyle=this.style.cssText;this.style.color='blue'" onmouseout="this.style.cssText=this.oldstyle;" class="def" href="#" title="Sorted in descending order" onclick="javascript:ml_tsort.resortTable(this.parentNode);return false">Color</a></th>
    while the second one looks like this

    Code:
      <th>Color ID</th>
      <th>Color</th>
    So the problem is that the created table doesn't have the necessary attributes to fire the sorting routines with out the ctrl-alt click. What I'm not sure is who added them to the table in the first place. Let me see if I can find it quick.

    david_kw

  • #7
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It is done with javascript on page initialization with this call

    ml_tsort.makeSortable(thisTbl);

    so in theory you should be able to call that function after the ajax is finished in stateChanged right after the responseText is set. You might have to set an id for the table so you can find it easily.

    david_kw

  • #8
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    nice debugging...

    ok, i understand your theory, but i don't understand the js syntax for this...what and where within the show_colors_ajax.js does this go?

    also...ummm..not a web guru by any means ... how did you get that particular "source" view? A dom component? i simply do a rt click view source...and of course i only see the the original div placeholder...rather than the postback table from the server.

    note: i threw up a simple table to help w/ faster debugging...on my original setup i have multiple tables and ea having a unique name/id while looping through the recordset on the server...ie:


    pseudo
    i = 0
    initiate loop
    i = i + 1
    tbl_i id_i
    end loop


    gonna have to catch up w/ your idea in a little while david...gotta go to works in a few....i will check later...thanks
    Last edited by user101; 12-11-2006 at 09:32 AM. Reason: added comment

  • #9
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I got the generated source by using FireFox with the Web Developer extension. Very handy. It makes a new menu under the normal one that has View Souce. Under that menu is View Generated Source which is what the browser is actually displaying at that snapshot in time.

    https://addons.mozilla.org/firefox/60/

    As for where the code goes it should go in the function

    stateChanged()

    Now the question is which one.

    Code:
    function stateChanged() 
    { 
      if (xmlHttp.readyState==4 || xmlHttp.readyState == "complete")
      { 
        document.getElementById("show_me_the_colors").innerHTML=xmlHttp.responseText 
        ml_tsort.makeSortable(document.getElementById("newTable"));
      } 
    }
    Then you need to add a the id="newTable" to the table returned in your server script. Of course I can't test this so there could be (will probably be) issues but in theory I'd think this should work.

    david_kw


  •  

    Posting Permissions

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