• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
RE-populating Dynamic Drop-downs

#1
[eluser]Jon Parker[/eluser]
Hi Guys... I've been pulling my hair out with this for too long now.

I'm using CI and jQuery (although I know almost nothing about jQuery)

Here's the problem... It's more of a theoretical one

I'm using a jQuery plugin that populates 4 chained select boxes via AJAJ

I have Country, Region, SubRegion and Town, which are used to determine the location of a property.

As it's a relational database, so only the TownId is stored for each profile.

When you select a county, the region box is populated with the corresponding regions and when you select a region, the SubRegion box is populated with the corresponding sub-regions etc etc etc etc

Now, this all works fine when adding a new record but I just can't get my head round how I should be handling situations where a submitted form is shown again (e.g when validation of another form field fails) or when I'm updating a record that already exists.

As the data in the select boxes is hierarchical, how do I go about RE-populating the boxes with the corresponding values??

The only way I can think of doing this so far is way over my head with jQuery and I was wondering if anyone else could give me a point in the right direction?

The only way I can think of doing it at the moment is by replacing the select boxes with text and a hidden form field when that data has been submitted correctly.

Then if they wanted to edit the location, they could click an 'Edit Location' link, which would replace the text and hidden field in the form with the original select boxes via jQuery.

This just seems a bit of a messy way of doing things but I can't seem to find another example on the web to replicate, nor anyone with similar problems.

Any help would be REALLY appreciated

Cheers

Jon

#2
[eluser]Sumon[/eluser]
Well, lets think, whats happen when you change first drop down. Call a function with this value and receive value(another list box).
okay now when validation failed then let us check select box appearance

Code:
if(isset($firstSelectBox))
{
  //call that url which generate another (region) list box.
}
now repeat this task for second select box as well.
Code:
if(isset($secondSelectBox))
{
  //load data/list box
}

For first load of the page these functions will not be called because there are no list/dropdown.

Hope form loaded with previous selected values.

#3
[eluser]xwero[/eluser]
I think you have to use a second parameter to find out which values need to go into the checkboxes
Code:
function get_towns($sub_region,$selected_town = FALSE)
{
   if($selected_town)
   {
      $sub_region = $this->db->select('subRegion')->from('towns')->where('id',$sub_region)->get()->row()->subRegion;
   }

   return $this->db->select('id,name')->from('towns')->where('subRegion',$sub_region)->get()->rows();
}
When the subRegion is selected you use get_towns(1) and when the selects are reloaded use get_towns(1,TRUE). The same thing you can do for the region and subRegion data fetching methods.

#4
[eluser]Jay Turley[/eluser]
As this is a "theoretical" problem, my theoretical answer is that you should submit your form using ajax. That way you don't disturb the values of the select boxes by reloading that portion of the DOM.

Of course, if you do this, you can't use CI's validation system because it wants to reload the entire form. So you would need to have your own custom validation.

I would probably approach it this way - use jQuery to hijack the form submission, submit the data to a controller which returns a json object letting you know what the errors are, and then showing them using ajax as well.

Essentially you will be building your own custom RIA validation system Sad

You could also store the values in the session and then write a custom javascript to repopulate the chained selects, but this seems more complicated.

Best of luck!

#5
[eluser]Jon Parker[/eluser]
Hi again

Thanks for taking the time to read and respond...

I'm not sure if it's you lot not understanding me or me not understanding you (I'm guessing it's the former!)

@Sumon: I think you're describing the behaviour of the select boxes that's already taken care of by the jQuery plug-in that I'm using. When a select box value changes, it goes off to get a JSON array from another controller, and the next select box is build from that.

@Jay: I agree with the way that an AJAX form you describe would maintain state through validation but the problem I have is also when you go to edit the record and display the correct cascade of Country, Region, SubRegion and Town


The hierarchical cascade works fine going 'down' when selecting the data from the top down but what I don't understand is how to approach populating the select boxes form the bottom (TownId) up.

Hope that makes a bit more sense!! lol

If not, I have my messy way almost working now

Do any of you know of any public sites on the web where this sort of thing can be seen in action?

Thanks again

Jon

#6
[eluser]Sumon[/eluser]
I am really sorry to say, it's not in my sense if i can generate Top-Down approach so why not i am able to do Down-top? Surely this is the case when there are only 2 drop down lists.

If there are more then 2 list boxes then there are no way how you can set two different actions by the second drop down(without select any check box or so like Top down / Bottom Up).

I think, can't help you my post. Sorry Sad

#7
[eluser]drewbee[/eluser]
Why can you not work your way backwards to the relations of the database? If you are only storing the very last value of the top down, grab that value "down" and work your way backwards to the top.

town > subregion > region > country

I guess I am not understanding what the issue is? If you can link it one way, you can also link it the other!

#8
[eluser]xwero[/eluser]
drewbee that is the idea behind my solution Smile

#9
[eluser]drewbee[/eluser]
[quote author="xwero" date="1221676989"]drewbee that is the idea behind my solution Smile[/quote]

Note to self: brush up on the speed reading skills. LOL

#10
[eluser]Jon Parker[/eluser]
Thanks again for the replies:

@xwero: I'm sorry, I thought your answer was along the same lines as Sumon's

@drewbee: I think you hit the nail on the head with "if you can link one way you can also link the other" really

My problem is that I'm using a plugin that handles the cascade through jQuery and I have no idea how to go about extending this so that it works on the way back up too.

Looks like I'll be sticking with my messy method for now, while I learn exactly what's going on in the plugin, and then I can extend it myself.

Thanks again for the help guys and making me realise that I just need to learn some more!!! lol

Cheers

Jon


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2019 MyBB Group.