Develop Reference

Jquery get element by id, multidimensional array

I'm trying to get the value of a specific html input that is named like:
<input type="hidden" value="." id="grid[0][0]">
where [0][0] could be any value within a foreach loop.
using Jquery:
var currVal = $('#grid['+x+']['+y+']').html();
I'm getting an undefined value. Not sure whether it's a syntax problem. I haven't found a similar example so I'd appreciate any help on this. Thanks!

It actually is a syntax problem. jQuery interprets "#grid[...]" as an HTML element with the ID "grid" and some attribute (or other meta stuff) just like CSS would.
To solve simply escape the [ and ], like this:
$('#grid\\[' + x + '\\]\\[' + y + '\\]').val()
That should do it :)
Edit: As noted by Josh Crozier, the html() method is supposed to be used in normal tags (like div). For input, select or textarea you should use val() -- Docs on that: http://api.jquery.com/val/

You can also do :
var currVal = $('input[id="grid['+x+']['+y+']"]').val();

spaces in ID and putting variable in ID jquery

I want to put spaces in id and also i want to select an id using variable.
The id i want to achieve is something like this
<span id="printroofG.I. Sheet" class="underline"></span>
Lets say i have this variable.
var id = G.I. Sheet;
and this is my selector
$('span[id=printroof'+value.material+']').text(value.material);
I get unrecognized expression: span[id=printroofG.I. Sheet].
What is the proper way to have spaces in ID and use variable as selector.

As I said earlier, do not use an ID for this purpose. You'd be better of using data-* as below.
var id = "G.I. Sheet";
$('span[data-id="printroof' + id + '"]').text("Some text");
//OR
$('span[data-id="printroof' + value.material + '"]').text(value.material);
A Demo
HTML:
<span data-id="printroofG.I. Sheet" class="underline"></span>

If you absolutely have to do this use double quotes:
$('span[id="printroof'+value.material+'"]').text(value.material);
But don't do it. As lshettyl suggested perhaps it is better to use the jquery data api for this.

Autofocusing on a newly added element via javascript

This should be simple but I can't get it to work so would appreciate any pointers.
I have a function in my webpage that adds a new line into a table with inputs etc. This is a pretty basic POST that looks something like this...
$.post(url, {
newRow : newRow
}, function(data) {
$('#' + tableName + ' > tbody > tr').eq(rowLoc).before(data);
}).done(function() {
reNumberTableIDName($tb)
});
The reNumberTableIDName function is pretty straightforward, it runs through all the objects in the table and changes their id/name so that they are in order relevant to the row they are in the table for other reasons.
Now, one of the elements added in to this table is an auto complete input which looks like so...
<input id="autoLook[9]" class="required yui-ac-input" type="text" title="" value="" name="autoLook[9].id" style="width:500px" autocomplete="off" required="required">
Note that the name and ID are not altered as part of the reNumberTableIDName function.
I tried adding in a line to the "done"portion of the post to then put the focus/carat into that new input but it doesn't work (focus stays on the button previously clicked to add the row).
$("#autoLook[" + (newRow -1) + "]").focus();
I've checked with an alert that "#autoLook[" + (newRow -1) + "]" does indeed come up with the right string so I'm at a loss as to why this doesn't work. What obvious litle gotcha am I missing?
Its also worth noting that I tried to add in a autofocus property to the input being added, but I'm working in grails and this type of auto complete doesn't allow me to do this.
Thanks!
Worth noting that the solution should be to use setTimeout as mentioned below else it will continually put focus back to the object!

The selector #autoLook[9] matches an element with the id autoLook and the attribute 9; which is obviously wrong. Add backslashes around the square brackets to escape them:
$("#autoLook\\[" + (newRow - 1) + "\\]").focus();
Quote from jQuery Documentation: Selectors:
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").
The W3C CSS specification contains the complete set of rules regarding
valid CSS selectors. Also useful is the blog entry by Mathias Bynens
on CSS character escape sequences for identifiers.

jquery escape square brackets to select element

Consider a input element
<input id="meta[152][value]" type="text" />
Here the input field is dynamically generated. I need to select that field. So I used,
alert($('#meta[152][value]').val());
But this seems to be invalid. After searching I found, that the "square brackets" need to be escaped like #meta\\[152\\]\\[value\\]
So how to do that ?
I currently use this code,
var id = "#meta[152][value]" // (I get this value by another method) I need the escaping to be done here. So that i can use as
/** I need the value of id to be escaped using regex,replace or any other method
to get #meta\[152\]\[value\]
and not manually **/
alert($(id).val());
Your suggestions will be helpful !

The following should work:
alert($('#meta\[152\]\[value\]').val());
or
var id = "#meta\[152\]\[value\]";
alert($(id).val());
Working Example
Conversion Function:
function ConvertValue(id)
{
var test = id.replace(/[[]/g,'\\\\[');
return "#" + test.replace(/]/g,'\\\\]');
}
Conversion Example

If you feel more comfortable without escaping you also use the attributes selector and search for the element with that id like this: $("[id='meta[152][value]']")

The simplest way is just to use the regular getElementById, which requires no escaping:
document.getElementById("meta[152][value]").value;

this shoudl work for you, you almost had it:
$(document).ready(function() {
var id = "#meta\\[152\\]\\[value\\]";
alert($(id).val());
});

Um, just put the escaped value right in your string.
var id = "#meta\\[152\\]\\[value\\]";
See it working here

You can use the _.escapeRegExp method from the Lodash library.
console.log($('#' + _.escapeRegExp('meta[152][value]')).val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<input id="meta[152][value]" type="text" value='Test' />

jQuery's attr() escaping ampersands

So i'm trying to set an image src attribute dynamically via javascript like so:
var url = 'query.php?m=traffic&q=getgraph&id='+pipeId+'&start=-3h';
console.log(url);
$('#3h').attr('src',url);
The problem is, it shows up like so query.php?m=traffic&q=getgraph&id=1&start=-3h in the console, the the actual set src for the #3h image element is query.php?m=traffic&q=getgraph&id=1&start=-3h
And then, of course, it doesn't work. How do I avoid jQuery's attr() methods' character escaping? Any other suggestions on how should I achieve my goal are very welcome as well.

If it doesn't work, it's not due to the ampersands being escaped. As an attribute in an HTML element, all XML entities need to be escaped:
--+-------
< | <
> | >
" | "
& | &
As an example, if I had index.php?foo=bar&buzz=baz, and I wanted to have an a element target that page, I would need to set the anchor like so:
<a href="index.php?foo=bar&buzz=baz
The href would get decoded as: index.php?foo=bar&buzz=baz
I'll see if I can't find the relevant documentation for you.

The only issue that I see in your code is that your ID attribute is starting with a number, which is invalid in HTML4.
$('#3h') // invalid for HTML4
You should change the ID on the element to begin with a letter, like h3
$('#h3') // valid ID for HTML4

For me it's working:
http://jsfiddle.net/y249K/

You can escape the data before writing it to an attribute.
Try out this fiddle
$('#3h').attr('src', escape(url));
then
unescape($('#3h').attr('src'))

You could avoid using jQuery for this and use native JavaScript/DOM functions instead:
document.getElementById('3h').src = url;