www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 30

Thread: AJAX Data Filter Does Nothing

  1. #1
    Join Date
    Jul 2006
    Posts
    249

    AJAX Data Filter Does Nothing

    I'm trying to filter tabular data using AJAX. I have a text input field that should reduce the table display to only show entries that contain the string entered into the box. Currently, changing the text box does nothing.

    This is the PHP script that generates the main page:

    PHP Code:
    <?PHP
    session_start
    ();

    $_SESSION['current_entity_ID'] = '0'// delete this later!!

    // this is a list of events, that is sortable!!

    // include some crap
    require('../../global/config.php');
    require(
    '../../include/functions/global_functions.func');
    require(
    '../../include/SQL_connect.php');
    require(
    '../../include/ajax/event_list_table.func');

    // start page output
    require('../../include/header.php');

    // Include the AJAX basic JS function
    echo "<script src='../../include/ajax/ajax_basic.js'></script>";


    // close the head and start the page body
    echo "</head><body>";

    /* Start To Build the Main HTML Page */

    // main body area
    echo "<div id='border'>";


    // query for table guts
    $query "SELECT * FROM Events JOIN Producers WHERE Events.producer_ID = Producers.producer_KEY AND Events.entity_ID = '" $_SESSION['current_entity_ID'] . "' ORDER BY Events.event_start_time";
    $result safe_query($query);

    // build the table guts
    $event_table draw_event_list_table($result);


    // output the table inside of a div
    echo "<div id='event_table_area'>";
    echo 
    $event_table;
    echo 
    "</div>";

    // show the filter form
    echo "<form method='post' name='filter' action='"$_SERVER['PHP_SELF'] ."'>";
    echo 
    "<label for='event_name_filter'>Event Name:</label>
    <input type='text' onkeyup='ajaxFunction();' value='start typing an event name to filter the form' name='event_name_filter' id='event_name_filter' />"
    ;


    echo 
    "</div></body>"//close the main body area

    ?>
    This is ajax_basic.js:

    Code:
    function ajaxFunction()
      {
      var xmlHttp;
      try
        {
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
        }
      catch (e)
        {
        // Internet Explorer
        try
          {
          xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
        catch (e)
          {
          try
            {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
          catch (e)
            {
            alert("Your browser does not support AJAX!");
            return false;
            }
          }
        }
        xmlHttp.onreadystatechange=function()
          {
          if(xmlHttp.readyState==4)
            {
            document.event_table_area.value=xmlHttp.responseText;
            }
          }
        xmlHttp.open("POST","event_list_table.func",true);
        xmlHttp.send(null);
      }
    and this is event_list_table.func, the PHP script that it calls:

    PHP Code:
    <?PHP

    /* The following is a set of functions to sort the event list display
    based on user preferences. This function will be called using AJAX.
    */


    // Create the header row of the Event List Table
    function draw_event_list_tabletop()
        {
        
    $h_output =  "<br /><table width='720px' align='center' class='sortable' id='unique_id'>";
        
    $h_output .=  "<tr class='sortable'>
                <th class='sortable_space'></th>
                <th width='280px' class='sortable'>Event</th>
                <th class='sortable_space'></th>
                <th  width='115px' class='sortable'>Producer</th>
                <th class='sortable_space'></th>
                <th  width='55px' class='sortable'>Start</th>
                <th class='sortable_space'></th>
                <th  width='55px' class='sortable'>End</th>
                <th class='sortable_space'></th>
                <th width='120px' class='sortable'>Date</th>
                </tr>"
    ;
                
        return 
    $h_output;
        }
        
    // Create the Events List Table
    function draw_event_list_table($result)
        {
        
        
    // Start the table
        
    $h_output draw_event_list_tabletop();
        
        
    $output $h_output;
        
        
    $i 1;
        
        WHILE (
    $row mysql_fetch_array($result))
            {
            
    $output .=  "<tr class='sortable'>";
            
    $output .=  "<td><input id='eventlist_$i' type='checkbox' /></td>";
            
    $output .=  "<td class='sortable'><label for='eventlist_$i'>" $row['event_name'] . "</label></td>";
            
    $output .=  "<td></td>";
            
    $output .=  "<td class='sortable'>" $row['producer_name'] . "</td>";
            
    $output .=  "<td></td>";
            
    $output .=  "<td class='sortable'>" date('g:i a'$row['event_start_time']) . "</td>";
            
    $output .=  "<td></td>";
            
    $output .=  "<td class='sortable'>" date('g:i a'$row['event_end_time']) . "</td>";
            
    $output .=  "<td></td>";
            
    $output .=  "<td class='sortable'>" date('l, F d'$row['event_start_time']) . "</td>";
            
    $output .=  "</tr>";
            
            
    $i++;
            }
            
        
    // close the table
        
    $output .=  "</table>";
        
        return 
    $output;
        }


    function 
    filter_by_event_name($event_name_IP_string)
        {
        
        
    $query "SELECT * FROM Events WHERE event_name = '%" $event_name_IP_string "%'";
        
        
    $result safe_query($query);
        
        
    // build the table guts
        
    draw_event_list_table($result);
        
        }
        
    ?>

  2. #2
    Join Date
    Jul 2006
    Posts
    249
    PHP Code:
    // build the table guts
    draw_event_list_table($result); 
    has been changed to:

    PHP Code:
    // build the table guts
    $output draw_event_list_table($result);
    return 
    $output
    but still no errors, or result.

  3. #3
    Join Date
    Apr 2007
    Location
    NY
    Posts
    58
    Instead of:
    Code:
    document.event_table_area.value=xmlHttp.responseText;
    try:
    Code:
    alert(xmlHttp.responseText); //To make sure you are getting a reply (then remove)
    document.getElementById("event_table_area").innerHTML=xmlHttp.responseText;

  4. #4
    Join Date
    Jul 2006
    Posts
    249
    I'm now using:

    Code:
    if(xmlHttp.readyState==4)
            {
            alert(xmlHttp.responseText); //To make sure you are getting a reply (then remove)
    			document.getElementById("event_table_area").innerHTML=xmlHttp.responseText;
            }
    and still getting no response.

  5. #5
    Join Date
    Apr 2007
    Location
    NY
    Posts
    58
    This would be easier if I had PHP installed on this machine...
    Did the alert box show up? If it didn't show up the AJAX call was likely never made. If it did show up was it empty?
    It doesn't look like event_list_table.func does anything. It is just a bunch of function declarations. You need to either call one of the functions or just display some text outside of a function to make sure the AJAX getting called properly.

  6. #6
    Join Date
    Jul 2006
    Posts
    249
    I had the wrong path to "event_list_table.func" in the ajax_basic.js file.

    Now that I corrected it, I get an alert box with an ERROR 500 Internal Server Error.

    I'll try sticking an echo command inside event_list_table to see if I can get some output from it.

    Live Testing Site


    Thanks,

    Nick

  7. #7
    Join Date
    Apr 2007
    Location
    NY
    Posts
    58
    Try renaming event_list_table.func to event_list_table.php, and updating the code where appropriate.
    It might be an invalid filetype and PHP doesn't even attempt to process it. You can include .func (or anything) inside a php file, but servers will restrict the types of files a user can actually access.

  8. #8
    Join Date
    Jul 2006
    Posts
    249
    Alright, it's almost working. I had custom mime types setup in .htaccess for the .func extension, but I'm guessing that it's folder specific.

    Anyway, I'm using .PHP now, and it's mostly working. the only problem is, it doesn't seem to be sending the value of the text text box to the form.

    Do you use:

    PHP Code:
    $event_name_IP_string $HTTP_POST_VARS['event_name_filter']; 
    like normal? or do you have to do something special to get the value?

  9. #9
    Join Date
    Apr 2007
    Location
    NY
    Posts
    58
    You need to send the POST header in the request. Your current AJAX function isn't connected to the form, and is just sending an empty POST header. I can't remember how to do that off the top of my head, but if you search for AJAX POST scripts you should be a good skeleton to work off of.

  10. #10
    Join Date
    Jun 2005
    Posts
    134
    For POST header requests...

    Code:
    var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    function ajaxPost(oParameters){
    	var valsToSend = "id="+oParameters;    // Example
            var url = "myajaxpage.php";
    	xmlhttp.open("POST",url, true)
    	xmlhttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");     // Resolve any cache problems...
    	xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");	// Required for POST requests.
    	xmlhttp.onreadystatechange = someAjaxHandleFunction;
    	xmlhttp.send(toSend);
            }
    Should work fine using that...

  11. #11
    Join Date
    Jul 2006
    Posts
    249
    I'm using:

    Code:
    function ajaxFunction()
      {
      var xmlHttp;
      try
        {
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
        }
      catch (e)
        {
        // Internet Explorer
        try
          {
          xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
        catch (e)
          {
          try
            {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
          catch (e)
            {
            alert("Your browser does not support AJAX!");
            return false;
            }
          }
        }
    
    var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    function ajaxPost(oParameters){
    	var valsToSend = "id="+oParameters;    // Example
            var url = "../../include/ajax/event_list_table.php";
    	xmlhttp.open("POST",url, true)
    	xmlhttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");     // Resolve any cache problems...
    	xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");	// Required for POST requests.
    	xmlhttp.onreadystatechange = function()
          {
          if(xmlHttp.readyState==4)
            {
            // alert(xmlHttp.responseText); //To make sure you are getting a reply (then remove)
    			document.getElementById("event_table_area").innerHTML=xmlHttp.responseText;
            }
          }
    	xmlhttp.send(toSend);
            }
    	}
    And it's switched back to doing nothing. I must have broken something in the process?

  12. #12
    Join Date
    Jul 2006
    Posts
    249
    Is "oParameters" a built in variable, or am I supposed to put something else on that line?

    Code:
    var valsToSend = "id="+oParameters;    // Example"

  13. #13
    Join Date
    Jul 2006
    Posts
    249
    Actually it looks like this function is never called... Is this supposed to be called by the onkeyup event? And what do I pass to it as the oParameters argument?

    Code:
    function ajaxPost(oParameters)
    		{
    		var valsToSend = "id="+oParameters;    // Example

  14. #14
    Join Date
    Jul 2006
    Posts
    249
    Ok, I can get it as far as echoing "event_name_filter=d" (where 'd' is what I typed in the textbox) using 'alert(toSend);'.

    I'm assuming this is what the 'toSend' value should be?

    When I comment out alert(toSend);, I get nothing.

    PHP Code:
    function filter_datas()
        {
          
    event_name_filter document.getElementById('event_name_filter');
         try
            {
            
    // Firefox, Opera 8.0+, Safari
            
    xmlHttp=new XMLHttpRequest();
            }
        catch (
    e)
            {
            
    // Internet Explorer
            
    try
                {
                
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                }
            catch (
    e)
                {
                try
                    {
                    
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (
    e)
                    {
                    
    alert("Your browser does not support AJAX!");
                    return 
    false;
                    }
                }
            }
            
            var 
    toSend 'event_name_filter=' event_name_filter.value;
            
            
    // alert(toSend);
            
    var url "../../include/ajax/event_list_table_ajax.php";
            
            
    xmlhttp.open("POST",urltrue)
            
            
    xmlhttp.setRequestHeader("If-Modified-Since""Sat, 1 Jan 2000 00:00:00 GMT");     // Resolve any cache problems...
            
    xmlhttp.setRequestHeader("Content-Type""application/x-www-form-urlencoded");    // Required for POST requests.
            
            
    xmlhttp.onreadystatechange = function()
                {
                if(
    xmlHttp.readyState==4)
                    {
                    
    alert(xmlHttp.responseText); //To make sure you are getting a reply (then remove)
                    
    document.getElementById("event_table_area").innerHTML=xmlHttp.responseText;
                    }
                }
            
    xmlhttp.send(toSend);
            
            } 

  15. #15
    Join Date
    Jul 2006
    Posts
    249
    Found a tutorial on IBM's website, and made some corrections. Still no response though. I like PHP so much better because when you make a mistake, the whole thing refuses to load and it gives a big ugly "PARSE ERROR" message. This whole 'doing nothing thing' makes it hard to troubleshoot. Anyway, here's my current code:

    PHP Code:
    function filter_datas()
        {
          
    event_name_filter document.getElementById('event_name_filter');

        var 
    toSend 'event_name_filter=' event_name_filter.value;
        
        var 
    url "../../include/ajax/event_list_table_ajax.php?" escape(toSend)";
        
        xmlhttp.open("
    GET", url, true)
        xmlhttp.onreadystatechange = updatePage;
        xmlhttp.send(null);
        }
        
    function updatePage()
        {
        if (request.readyState == 4)
            {
            if (request.status == 200)
                {
                alert(xmlHttp.responseText); //To make sure you are getting a reply (then remove)
                document.getElementById("
    event_table_area").innerHTML=xmlHttp.responseText;
                }
                else
                {
                alert("
    status is " + request.status);
                }
           }
       } 

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles