SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery update select with myssql data on add

    Hello all,
    I'm fairly new to jQuery, but for the most part have been getting the hang of it. However, I'm stuck on something, and I just need some ideas on how to accomplish it. I have a select that is populated from a mysql database, and I have a text input that if your option isn't listed, you can add it and it should add to the table that is populating the initial select. And I want to do it all without reloading the page, which is where jQuery comes in. Now, I've managed to have the text input add to the database without problems and echo back a "success" statement using ajax(). But I'm kind of lost on how to tell it to reload the data in the select.

    The html/php:
    PHP Code:
    <select name="author" id="author">
                    <option value="null" selected="selected">--Select Author--</option>
                <? $query="SELECT * FROM sp_author ORDER BY author_l DESC";
                
    $results=mysql_query($query);
                while(
    $row=mysql_fetch_array($resultsMYSQL_ASSOC)){
                    
    extract($row);
                
    ?>
                <option value="<?php echo ($author_id);?>"> <? echo($author_l);?> </option>
                <?php }    ?>
            </select>

    <div id="AuthorInput">
         <label>First Name</label>
         <input type="text" name="AuthorF" id="AuthorF" /></td>
         <label>Last Name</label>
         <input type="text" name="AuthorL" id="AuthorL" />
         <input type="submit" name="AuthorAdd" id="AuthorAdd" value="create new" />
    </div>
    The jQuery
    Code:
    $("#AuthorAdd").click(function(event){
    		var AuthorF     = $('#AuthorF').attr('value');  
    		var AuthorL     = $('#AuthorL').attr('value');
    		var AuthorAdd    = "AuthorAdd";
    		$.ajax({  
    			type: "POST", 	 
    			url: "ajaxInsertData.php",  
    			data: "AuthorF="+ AuthorF +"& AuthorL="+ AuthorL+"& AuthorAdd="+ AuthorAdd,  
    			success: function(){  
    				$('#AuthorInput').append("Success!");
    			},
    			error: function(){  
    				alert("bloody hell!");
    			} 
    	
     		});  
     		return false;
    	 
    		event.preventDefault();
    	});
    The php that handles the database insert sent off from ajax:
    PHP Code:
             $AuthorF        htmlspecialchars(trim($_POST['AuthorF']));  
         
    $AuthorL        htmlspecialchars(trim($_POST['AuthorL']));  
         
         
    $addAuthor  "INSERT INTO sp_author (author_f,author_l) VALUES ('$AuthorF','$AuthorL')";  
         
    $rs=mysql_query($addAuthor,$db); 
    I think I need to do something on success, but I'm kind of lost for what I should do. I thought about using load() and just having another php file that basically replaces the current select with the same thing; but it would show the newer data having just been called, but that seems like it's a crass way to handle it. I feel like there should be a way to say "run that mysql statement again" on success but my google foo is failing me.

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,156
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    Hi aquagrrl, welcome to the forums.

    I'm no jquery expert by any means, but maybe you could have it append another option to the select without another trip to the server?

  3. #3
    SitePoint Member
    Join Date
    May 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Mittineague. It's an interesting suggestion. But I want to hit the database a second time to make sure that the items showing in the select list are in fact current with what is in the database table.


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
  •