Style drop down menus with existing Jquery code

LZ1
LZ1 used Ask the Experts™
on
Hey Experts!!

Page in question: http://aimsmanufacturing.com/dbaxle/start.php

I want to style the 3 ajaxed/jquery select boxes in the middle of the page with the same style that's on the upper right hand corner select box.  I can't just apply the class to the box, because it comes out funky.

Suggestions?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2010

Commented:
Its me once again. :)
A little bit of analyzing and here is the solution. Add class styledselect to selectboxes You want to style like this:

<select name="year" id="year" class="styledselect">

Regards


LZ1
Top Expert 2011

Author

Commented:
I did see that, however it won't work.  Maybe it's because there's Jquery firing to populate it?  
I did apply the class, check it now.  
 
Top Expert 2010

Commented:
Ah, I knew it. :)
Think like this. That class applied tells jQuery to transform that selectbox into text type input fields with unordered list items as options. So, You put this line in document.ready section:

$('.styledselect').selectbox({ inputClass: "selectbox_styled" });

So, what happens is that first You selectbox is transformed and then Your old jquery code tries to populate it with getJSON etc. The only thing You should do is to move that line somewhere after creating and populating three selectboxes. It should be like this (be aware that there is no document.ready part now, because it wont work with it)

<script type="text/javascript">
          $('.styledselect').selectbox({ inputClass: "selectbox_styled" });
</script>

Regards
Announcing the Winners!

The results are in for the 15th Annual Expert Awards! Congratulations to the winners, and thank you to everyone who participated in the nominations. We are so grateful for the valuable contributions experts make on a daily basis. Click to read more about this year’s recipients!

LZ1
Top Expert 2011

Author

Commented:
I took your code and put it at the very bottom of the document.  Still no joy, except now I have double select boxes. lol
Take a look  http://aimsmanufacturing.com/dbaxle/start.php
Top Expert 2010

Commented:
I wasnt clear enough. Put it to the bottom and remove it from document.ready section.
Now when it works, I expect You to have one more "problem", but lets handle this one first, then we'll solve the rest, dont worry. I hope You dont mind me explaining You step by step.

Regards
LZ1
Top Expert 2011

Author

Commented:
Thank you very much for helping me through this.  I am trying very hard to learn as I go and it can sometimes be hard.  
Ok, I removed the document.ready.  I'm not sure that's what you meant though.  
I have this near the bottom of the page now.  There was the original one in the head.
<script type="text/javascript">
         $('.styledselect').selectbox({ inputClass: "selectbox_styled" });
</script>

 
LZ1
Top Expert 2011

Author

Commented:
Sorry, I meant to say I took the original one out of the head.
Top Expert 2010

Commented:
I see that You didnt remove it. This is still in Your code:

<script type="text/javascript">
$(document).ready(function() {
    $('.styledselect_pages').selectbox({ inputClass: "styledselect_pages" });
});
</script>

Remove that part on the page Im looking at so we can continue. :)

Regards
LZ1
Top Expert 2011

Author

Commented:
Better?
Top Expert 2010

Commented:
Ok, this was my bad regarding my previous comment, didnt notice that You removed what I originally told You to. So, bring this back, sorry:

<script type="text/javascript">
$(document).ready(function() {
    $('.styledselect_pages').selectbox({ inputClass: "styledselect_pages" });
});
</script>

It seems that I have to correct all the things at once, since It would obviously wont wrok step by ste, not beacuse of You, but because of selectbox style applying before first selectbox is populated.

1. Put this back to the document.ready section:

$('.styledselect').selectbox({ inputClass: "selectbox_styled" });

2. Remove class="styledselect" from all Your three dependent select boxes.

3. Change Your get JSON part at the bottom with the code Im posting now.

Tell me what are the results now.

Regards


