Style drop down menus with existing Jquery code

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

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.  
 

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

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

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

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>

 

Sorry, I meant to say I took the original one out of the head.

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

Better?

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>

Select allOpen in new window

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

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

Regards

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?

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

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

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>

Select allOpen in new window

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.

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

Regards

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>  

Select allOpen in new window

What year selected should bring the results?

Regards

Anything after 1985

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>

Select allOpen in new window

Still nothing.  Did I need to remove the original stuff from the head again?

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>

Select allOpen in new window

Still nothing.

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

Regards

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

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

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.  :)

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

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.

Beautiful!  Thanks again so much R-Byter!!  Your the best!!

It was my pleasure. Until next time.

Regards