Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

After installed Wordpress 3.1, a jquery plugin selectbox i'm using not work 100 percent any more

I use this plugin in wordpress backend to replace my <select></select> with custom html codes on which i can apply css, but with wordpress 3.1, a lot of <select> don't get replaced 100%, <option> are missing in the replaced codes, for example

<select>
  <option (some attributes...)>text</option>
  <option (some attributes...)>text</option>
</select>

is supposed to be replaced with (actually not replace, the original <select> will be hide)

<div class="jquery-selectbox">
<div class="jquery-selectbox-moreButton"></div>
<div class="jquery-selectbox-list jquery-custom-selectboxes-replaced-list">
  <span>text</span> /* option 1 */
  <span>text</span> /* option 2 */
</div>
<span class="jquery-selectbox-currentItem">text of selected option</span>
</div>

while actual result is

<div class="jquery-selectbox">
<div class="jquery-selectbox-moreButton"></div>
<div class="jquery-selectbox-list jquery-custom-selectboxes-replaced-list">
  /* nothing here */
</div>
<span class="jquery-selectbox-currentItem">nothing here</span>
</div>

weird thing is there are still quite a few <select> do get 100% replaced.

i tried rollbacked to wordpress 3.0 and reinstall wordpress 3.1 twice, the script works perfectly once rollback to 3.0 and as long as 3.1 is intalled, the issue occurs.

there are no wp plugins in my test site and the jquery library is loaded completely first, my other scripts all works well. Seached a lot and no luck, but i found where the issue happens, have no idea why it goes that way though.

return this.each(function() { // for each <select>
    var _this = jQuery(this);
        ... // I added an alert here, alert(_this.attr('id')), to print <select> id, and all <select> id are catched
        jQuery('option', _this).each(function(k,v){
            ... // I added a same alert at first line this function, only replaced 100% <select> id are catched
        }); 
        ...
    });

this is the plugin codes do replacement, for all not get 100% replaced <select>, the line i commented above doesn't get implemented, looks like just be jumped.

Any ideas?


[Update] I removed all other scripts and the plugin, here is the only codes left in my script

jQuery(document).ready(function() {
  jQuery('#myadmin select').each(function() {
      jQuery(this).find('option').addClass('huh?');
  });
 });

All options in those were not replaced 100% <select> do not get the class 'huh?'


[Update 2] I changed the script in Update 1 to

jQuery(document).ready(function() {
  jQuery('select option').addClass('huh?');
 });

Guess what? All <option> got this class 'huh?'. It turns out like something about jQuery, but why WP 3.1?


[Resolved]

WP 3.1 upgrade jQuery version to 1.4.4, i deregistered it and bring back jQuery 1.4.2 on my page, everything is ok now, all <select> get replaced 100%

last question is how do i mark this question as resolved?

share|improve this question
1  
you left out the most important part of the code. paste it in full –  Bainternet Feb 27 '11 at 15:19
    
do you mean codes inside the function(k,v)? i added an alert at the first line of this function, and it doesn't get implemented for all problem <select> –  Edward Feb 27 '11 at 15:23
    
Just a thought...IF WP3.1 updates some select box contents via AJAX, your function would probably be bypassed unless you hook it via jQuery's life call or whatever that is called. That would at least be an explanation. Try to alert the innerHTML of the <select> element at the beginning of your function to see if options are in there before it even gets to them. –  wyrfel Feb 27 '11 at 20:05
    
That was a bit weird itself...i guess what i'm trying to say is that you probably need to hook your function in jQuery in a way that either runs it again and again when elements get inserted on the page, or after everything else has run...if the diagnosis is true, that is. –  wyrfel Feb 27 '11 at 20:38
    
@wyrfel, i ever used alert to print _this.html(), and <option> are all there. I guess its all about the results of jQuery('option', _this), is empty. See my update. –  Edward Feb 28 '11 at 5:04

1 Answer 1

Fount this:

As for an answer to your question, nested eaches don't work in jQuery if you use the this variable. To fix your problem, try using the full style of each.

in an answer here.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.