Simple answer:
The jQuery library my code base was using was out of date.
If yours is up to date try the following:
-
Step though the unminified version of jQuery to see if the issue is inside the library (which 9 times out of 10 it probably will not be)
-
When all else fails, just write a pure javascript solution.
Sometimes when I am writing a “class” in javscript with jQuery, jQuery will just not function as it should. For example today I was doing the following on an input select:
$(this).val(newValue);
This was working in jFiddle just fine, but not working in my project (both had 0 script errors). I tried to isolate the code as much as possible, but to no avail I could not get it to work.
The “solution” for this was to just write straight up javascript to set the value and it worked just fine.
I am not a jQuery master, but this is not the first time I had to write a straight javascript solution when jQuery “failed.” Do any jQuery masters out there know why something like this might happen? Is there a method of debugging jQuery I am not aware of? Does anyone else run into these types of problems with jQuery? If so, do you have a solution?
Update(s):
Aug 25, 2011
I downloaded the most recent version of the jQuery library and stepped through it only to find that the bug was probably resolved between jQuery 1.4.4 and 1.6.2. I didn’t realize the person who handles most of the javascript wasn’t keeping the jQuery library up to date. After stepping through the jQuery 1.4.4 library it seems that jQuery was not able to find my selector for some reason and therefore was never setting the value. This problem has been resolved in 1.6.2….
Lesson of the week… keep your jQuery library up to date and verify your senior developer’s statements when things aren’t matching up.
–
I chose the answer I did because it was the only one which really helped me diagnose the source of the problem. While stepping through the unminified version of jQuery is such a simple solution, I actually should have done that before posting this question. I will post my findings as to why it didn’t work later.
Aug 24, 2011
I agree with the user Sohnee that having a duplicate ‘name’ isn’t bad practice and in some places you actually need it.
I feel rather stupid because the posted code has been wrong for almost a week now. I have updated the code. I moved the init function to the public scope.
Aug 22, 2011
While I am partially satisfied that the core of the problem is with duplicate names, I need to know why are duplicate names bad?
I know when dealing with inputs/css/etc you usually except IDs to be unique and classes to represent groups. I didn’t think there were any rules about names, but if someone can explain to me why having duplicate names is bad practice, I will consider that the answer to this problem.
Aug 16, 2011
As for the current answers, I don’t think it is a conflict. jQuery is working just fine. The binds are triggering causing the functions to be called in both implementations.
The problem line is
$(overrideSelector).each(
function(){
$(this).val(newVal);
}
);
For example, if I console out newVal in the .each() it will have a value of lets say ‘A’.
Then if I console log out $(this).val() it will be ‘B’. Then $(this).val(newVal); is run. After that if I do a console log of $(this).val() it will still be ‘B’.
In the comments someone mentioned that I might be using the word this wrong. Both of these returned 0 javascript errors on Chrome’s console. I will give the following code snippet was what was having problems. I will write the original and then what I replaced it with javascript.
I am aware the name is the same, but that is ok. The page I am working on is a huge form and the cloned select is just to make the user not have to scroll back to another part of the form.
HTML:
<div id='overrideHolder'>
</div>
<select name='mySelect'>
<option value='A'>A</option>
<option value='B'>B</option>
</select>
jQuery (this does not work):
var someClass = (function(){
var overrideSelector = '[name="mySelect"]';
...
return{
init : function(){
$(overrideSelector).clone().appendTo('#overrideHolder');
$(overrideSelector).each(
function(){
$(this).bind(
'change',
{},
function(){
someClass.overrideTryAgain(this);
}
);
}
);
}
overrideTryAgain : function(element){
var newVal = $(element).val();
$(overrideSelector).each(
function(){
$(this).val(newVal);
}
);
...
},
...
}
})();
$(document).ready(function(){
someClass.init();
}
Javascript (this works):
var someClass : (function(){
var overrideSelector = '[name="mySelect"]';
...
return{
init : function(){
$(overrideSelector).clone().appendTo('#overrideHolder');
$(overrideSelector).each(
function(){
$(this).bind(
'change',
{},
function(){
someClass.overrideTryAgain(this);
}
);
}
);
}
overrideTryAgain : function(element){
// NOTE: Using javascript instead of jQuery because jQuery was not duplicating the selected value properly
var newValue = $(element).get(0);
newValue = newValue.selectedIndex;
$(overrideSelector).each(
function(){
var currentSelect = $(this).get(0);
currentSelect.options[newValue].selected = true;
}
);
...
},
...
}
})();
...
$(document).ready(function(){
someClass.init();
}
I tried to reproduce the problem from your code, and like others could not do so. So it seems like there’s something external that is interfering: a conflict, something with the markup, but generally something that’s not obvious.
This sounds like a job for source-code stepping. Run this against the non-minified jQuery and trace the offending line with a debugger such as the built-in Chrome debugger or Firebug to see what’s happening inside jQuery. This should reveal what’s going wrong, be it a jQuery bug or something in your own code/markup that you didn’t see before.