Solved

Editing Jquery & Ajax database populated selectbox forms.

Posted on 2011-03-18
13
488 Views
Last Modified: 2012-08-13
Hello All,

I'm using Jquery & Ajax database populated select form. While adding the data, I have no problem. Since I have to choose menu's from beginning. My problem is while trying to edit them.

For example, I'm trying to add new user;

1. Username:
2. Password:
3. Name & Surname :
4. Country:
5. City:

 Depending on country, it is listing Cities (all data is taken from database). Since I have to get the value with onChange, or on click, etc... Editing becomes problem.
 If I want to just edit Username or password, I have to select Country and then city again before I click edit.

I will be glad if anyone could help me out with my problem.
0
Comment
Question by:pixalax
  • 5
  • 4
  • 2
13 Comments
 
LVL 6

Expert Comment

by:blueghozt
Comment Utility
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.
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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 );

Open in new window



0
 
LVL 6

Expert Comment

by:blueghozt
Comment Utility
@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.
0
 
LVL 2

Author Comment

by:pixalax
Comment Utility
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;
});

Open 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;
}

Open 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;

Open 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.
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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 );

Open in new window

0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 2

Author Comment

by:pixalax
Comment Utility
@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.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
>I really would like to use more elegant way instead of populating it with unnecessary inputs while there is a straight way.
:(
You put PHP inside javascript block, I don't like that

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; ?>

Open in new window


But... You're the boss :))

Are you using $_POST or $_REQUEST ?

For testing purpose change to $_REQUEST to call the page directly : http://www.yoursite.com/path/to/cities.php?do=get_cities&selected=2

if you get your options and only your options (not the select or any other html content) try this :





if ($('select#country').val() > 1) {
	$.post(form_url+"cities.php", {
                "do":"get_cities",
		id: $('#country').val(),
		selected: 2 // test
	}, function(response){
		setTimeout("AjaxPopulate('city', '"+escape(response)+"')", 400);
	});
	return false;
}

Open in new window

0
 
LVL 2

Author Comment

by:pixalax
Comment Utility
@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>

Open 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>

Open 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>

Open 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.
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
>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
0
 
LVL 2

Author Comment

by:pixalax
Comment Utility
@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>

Open 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).
0
 
LVL 2

Author Closing Comment

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

Thank you very much.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article will show, step by step, how to integrate R code into a R Sweave document
A short article about a problem I had getting the GPS LocationListener working.
Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now