Cascading dropdown boxes and MVC2 RSS

• • Reply
  

  SnowJim

  Member

  306 Points

  293 Posts

  Re: Cascading dropdown boxes and MVC2

  Jun 12, 2010 07:41 PM|LINK

  Thanks! But Im not that handy on the Javascript/jQuery part, could you pleas point me in the right direction?

  I supose that I will have to the the dropdowns after page is loaded to see which one to hide? And when the call is made to the server I will also have to hide/show the dropdown based on amount of options? How could this look like?
  

  /SnowJim
  

  
  

• • Reply
  

  krokonoster

  Contributor

  4291 Points

  1352 Posts

  Re: Cascading dropdown boxes and MVC2

  Jun 12, 2010 08:22 PM|LINK

  I'm not too sure what you want to hide when.

  If you want to hide a dropdown(any element) when the view is rendered (aka page is loaded) you select it, and call the hide method. Like:

  $("#ModelViewAd_Category1").hide();

  Say you want to show the second dropdown, after the first changed:

  $("select#ModelViewAd_Category1").change(function () {

       $("#ModelViewAd_Category2").show();

       ... the rest that get the data from your url as you have now

  
  

  That's how much you get out of me 4:30AM watching soccer.
  

• • Reply
  

  SnowJim

  Member

  306 Points

  293 Posts

  Re: Cascading dropdown boxes and MVC2

  Jun 13, 2010 07:37 AM|LINK

  Thanks alot!

  Yes I could Hide all but the first dropdown when page is finished, BUT what if its a "POSTBACK" where the user have selected up to 3 dropdowns, then I need to hide onlye the rest of the dropdowns.

  So the best would somthing like this :

  1. When the page is finished loading(I supose I just place the script last on the page for this?) a method are runned to check all the dropdowns, if a dropdown have options then show it, else hide it.
     
     
  2. When a dropdown change is made and your function are runned the same method or a simialar should be runned to make sure that no dropdown are shown that should be hidden.
     
     
  3. The problem would if if 4 dropdown is selected then the end-usr change dropdown1, when dropdown 1 is selected all but dropdown1 and dropdown2 should be hidden/cleared.

  
  

  Do you get where I am going with this?

  
  

• • Reply
  

  krokonoster

  Contributor

  4291 Points

  1352 Posts

  Re: Cascading dropdown boxes and MVC2

  Jun 13, 2010 08:42 AM|LINK

  SnowJim

  When the page is finished loading(I supose I just place the script last on the page for this?) a method are runned to check all the dropdowns, if a dropdown have options then show it, else hide it.

  
  

  You can just put that method inside "$(function () {" which will run as soon the DOM have loaded.  No matter where you put the script on the page.

  SnowJim

  When a dropdown change is made and your function are runned the same method or a simialar should be runned to make sure that no dropdown are shown that should be hidden.

  
  

  Hmmm.....Do you know in advance how many dd's you will have?  Basically your logic is if dd1 change, load data to dd2 and hide dd3, dd4 and so on....
  

  SnowJim

  The problem would if if 4 dropdown is selected then the end-usr change dropdown1, when dropdown 1 is selected all but dropdown1 and dropdown2 should be hidden/cleared.

  
  

  Can you try figure out something that clear, say dd3 and dd4 when dd1 changes (which will also be loading the data for dd2)?

  You can just call that clearSelect function I got in common.js on each of those you want cleared.  And .hide()

  or perphaps a new jQuery snippet that clear and hide?  LIke

  $.fn.clearSelectAndHide = function () {
      return this.each(function () {
          if (this.tagName == 'SELECT')
              this.options.length = 0;

               this.hide();
      });
  }

  (above from top of my head, did not try it)

  I'l probably update that sample to meet requirements like yours.  Will try make time (after figuring out this jquery ajax image uploader....uuurgh)
  

• • Reply
  

  SnowJim

  Member

  306 Points

  293 Posts

  Re: Cascading dropdown boxes and MVC2

  Jun 13, 2010 09:11 AM|LINK

  Thanks! I will look in to this ans see what I can accomplish.

  What are you problem with jquery ajax image uploader? I am using this one : http://blog.stevensanderson.com/2008/11/24/jquery-ajax-uploader-plugin-with-progress-bar/ and it works grate so far.
  

• • Reply
  

  krokonoster

  Contributor

  4291 Points

  1352 Posts

  Re: Cascading dropdown boxes and MVC2

  Jun 13, 2010 09:16 AM|LINK

  Haha...I got that one open here after not being all to satified with others. 
  

  
  

• • Reply
  

  SnowJim

  Member

  306 Points

  293 Posts

  Re: Cascading dropdown boxes and MVC2

  Jun 13, 2010 09:33 AM|LINK

  Grate!

  I tested this :

  $.fn.addItems = function (data) {
      return this.clearSelect().each(function () {
          if (this.tagName == 'SELECT') {
              var dropdownList = this;
              $.each(data, function (index, optionData) {
                  var option = new Option(optionData.Text,
                           optionData.Value);
                  if ($.browser.msie) {
                      dropdownList.add(option);
                  }
                  else {
                      dropdownList.add(option, null);
                  }
              });
  
  
              if (dropdownList.childElementCount < 2)
              {
                  dropdownList.hide();
              }
              else {
                  dropdownList.show();
              }
          }
      });
  }

  But show and hide do not exists on this object? I also tried :

  $this.css("visibility", "hidden");
  $this.css("visibility", "visible");

  
  But css was not a member of the dropdownList? Sorry, I am not that good on javascript but I am trying to learn with this project.
  

  
  

• • Reply
  

  krokonoster

  Contributor

  4291 Points

  1352 Posts

  Re: Cascading dropdown boxes and MVC2

  Jun 13, 2010 09:39 AM|LINK

  $this.hide(); ?

  SnowJim

  Sorry, I am not that good on javascript but I am trying to learn with this project.

  Chill...that's why we have forums in the first place! 
  

  
  

• • Reply
  

  SnowJim

  Member

  306 Points

  293 Posts

  Re: Cascading dropdown boxes and MVC2

  Jun 13, 2010 09:41 AM|LINK

  I have also tried :

  if (dropdownList.childElementCount < 2) {
                  $(this.name).hide();
              }
              else {
                  $(this.name).show();
              }

  
  And this is not throwing any exception but nothing happens, I have also tried the css this way with no progress?
  

• • Reply
  

  SnowJim

  Member

  306 Points

  293 Posts

  Re: Cascading dropdown boxes and MVC2

  Jun 13, 2010 09:45 AM|LINK

  It says $this is not define.