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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ajax DB call resulting in unchecking of checkboxes

    Hi all,

    I'm having a problem with a combination of Ajax / PHP / Javascript and I'm stuck. I've spent a fair amount of time googling possible solutions but I can't find anything.

    What I am trying to do
    I am using Ajax to query a MySQL database using an input text box. Typing into this input text box will fill the contents of a DIV located below the text box. For example, if the user wants to find a person with the surname "Smith" then they can type this into the input textbox and the ajax functionality will bring back all people with a first or surname containing "smith".

    Now, next to each name displayed is a checkbox, and the idea behind this is that the user checks the checkbox if they want to select that particular person, and then if they want to also select someone with the surname "bloggs" they can replace the contents of the input textbox with "bloggs" (instead of "smith") and the ajax functionality will bring back all people with a first or surname containing "bloggs" and the user can then check that particular person too (i.e. they now have two people selected, "smith and "bloggs")

    If you have ever organised an event on facebook then you may know what I am talking about - when you invite guests you can use the search filter above to filter names and then check/select the people you want to add.

    My Problem
    I know how to do almost all of the above, however the problem I am experiencing is that when the user checks the checkbox next to "smith" and then uses the search filter to search for something different (e.g. "smi") then the checkbox next to smith is re-loaded through ajax and is given a default state of unchecked. This is a problem as it is confusing to the user - they will think it is not selected when it actually is.

    I have tried to find a solution to this but I can't, so I am resorting to this cry for help! My code so far is below:

    BASIC HTML
    Here I have the input field and the results div.
    Code:
    <input type="text" name="input_players" onkeyup="showPlayers(this.value)" />
    <br />
    <div id="dbResults"></div>
    JAVASCRIPT CODE, INCLUDING AJAX STUFF
    This is pretty basic AJAX / Javascript I think.
    Code:
    function showPlayers(str){
    
    	//HTTP REQUEST CODE
    	if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();} // code for IE7+, Firefox, Chrome, Opera, Safari
    	else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}// code for IE6, IE5
    	  	
    	
    	xmlhttp.onreadystatechange=function(){
    		if (xmlhttp.readyState==4 && xmlhttp.status==200){
    			document.getElementById("dbResults").innerHTML=xmlhttp.responseText;
    		}
    	}
    	
    	xmlhttp.open("GET","ajax/get_players.php?q="+str,true);
    	xmlhttp.send();
    	
    }
    PHP CODE, INCLUDING DB CALL
    This is the get_players.php page referenced in the above javascript.
    PHP Code:
    <? 
        
    //DETERMINE INPUT VALUE 
        
    $input_value=$_GET["q"]; 
         
        
    //CONNECT TO DATABASE 
        
    $con mysql_connect("localhost","root","password"); 
        if (!
    $con){die('Could not connect: ' mysql_error());} 
         
        
    //SELECT DATABASE 
        
    mysql_select_db("db_players"$con); 
         
        
    //QUERY 
        
    $query "SELECT player_id, player_first_name, player_last_name FROM tbl_player " 
                
    ."WHERE (player_first_name LIKE '%".$input_value."%' OR player_last_name LIKE '%".$input_value."%') " 
                
    ."ORDER BY player_last_name, player_first_name"

        
    //EXECUTE QUERY 
        
    $db_results mysql_query($query) or die(mysql_error()); 
         
        
    //PUT RESULTS IN AN ARRAY 
        
    $results_array = array(); 
        while(
    $row mysql_fetch_assoc($db_results)){ 
            
    $results_array[$row['player_id']]['p_id'] = $row['player_id']; 
            
    $results_array[$row['player_id']]['p_first_name'] = $row['player_first_name']; 
            
    $results_array[$row['player_id']]['p_last_name'] = $row['player_last_name']; 
        } 
         
        
    //DISPLAY RESULTS 
        
    if(sizeof($results_array)>0){ 
            foreach(
    $results_array as $dbr_id => $result_details){ 
                
    //DECLARE VARIABLES 
                
    $p_full_name=$result_details['p_last_name'].", ".$result_details['p_first_name']; 
                
    $return_value .= "<input id='chk_box_".$dbr_id."' type='checkbox' />&nbsp;".$p_full_name."<br />"
            } 
        } 
        echo 
    $return_value
         
        
    //CLOSE CONNECTION     
        
    mysql_close($con); 
    ?>
    I think that's all the code I need to include. I am thinking that maybe I need to write some sort of javascript function that checks the status of the checkbox each time the ajax db results are refreshed and checks the checkbox again if it was already checked previously?

    I'm not sure. Any help or advice would be greatly appreciated!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,772
    Thanks
    23
    Thanked 550 Times in 549 Posts
    I would use two div's. The first <div id="dbResults"></div> and call that Result of Search.
    Then when a checkbox is clicked I'd copy and paste that name into the second div called (what? up to you. Maybe 'Invited People')
    Then if you do a second search clear the dbResults div and process as before.
    NOTE: you do need a remove checkbox next to each name in the second div.


  •  

    Posting Permissions

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