Page 1 of 1

update drop down menu without refresh

Posted: Sun Jan 06, 2008 3:12 pm
by SmokyBarnable
I have a dynamically generated drop down menu that gets updated by clicking the submit button in a form, so the page reloads and I check the $_POST name to update the drop down menu and this works fine. I was wondering if this could be done without a page refresh. I have been researching Ajax and was hoping this would be possible.

Posted: Sun Jan 06, 2008 5:35 pm
by Kieran Huggins
sure it would be - I'll take this opportunity to recommend jQuery for the job - you'll save yourself countless hours of headache.

Posted: Sun Jan 06, 2008 8:26 pm
by califdon
I haven't used jquery (sorry, Kieran! :P ) but there's a good beginner's tutorial on Ajax at http://w3schools.com/ajax/default.asp. If you already know javascript, Ajax is pretty easy and will do exactly what you described.

Posted: Sun Jan 06, 2008 9:12 pm
by SmokyBarnable
Does it have something to do with using the innerHTML attribute?

Posted: Mon Jan 07, 2008 2:32 am
by Kieran Huggins
califdon wrote:I haven't used jquery (sorry, Kieran! :P )
:dubious:

:nono:

This has jquery written all over it - check out the "load()" method. One line.

Posted: Tue Jan 08, 2008 12:14 pm
by SmokyBarnable
I have checked into jquery and although I know little about javascript I am trying to learn. Do I understand correctly that everything within the div tags will be refreshed if I give the div tag an id? I just want to click a link that will call the php file which querys the database and updates the string that forms the drop down menu.

Code: Select all

<html> 
<head>
 <script type="text/JavaScript" src="jquery.js"></script> 
 <script type="text/JavaScript"> 
 $(document).ready(function(){ 
   $("#update").click(function(){ 
     $("#divid p").load("update_dropdown_menu.php"); 
   }); 
 }); 
 </script>
</head> 
<body> 
    <div id="divid">
      <?php echo $drop_down_menu; ?>
     <a href="update_dropdown_menu.php">update</a>
    </div> 
</body> 
</html>

Posted: Wed Jan 09, 2008 1:23 pm
by SmokyBarnable
In other words, on page load a drop down form is generated by a database call. I would then like to put a button next to the drop menu and call it "Update". When this button is pressed it will check the database for changes and if there are any it will update the drop down menu html. Instead of a full page refresh I would like only the drop down menu to refresh itself. Can I put the html drop down menu code in a div tag and use jquery to refresh it?

Re: update drop down menu without refresh

Posted: Thu Jan 10, 2008 8:13 pm
by califdon
Again, I'm talking about Ajax here: yes, it's done using the innerHTML property of any tag (not just DIVs) that has an opening and closing tag. So a DIV would work, but you might not even need to add a DIV, you could replace everything between the <SELECT> and </SELECT>, for example. You could even replace individual <OPTION>...</OPTION>s, if you only needed to change one or two.

The way it works is, you write a Javascript function that instantiates the built-in JS class "XMLHttpRequest" and you define a custom function within that object to do the replacing of the innerHTML that you need to do, then you call a server side script (PHP or whatever) that does the database lookup and echoes back whatever you need to update your page. And yes, you would need to provide an ID property in the tag that you want to modify, so your custom function can find it.

Rather than trying to get into further details, I will refer you to the many good tutorials on Ajax, but that may give you a starting point, conceptually.

Re: update drop down menu without refresh

Posted: Thu Jan 10, 2008 10:18 pm
by RobertGonzalez
I think you might be interested in the change() event in jQuery as well, if you are talking about select lists.