update drop down menu without refresh
Moderator: General Moderators
- SmokyBarnable
- Forum Contributor
- Posts: 105
- Joined: Wed Nov 01, 2006 5:44 pm
update drop down menu without refresh
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.
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
I haven't used jquery (sorry, Kieran!
) 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.
- SmokyBarnable
- Forum Contributor
- Posts: 105
- Joined: Wed Nov 01, 2006 5:44 pm
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
- SmokyBarnable
- Forum Contributor
- Posts: 105
- Joined: Wed Nov 01, 2006 5:44 pm
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>- SmokyBarnable
- Forum Contributor
- Posts: 105
- Joined: Wed Nov 01, 2006 5:44 pm
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
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.
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.
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
Re: update drop down menu without refresh
I think you might be interested in the change() event in jQuery as well, if you are talking about select lists.