jQuery update doesnt work but javascript does

Question

I've been trying different methods of getting my page to update one input value when I select something from another. When I try it one way using javascript it works fine, another way via jQuery it doesn't and I honestly don't understand why, could someone point out what I'm missing?

This Javascript works fine: -

function youPickedThis(id, num){
    var objID = "any[" + num + "].id"
    document.getElementById(objID).value = id
}

But this jQuery doesn't: -

function youPickedThis(id, num){
    var objID = "any[" + num + "].id"       
    $("#"+objID).val(id);
}

The objects on the being used/references are all loaded in during the page load via AJAX calls etc, is this something to do with what's causing the issue?

Thanks for any pointers, if anyone has any good links to read explaining this stuff better I'd be very appreciative! :)

Also tried this but still no dice...

$(document).ready(function(){

                function updateHiddenInput(id, num){
                    var objID = "any[" + num + "].id";
                    $("#"+objID).val(id);
                }

            });     

Answer 1

There's a difference between a jQuery selector and document.getElementById. The second does less, so it knows that whatever you give it will be looked at as an id. For example:

var objID = "any[" + num + "].id"       
$("#"+objID).val(id);

What will this look for? Let's presume num is 1, say:

$('#any[1].id').val(id);

This looks for an element with the id #any, an attribute 1, and a class id, because the characters []. all have special meanings in a selector. To demonstrate this, run the following line of code in the browser console:

$('<div id="any" class="id" 1="foo"/>').is('#any[1].id') // returns true

The best way to do this selection is to do the selection with document.getElementById, and then wrap it in the jQuery constructor:

$(document.getElementById(objID)).val(id);

It is possible to escape the special characters with \\, but it becomes increasingly unwieldy and hard to (a) write and (b) read.

Answer 2

You have this:

function youPickedThis(id, num){
    var objID = "any[" + num + "].id"       
    $("#"+objID).val(id);
}

This results in objID having some value like any[3].id, so your jQuery looks like this: $("#any[3].id").val(id); jQuery interprets the .id as a class. Escape it like this:

function youPickedThis(id, num){
    var objID = "any\\[" + num + "\\]\\.id"       
    $("#"+objID).val(id);
}

Answer 3

You should escape square brackect and dot

  var objID = "any\\[" + num + "\\]\\.id";

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \. For example, an element with id="foo.bar", can use the selector $("#foo\.bar").

REFERENCE

http://forum.jquery.com/topic/jquery-jquery-wont-recognise-attribute-names-containing-square-brackets#14737000000283511

Answer 4

As others have mentioned, there are differences between jQuery selector and document.getElementById. As jQuery selector has to parse the string and some characters like [,] have special meaning while document.getElementById treats all this as part of an id. You could try escaping those special characters as mentioned by others. Here I give another solution.

You could try id attribute selector. It does something similar to document.getElementById

function youPickedThis(id, num){
    var objID = "'any[" + num + "].id'"       
    $("[id="+objID+"]").val(id);
}

DEMO