Editing Jquery & Ajax database populated selectbox forms.

surely there must be a way to populate the cities drop down with an initial value? show us your Javascript for these drop downs and I am sure there will be a way to inject some initial values.

Use an hidden field to store the CountryID and the CityID respective value of the each dropdown

with jquery set the original value with something like :

var countryID = $("#countryHidden").val(); // id of the country
$("#countryDropdown").attr("value", countryID );

var cityID = $("#cityHidden").val(); // id of the city
$("#cityDropdown").attr("value", cityID );

Select allOpen in new window

@leakim I think @pixalax was saying when he enters edit mode, whilst he may have values for City and Country in the db record being edited, he doesn't know how to apply them to the dropdowns and instead has blank cities awaiting selection of country - hiding them would be fine with hidden fields supplying values IF he never wanted to edit the city or country for that record - in which case he might as well not even have the fields in the update if they never change. I am thinking if he wants to change country for a record then he would like the cities dropdown to behave as per a normal new entry - hence the request for sight of the Javascript in use - injecting initial values will probably be quite straightforward.

Thank you for all your time and reply.
@blueghozt;
Yes, you understood me.

Here is my jquery & ajax

// Get #country value and populate #city
$('#country').bind('change',function () {
$.post(form_url+"cities.php?do=get_cities", {
	id: $(this).val()
	}, function(response){
	setTimeout("AjaxPopulate('city', '"+escape(response)+"')", 400);
	});
	return false;
});

Select allOpen in new window

I managed to come this far

if ($('select#country').val() > 1) {
	$.post(form_url+"cities.php?do=get_cities", {
		id: $('#country').val(),
		selected: <?php echo (isset($info))? $info->parent_id : 0; ?>
	}, function(response){
		setTimeout("AjaxPopulate('city', '"+escape(response)+"')", 400);
	});
	return false;
}

Select allOpen in new window

Now everything is working smoothly except 2 glitches.
1. It is selecting the city but it is not displaying. I have to open the drop down to see which one is selected or once i press submit button i can see it is suddenly selecting it but it is not replacing "Select a City".

Select a City -shows this one till I press submit, please check my php Code for details.-
City A
City B -selected-
City C

My PHP Code for listing them

if ($founds) {
			$cikti = "<option value=\"\">Select a City</option>";
			foreach ($founds as $found) {
				$cikti .= "<option value=\"{$found->id}\"";
				($selectedID > 0 && $selectedID == $found->id) ? $cikti .= "selected=\"selected\"" : '';
				$cikti .= ">{$found->cityName}</option>";
			}
		}else {
			$cikti = "<option value=\"\">No city data for selected country</option>";
		}
echo $cikti;

Select allOpen in new window

2. In edit mode, even tho I change the country, cities doesn't change. I know I have do do something with my Jquery but I am a newbie with Jquery so I don't know what to do about it.

I will be glad if you could assist me.

I did not propose to hide the dropdowns.
The same way you restore the username field, you need to restore country id and city id but in hidden fields instead textbox and not in the dropdowns
Once you have the right country and city ID in the hidden fields, you can restore the right selectedIndex (choosen) value of each dropdown with the following code :

var countryID = $("#countryHidden").val(); // id of the country
$("#countryDropdown").attr("value", countryID );

var cityID = $("#cityHidden").val(); // id of the city
$("#cityDropdown").attr("value", cityID );

Select allOpen in new window

@leakim971;
I really would like to use more elegant way instead of populating it with unnecessary inputs while there is a straight way.
If I can't manage of course I will have to walk around it.

@leakim971;
No, please don't get me wrong. I just want to achieve it in this way.

I had to use php inside of the javascript. Other way around I wouldn't be able to select the City while I want to edit. I would still need to manually select the city. I don't know other way around for this.

"get_cities" is $_GET,
"id" and "selected" is $_POST.

 I just thought I might be adding more stuff so, I also used $_GET.

My problem is not that I can't get the data. I am able to get them.

While editing, my javascript is adding the rest of the <options></options> (Please check my php code above, you will see it is correct) in this element.

<select id="city">
<option value="0">Cities</option>
</select>

Select allOpen in new window

So once I get my data from cities.php?do=get_cities above select element changes to

<select id="city">
<option value="0">Cities</option>
<option value="0">Select a City</option>
<option value="1">City A</option>
<option value="2">City B</option>
<option value="3">City C</option>
</select>

Select allOpen in new window

Let's say user has City ID 2 (City B). When I view source code it is like this.

<select id="city">
<option value="0">Cities</option>
<!-- UNDER THIS LINE, ALL DATA COMES VIA AJAX FROM cities.php?do=get_cities-->
<option value="0">Select a City</option>
<option value="1">City A</option>
<option value="2" selected="selected">City B</option>
<option value="3">City C</option>
<!--- FINISHED ADDING DATA VIA AJAX-->
</select>

Select allOpen in new window

BUT, MY PROBLEM IS, it is still showing CITIES as if it is SELECTED, not CITY B. Once I press SUBMIT button, suddenly I see that City B is selected.

Now, it just looks ugly. I can still save the data to database as CITY B, but while viewing the page, TILL I PRESS SUBMIT BUTTON, it is displaying as if CITIES is selected.

2. PROBLEM
While trying to edit data, all is good but WHEN I TRY TO CHANGE COUNTRY (let's say from Country A to Country B), it is not changing cities (even tho if I change to Country B, it is still showing COUNTRY A's cities)

I don't know if I managed to express myself this time.

Thank you for your time.

>http://www.yoursite.com/path/to/cities.php?do=get_cities&selected=2
Don't worry I'm joking ;-))

Have you a live link ?

Did you try to call the page to get the options directly : http://www.yoursite.com/path/to/cities.php?do=get_cities&selected=2

I read you get them right but just to confirm, thanks

@leakin971;
Thank you for your reply. I am working on it locally, I don't have a link right now (it will require some changes before I could publish). I tried to call it, and this is the response;

<option value="0">Select a City</option>
<option value="1">City A</option>
<option value="2" selected="selected">City B</option>
<option value="3">City C</option>

Select allOpen in new window

It is working correctly when I call it, just inside of the page it is not displaying correctly. If I would take whole <select> inside, working just the way it should be (selected option is behaving normally). If I do it in this way than I'm having another problem;

1. Design is using jquery to style <select>.
2. If I include jquery files in cities.php, it doesn't work, No select is visible, if I remove jquery files then select box is visible but no styling is done.

Do you have any solutions for the 2nd problem? It seems it is more urgent than the first one (considering first problem doesn't create any actual data problem while editing data, 2nd problem might be a real problem).

Instead of deleting the question, I would like to give points to you leakim971 for your help and time.

Thank you very much.