<script language="javascript">  
        $(document).ready(function() {  
                  
                $.getJSON("getYears.php", function(data) {  
                        $("#constructor").html("");  
                        $.map(data, function(e, i) {  
                                $("#year").append("<option value='" + e.value + "' >" + e.text + "</option>").attr("disabled",false);  
                        });
			$("#year").selectbox({ inputClass: "selectbox_styled" });
                });  
                  
                $("#year").change(function() {  
                        $.getJSON("getConstructors.php", {"yearID":$(this).val()}, function(data) {  
                                $("#constructor").html("");  
                                $("#model").html("");  
                                $.map(data, function(e, i) {  
                                        $("#constructor").append("<option value='" + e.value + "' >" + e.text + "</option>").attr("disabled",false);  
                                });  
                        });
			$("#constructor").selectbox({ inputClass: "selectbox_styled" });
                });  
  
                $("#constructor").change(function() {  
                        $.getJSON("getModels.php", {"constructorID":$(this).val()}, function(data) {  
                                $("#model").html("");  
                                $.map(data, function(e, i) {  
                                        $("#model").append("<option value='" + e.value + "' >" + e.text + "</option>").attr("disabled",false);  
                                });  
                        });  
			$("#model").selectbox({ inputClass: "selectbox_styled" });
                });  
        });  
</script>

Open in new window

LZ1
Top Expert 2011

Author

Commented:
By chance, we're you using an old piece of my code?  No big deal, but I thought I would ask before I pasted it??
Top Expert 2010

Commented:
I took it form Your current page, from the source. Did You make all changes like I told You?

Regards
LZ1
Top Expert 2011

Author

Commented:
I did.  However, their not working like they were.  
I think I may have had an old piece of code.  No worries, I have the newer piece on another machine.  I'll just have to update it in the morning.  
So basically your just adding the class via Jquery after the original Jquery fires?
Top Expert 2010

Commented:
Yup. The reason it wont work is still the same, styleselect is being applied before selectbox is populated *some time is needed to do AJAX request and thas the time when styleselect was already applied. So, to overcome this, You just take Your original code, before asking this question, and apply only those changes that I wrote four posts above (only the <script>...</script> part - Your getJSON block)

It should work, I dont see any reason it wont.

Regards
LZ1
Top Expert 2011

Author

Commented:
So I take this part:
<script type="text/javascript">
$(document).ready(function() {
   $('.styledselect_pages').selectbox({ inputClass: "styledselect_pages" });
});
</script>

and put it into the getJSON block??
Top Expert 2010

Commented:
No, no no.  :)
Start with Your page like it was when You started this question, before any changes that I suggested and put this as Your getJSON part of the code at the bottom. I assume Your getJSON part for all three dependent select boxes is correct. If You need any further explanation feel free to ask. You're so close to the solution believe me and Id rather have a situation where You understood how this works then receiving any points. :)

Regards



<script language="javascript">  
        $(document).ready(function() {  
                  
                $.getJSON("getYears.php", function(data) {  
                        $("#constructor").html("");  
                        $.map(data, function(e, i) {  
                                $("#year").append("<option value='" + e.value + "' >" + e.text + "</option>").attr("disabled",false);  
                        });
                        $("#year").selectbox({ inputClass: "selectbox_styled" });
                });  
                  
                $("#year").change(function() {  
                        $.getJSON("getConstructors.php", {"yearID":$(this).val()}, function(data) {  
                                $("#constructor").html("");  
                                $("#model").html("");  
                                $.map(data, function(e, i) {  
                                        $("#constructor").append("<option value='" + e.value + "' >" + e.text + "</option>").attr("disabled",false);  
                                });  
                        });
                        $("#constructor").selectbox({ inputClass: "selectbox_styled" });
                });  
  
                $("#constructor").change(function() {  
                        $.getJSON("getModels.php", {"constructorID":$(this).val()}, function(data) {  
                                $("#model").html("");  
                                $.map(data, function(e, i) {  
                                        $("#model").append("<option value='" + e.value + "' >" + e.text + "</option>").attr("disabled",false);  
                                });  
                        });  
                        $("#model").selectbox({ inputClass: "selectbox_styled" });
                });  
        });  
</script>

Open in new window

LZ1
Top Expert 2011

Author

Commented:
Thanks R-byter.  I will have to do it in the morning.  I will post as soon as things are up and running.
Thank you so very much for everything!!  I really appreciate it.
Top Expert 2010

Commented:
So I will have to check it in the morning too. :)

