Jump to content

Single dynamic dropdown menu refreshing on click


bullyfrog
 Share

Recommended Posts

Hi Guys I have 1 dropdown menu that shows all my customer's names. There is a popup window (You can see in the code below) that allows the user to add new customers. My problem is I need to reflect the new customer in the dropdown menu, without the user hitting refresh on his browser. All sample codes I've come across uses AJAX and/or Jquery for cascading pulldowns where there are more than 1 dropdown menu's. I can't seem to find a dynamic pulldown that auto refreshes for just 1 pulldown menu which I can use for reference. Shoudn't this be easier? Can anyone help? The code below pretty basic. And I get the impression I need to use AJAX and have the dropdown options in another php page?, And possibly use JQuery as well? I can't seem to wrap my head around these new features. It's been a long time since I did any PHP coding as I left the IT world a long time ago... Here's an extract of my code (Pretty standard PHP stuff with no AJAX or Jquery) <?include("config.php"); $connect=mysql_connect($server, $db_user, $db_pass)or die ("Mysql connecting error"); $result = mysql_db_query($database, "SELECT * FROM CustomerDetails ORDER BY Name");$options=""; while ($row=mysql_fetch_array($result)) {$id=$row["CustID"]; $name=$row["Name"]; $options.="<OPTION VALUE=\"$id\">".$name; } ?> <title>Create Ticket</title><head><script>function open_win_addCust() //popup for user to add new customer{window.open("AddCustomer.html","_blank","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=yes, width=500, height=200");}</script></head> <body> <form name="form1" method="post" action="AddTicket.php"> <p>Customer</p> <p><select name="Customer" size="1" id="Customer" <OPTION VALUE=0>Choose <?=$options?> </select> <a href="javascript:open_win_addCust()">Add Customer</a> <br> <input type="submit" name="Create" id="Create" value="Create New" /> <br> </p></form></body></html> Can anyone help? Thanks!

Link to comment
Share on other sites

It's pretty easy, all you need to do is send an ajax request to get the list of items and replace the current items with the list from the server. You don't need to use jQuery for that, you can if you want to though. Copy that PHP code that builds the list of options and make that its own script, the only thing it should print to the browser is a list of option tags. That's the script that you call with the ajax request. You'll get the response, which will be the list of option tags, and you can use the select element's innerHTML property to replace what's there with the new list. That's the quick and easy way to do it.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...