JQuery cannot change the value, which can be JS, because the library is deprecated

Question

Simple answer:

The jQuery library used by my code base is deprecated.

If you are out of date, try the following:

• A step, despite an unknown version of jQuery, to find out if the problem is inside the library (which is 9 times out of 10 probably won't)

• When all else fails, just write a clean javascript solution.

---

Sometimes, when I write a “class” in javscript with jQuery, jQuery simply will not function properly. For example, today I did the following when selecting input:

$(this).val(newValue);

This worked in jFiddle just fine, but did not work 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 simply write straight up javascript to set the value, and it worked fine.

I am not a jQuery master, but this is not the first time I have had to write a direct javascript solution when jQuery "failed". Do any jQuery wizards know why something like this could happen? Is there a jQuery debugging method that I don't know about? Does anyone else encounter these issues in jQuery? If so, do you have a solution?

---

Update (s):

August 25, 2011

I downloaded the latest version of jQuery library and went through it only to find that the error was probably resolved between jQuery 1.4.4 and 1.6.2. I did not understand that the person who processes most of javascript is not updating the jQuery library. After navigating through the jQuery 1.4.4 library, it seems like for some reason jQuery could not find my selector and therefore never set the value. This problem was resolved in 1.6.2 ....

Lesson of the week ... update your jQuery library and check your senior developer statements when things don't match.

-

I chose the answer I made because it was the only one that really helped me diagnose the source of the problem. Although upgrading to an unminified version of jQuery is a simple solution, I had to do this before posting this question. I will post my findings on why this did not work later.

---

August 24, 2011

I agree with Sohnee user that having a duplicate "name" is not a bad practice, and in some places you really need it.

I feel pretty stupid because the published code was wrong for almost a week. I updated the code. I moved the init function to the public domain.

---

August 22, 2011

Although I'm partially satisfied that the core of the problem is with duplicate names, I need to know why duplicate names are bad?

I know that when dealing with the inputs / css / etc, you usually exclude identifiers to be unique, and classes to represent groups. I did not think that there were any rules regarding names , but if someone can explain to me why having duplicate names is bad practice, I will consider the answer to this problem.

---

August 16, 2011

Regarding the current answers, I don't think this is a conflict. jQuery works fine. Couplings start by calling functions called in both implementations.

Problem line

 $(overrideSelector).each( function(){ $(this).val(newVal); } ); 

For example, if I console newVal in .each (), it will have the value let say 'A'.
Then if I remove the console $(this).val() , it will be "B". Then $(this).val(newVal); . After that, if I do the console log $(this).val() , it will still be "B".

In the comments, someone said that I may use the word this incorrectly. Both of them returned 0 javascript errors on the Chrome console. I will give the following code snippet, which is why problems arose. I will write the original, and then that I replaced it with javascript.

I know that this is one and the same, but that’s normal. The page I'm working on is a huge form, and the cloned selection is just to make the user not go 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 ( not working):

 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(); } 

Answer 1

I tried to reproduce the problem from your code and, like others, could not do it. Thus, it seems that there is something external that interferes: a conflict, something with markup, but usually something that is not obvious.

This is similar to a job for stepping source code. Run this against non-minified jQuery and trace the breach line with a debugger such as the built-in Chrome or Firebug debugger to see what happens inside jQuery. This should show what is going wrong, be it a jQuery bug or something in your own code / markup that you have not seen before.

Answer 2

You must make sure that you select the correct item. For this you can use Chrome console.log to see which DOM node you are trying to set the value.

Duplicated names in HTML are bad for some reason. When the form is submitted to the server, the input elements inside it are sent, sending values ​​through the object whose keys are the DOM names. If you have duplicate names, the object will not bind values ​​using unique keys. You can have the same name in different forms, which is allowed.

You can check the specifications for html form controls (w3.org) , to get more information about Control Names and for the flags .

Note for WebForms application: the whole page is a form, do not use the same names ever ...

Answer 3

First of all, make sure the jquery library is enabled. then try using a jQuery object instead of $ , some libraries use $ in their code. also take a look at the jQuery.noConflict() method:

http://api.jquery.com/jQuery.noConflict/

Answer 4

If the goal is simply to clone and “synchronize” values ​​between choices, your decision seems too complicated for what it is. First of all, you probably don't need all the loops, since $ (overrideSelector) will do this automatically. Anyway, this is a simplified version of your code (if I missed the goal of what your code should do, let me know)

 var someClass = new function() { var overrideSelector = '[name="mySelect"]'; this.init = function() { $(overrideSelector).clone().appendTo('#overrideHolder'); $(overrideSelector).live("change", function() { $(overrideSelector).val($(this).val()) }) } } $(document).ready( function() { someClass.init(); }) 

Answer 5

regarding updating, it always seems to me harder:

 $(overrideSelector).each( function(i, element){ $(element).val(newVal); } ); 

Answer 6

I considered this problem, and I could not get it to work with your code, but I tried to implement it myself ...