Regards
LZ1
Top Expert 2011

Author

Commented:
Ok, so here is the final code that I thought should work.  

Still no joy.  The first one works, but doesn't carry over to the 2nd one.  

<script language="javascript">  
        $(document).ready(function() {  
                  
                $.getJSON("getYears.php", function(data) {  
                        $("#make").html("");  
                        $.map(data, function(e, i) {  
                                $("#year").append("<option value='" + e.value + "' >" + e.text + "</option>").attr("disabled",false);  
                        });  
						 $("#year").selectbox({ inputClass: "selectbox_styled" });
                });  
                  
                $("#year").change(function() {  
                        $.getJSON("getMakes.php", {"yearID":$(this).val()}, function(data) {  
                                $("#make").html("");  
                                $("#model").html("");  
                                $.map(data, function(e, i) {  
                                        $("#make").append("<option value='" + e.value + "' >" + e.text + "</option>").attr("disabled",false);  
                                });  
								 $("#make").selectbox({ inputClass: "selectbox_styled" });

                        });  
                });  
  
				$("#make").change(function() {  
                       $.getJSON("getModels.php", {"model_id":$(this).val(), "yearID":$("#year").val()}, function(data) {  
                               $("#model").html("");  
                               $.map(data, function(e, i) {  
                                       $("#model").append("<option value='" + e.value + "' >" + e.text + "</option>").attr("disabled",false);  
                               });  
							    $("#model").selectbox({ inputClass: "selectbox_styled" });
                       });  
               });
//This is the closing bracket
        });  
</script>  

Open in new window

Top Expert 2010

Commented:
What year selected should bring the results?

Regards
LZ1
Top Expert 2011

Author

Commented:
Anything after 1985
Top Expert 2010

Commented:
I was tired to spot this. :)
Since jquery transforms regular selectbox into text type input field with unordered list items as options, we should bind change event to this new field. Therefore, Your final getJSON part should look like this.

Regards

<script language="javascript">  
        $(document).ready(function() {  
                  
                $.getJSON("getYears.php", function(data) {  
                        $("#make").html("");  
                        $.map(data, function(e, i) {  
                                $("#year").append("<option value='" + e.value + "' >" + e.text + "</option>").attr("disabled",false);  
                        });  
						 $("#year").selectbox({ inputClass: "selectbox_styled" });
                });  
                  
                $("#year_input").change(function() {  
                        $.getJSON("getMakes.php", {"yearID":$(this).val()}, function(data) {  
                                $("#make").html("");  
                                $("#model").html("");  
                                $.map(data, function(e, i) {  
                                        $("#make").append("<option value='" + e.value + "' >" + e.text + "</option>").attr("disabled",false);  
                                });  
								 $("#make").selectbox({ inputClass: "selectbox_styled" });

                        });  
                });  
  
				$("#make_input").change(function() {  
                       $.getJSON("getModels.php", {"model_id":$(this).val(), "yearID":$("#year").val()}, function(data) {  
                               $("#model").html("");  
                               $.map(data, function(e, i) {  
                                       $("#model").append("<option value='" + e.value + "' >" + e.text + "</option>").attr("disabled",false);  
                               });  
							    $("#model").selectbox({ inputClass: "selectbox_styled" });
                       });  
               });
//This is the closing bracket
        });  
</script>

Open in new window

LZ1
Top Expert 2011

Author

Commented:
Still nothing.  Did I need to remove the original stuff from the head again?
Top Expert 2010

Commented:
Nope. One more thing that needs to be done. :)
Since this styled selectbox is created after You load Your page, it doesnt fire up change event on newly created element. So, to be able to use it we need to use live from jQuery.

Regards

