update drop down menu without refresh

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
SmokyBarnable
Forum Contributor
Posts: 105
Joined: Wed Nov 01, 2006 5:44 pm

update drop down menu without refresh

Post 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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post 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.
User avatar
SmokyBarnable
Forum Contributor
Posts: 105
Joined: Wed Nov 01, 2006 5:44 pm

Post by SmokyBarnable »

Does it have something to do with using the innerHTML attribute?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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.
User avatar
SmokyBarnable
Forum Contributor
Posts: 105
Joined: Wed Nov 01, 2006 5:44 pm

Post 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>
User avatar
SmokyBarnable
Forum Contributor
Posts: 105
Joined: Wed Nov 01, 2006 5:44 pm

Post 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?
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: update drop down menu without refresh

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: update drop down menu without refresh

Post by RobertGonzalez »

I think you might be interested in the change() event in jQuery as well, if you are talking about select lists.
Post Reply