Will this work for you?

 <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> </head> <body> <div id='overrideHolder'> </div> <select name='mySelect'> <option value='A'>A</option> <option value='B'>B</option> </select> <input id="addSelect" type="button" value="Add select" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> (function ($) { var _constants = { selector: 'select[name="mySelect"]' }; var _methods = { init: function () { var $select = $(_constants.selector).live('change', function (e) { var $this = $(this); var val = $(this).val(); $(_constants.selector).not($this).val(val); }); _methods.cloneSelect($select); $('#addSelect').click(function (e) { _methods.cloneSelect($(_constants.selector).eq(0)); }); }, cloneSelect: function ($select) { $select.clone().appendTo('#overrideHolder'); } }; //shorthand for $(document).ready $(function () { _methods.init(); }); })(jQuery); </script> </body> </html> 

Answer 7

At a deeper level, something is wrong.

• You cannot just clone a selection, you should not have two elements with the same name
• Treat the original and the clone separately, you do not need to listen to the changes on the original or reset the value on the copy
• Drop calls .each, jQuery already does this internally for you
• $ (element) .get (0) ===. You put it and then take it out.

However, you can try something at the suggestion of Michal:

 var mySelect = $(overrideSelector) var mySelectClone = mySelect.clone().appendTo('#holder') mySelectClone.bind('change', function(){ addressValidation.overrideTryAgain(this) }) ... overrideTryAgain : function(element){ var newVal = $(element).val() mySelect.val(newVal) } 

Also did you compare the outputs of the two versions?

 overrideTryAgain : function(element){ var newVal = $(element).val() var newVal2 = element.options[element.selectedIndex].value console.log("jQuery: "+ newVal) console.log("DOM: "+ newVal2) $(overrideSelector).val(newVal); ... }, 

And if your parameter values ​​include empty lines or other falsity values ​​("0", etc.), you end up in a bag of pain.

Answer 8

I have seen that repeated named form elements cause problems, so I will try to fix them.

In this case, I would also recommend being very careful with the val() method. It looks great in your code, but it's easy to look at some code that is expecting something, forgetting that val() returns the value of the first matching element (in the DOM).

I tried to duplicate your problem, but could not. You can make several simplifications that may reveal the problem:

• use change instead of bind('change',{}
• exclude each calls

• pass newVal to your overrideTryAgain method - instead of the element. The item is not needed and this will simplify validation / debugging.

    var selector = "[name=mySelect]"; var holder = "#overrideHolder"; ... $(selector).clone().appendTo(holder); ... $(selector).change(function () { overrideTryAgain($(this).val()); }); var overrideTryAgain = function (newVal) { $(selector).val(newVal); } 

Answer 9

Is it wrong to have a duplicate "name" in different HTML input tags? NO . If so, the radio books will suck.

jQuery cannot change value where JS can NOT

Your problem lies outside the code that you provided . JQuery have no problems in fulfilling your needs, and it is practically impossible to deduce the point without completely code - it works fine.

This statement is confirmed by the following script http://jsfiddle.net/EeQEN/ , which simply simplifies the code provided.

 var overrideSelector = '[name="mySelect"]'; var overrideTryAgain = function(element) { var newVal = $(element).val(); $(overrideSelector).each(function() { $(this).val(newVal); }); }; $(overrideSelector).clone().appendTo('#overrideHolder'); $(overrideSelector).each(function() { $(this).bind('change', {}, function() { overrideTryAgain(this); }); }); 

I tried all the latest versions of jQuery, and if this is not an error with a specific browser (which you did not specify), then I suspect that the problem is related to the scope leek variable.

If you are not sure, please provide a functional example of the problem, and I am sure that the exact problem can be determined.

Recommendation for future reference, do not require a DOM; cache all selected elements and never apply events through a loop through elements - use a delegate and allow events to bubble up, not only improve performance, it will also make your code more convenient for maintenance.

Answer 10

In fact, it is true that many form elements have the same name attribute, in fact, this is how some form elements are designed to work, for example, radio buttons. This is also how some server languages ​​are designed to work, for example, the array style name in php name="country[]"

Good practice has duplicate names - you just need to know that you are not dealing with a unique element when you receive an element by name. In fact, document.getElementsByName("sharedName") returns an array of results, even if you only have one element with the given name.

So, this is not a question of the fact that this is bad practice, but a question of whether your code (or the code contained in the structure used) understands this non-uniqueness.

Answer 11

I think you can implement the jQuery class .

I put the classes you used in jsfiddle and even then it had a lot of problems. Parentheses are not closed everywhere, and then you tried to define methods inside a function when they are not related to each other.

 var someClass = function(){ ... })(); 

There are not enough brackets to the left of the function and try pasting jQuery in the final parentheses.

 var someClass = (function(){ ... })(jQuery); 

Along with this, I don’t think you can define normal “methods”

 init : function(){ overrideTryAgain : function(element){ 

Just like inside this parent function.