<script language="javascript">  
        $(document).ready(function() {  
                  
                $.getJSON("getYears.php", function(data) {  
                        $("#make").html("");  
                        $.map(data, function(e, i) {  
                                $("#year").append("<option value='" + e.value + "' >" + e.text + "</option>").attr("disabled",false);  
                        });  
                                                 $("#year").selectbox({ inputClass: "selectbox_styled" });
                });  
                  
                $("#year_input").live('change', function(event) {  
                        $.getJSON("getMakes.php", {"yearID":$(this).val()}, function(data) {  
                                $("#make").html("");  
                                $("#model").html("");  
                                $.map(data, function(e, i) {  
                                        $("#make").append("<option value='" + e.value + "' >" + e.text + "</option>").attr("disabled",false);  
                                });  
                                                                 $("#make").selectbox({ inputClass: "selectbox_styled" });

                        });  
                });  
  
                                $("#make_input").live('change', function(event) {  
                       $.getJSON("getModels.php", {"model_id":$(this).val(), "yearID":$("#year").val()}, function(data) {  
                               $("#model").html("");  
                               $.map(data, function(e, i) {  
                                       $("#model").append("<option value='" + e.value + "' >" + e.text + "</option>").attr("disabled",false);  
                               });  
                                                            $("#model").selectbox({ inputClass: "selectbox_styled" });
                       });  
               });
//This is the closing bracket
        });  
</script>

Open in new window

LZ1
Top Expert 2011

Author

Commented:
Still nothing.
Top Expert 2010

Commented:
Ill look into it, will get back to You very soon.

Regards
LZ1
Top Expert 2011

Author

Commented:
Thank you very much for all your help! I know how this stuff can be frustrating. :)
Top Expert 2010

Commented:
Huh, I found out some interesting stuff. As I see, You are using jQuery selectbox plugin for styling. However, it have a bug that breaks change event.
Keep changes that i posted in my previous comment and You need to change Your jquery.selectbox-0.5.js file. You should find function called setCurrent and replace it.

This:


    function setCurrent() {    
        var li = $("li."+opt.currentClass, $container).get(0);
        var ar = (''+li.id).split('_');
        var el = ar[ar.length-1];
        $select.val(el);
        $input.val($(li).html());
        return true;
    }

Should become this:

function setCurrent() {  
        var li = $("li."+opt.currentClass, $container).get(0);
        var ar = (''+li.id).split('_');
        var el = ar[ar.length-1];

        if($select.val() != el) {
            if (opt.debug) console.log('trigger change : '+ $select.attr('id') + ' changed from ' + $select.val() + ' to ' + el);
            $select.val(el);
            $select.trigger('change');          
        }
       
        $input.val($(li).html());
        return true;
    }

As I found out here:

http://plugins.jquery.com/content/fixing-slectboxs-onchange-event

Tell me if it works now and please apply changes on Your link so I can see if it doesnt work. We'll fix this.

Regards
LZ1
Top Expert 2011

Author

Commented:
I've applied the changes to both files.  Still didn't work.  I can't believe this isn't working.  It seems like it would be something so simple.  

No offense to you R-Byter, as you've been terrific in all of my questions.  :)
Top Expert 2010

Commented:
I think I know the reason why this doesnt work now. I noticed that you have various versions of jquery.selectbox js files referenced in Your code. You changed that function in the file as I asked You to do, but right after, You are defining the smae function (like th eold one) in jquery.selectbox-0.5_style_2.js file. So either You change it in all jquery.selectbox js files or keep only one in jquery.selectbox-0.5.js and delete setCurrent functions in jquery.selectbox-0.5_style_2.js.

Regards
LZ1
Top Expert 2011

Author

Commented:
I changed it in the other files now, still nothing.  

I know this has taken a lot of your time, so if we want to call it and possibly open a new question I'm more than happy to do so.
Top Expert 2010
Commented:
There is no need for new question for this. I enjoy solving this puzzle. :)
A little more patience and will come up with something. Stay tuned.
You may think Im asking You to do so much, but here is another thing.

You removed completely reference to Your  jquery.selectbox-0.5_style_2.js file and some document.ready part right below it. Bring back taht document.ready part that You removed. Thats one thing. The other could be to try to replace ids #year_input to #year and #make_input to #make in getJSON part so Your two new lines there shoud look like this:

$("#year").live('change', function(event) {

and

$("#make").live('change', function(event) {

Regards
LZ1
Top Expert 2011

Author

Commented:
Beautiful!  Thanks again so much R-Byter!!  Your the best!!
Top Expert 2010

Commented:
It was my pleasure. Until next time.

Regards

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial