Targeting an element with jQuery depending on JSON data

Question

I have a dynamically generated form which I get from an asynchronous AJAX call and I have some settings provided in a JSON object. I want to target one field specifically with jQuery, so I load the JSON data to a JS variable to work with it:

var jsonData = {{response.write(session.j_jsondata, escape=False)}};
/*
I'm using Web2Py, so the part between the double curly braces is equal to:
{'fields': [{'required': 'true', 'type': 'mtext', 'name': 'desc'}]}
*/

The data gets loaded correctly to the variable, but then when I want to target something with a name from jsonData.fields[somenumber].name it doesn't work.. I've tried it like this:

jQuery("form [name="+jsonData['fields'][i]['name']+"]")

I get no error. Any ideas why it's not targeting the expected element? Thanks!

Edit: I tried changing the structure a bit. Instead of using name I chose ID (I updated the template view as well ofc) and switched to

jQuery("#"+jsonData['fields'][i]['name'])

but still no cigar. It probably has some problems with tha fact that the field is generated after an AJAX call, but that's wierd because the script is called after the form is generated. So the last thing that happens is the execution of this script which targets the form element, yet it doesn't work. Sorcery.

Does i have the correct value? Since you don't know (I assume) whether the selector is generated correctly or not, set a breakpoint and expect the variables. To learn how to do that (if you not do already), have a look at netmagazine.com/tutorials/javascript-debugging-beginners. — Felix Kling
– Felix Kling, Commented Feb 26, 2013 at 10:43
@FelixKling yes, we can say that i = 0, this isn't the problem - everything works when I use a specific element ID - the problem is in jQuery("form [name="+jsonData['fields'][i]['name']+"]") but I don't know where :( — Dropout
– Dropout, Commented Feb 26, 2013 at 10:56
As I said, debug! We cannot run the code, so we cannot do that for you. Call console.log("form [name="+jsonData['fields'][i]['name']+"]") just before the selection and have a look what the output is. Is the selector correct? And are you executing this call when the form exists (since it is loaded via Ajax)? — Felix Kling
– Felix Kling, Commented Feb 26, 2013 at 10:58
yep, it returns "form [name=desc]" and desc is the name of the element which I want to target — Dropout
– Dropout, Commented Feb 26, 2013 at 11:41
If you can reproduce the problem with a jsfiddle.net demo, then we might be able to help you more. — Felix Kling
– Felix Kling, Commented Feb 26, 2013 at 12:04

Terence Jefferies · Accepted Answer · 2013-02-26 10:46:03Z

2

After testing on a local webpage, I noticed that you cannot have a space between the form and opening square bracket, so your selector should read:

jQuery("form[name="+jsonData['fields'][i]['name']+"]")

Cheers,

Terence.

answered Feb 26, 2013 at 10:46

Terence Jefferies

3581 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Felix Kling Over a year ago

Depends on what you are looking for. The space is the descendant selector. The OP's selector searches for an element with a certain name inside each form (which makes sense, since form controls have names), while yours searches for a form element with that name. The semantic is different.

Terence Jefferies Over a year ago

Perhaps instead of specifying "form [name]" then, you should consider specifying "form input[name]" - I'm pretty sure you cannot supply a name as a selector, if you see what I mean. (Or form select[name] depending on what types of inputs you have)

Dropout Over a year ago

But I have a form which contains an element with a name.. It's not the name of the form..

Felix Kling Over a year ago

There is no problem in using an attribute selector on its own, it's completely valid. See: jsfiddle.net/cCDs2.

Terence Jefferies Over a year ago

Very strange, would adding classes to the inputs or fields be an option at all? Go around the naming issue entirely.

|

shere · Accepted Answer · 2013-02-26 10:44:40Z

2

Maybe it's because the quotations for the attribute selector is missing. Try this:

$('form [name="'+jsonData['fields'][i]['name']+'"]')

answered Feb 26, 2013 at 10:44

shere

1013 bronze badges

3 Comments

Felix Kling Over a year ago

Assuming everything else is correct, this is the most likely reason.

shere Over a year ago

...but if the name is a single word, it should also work without the quotation marks.

shere Over a year ago

then i assume jsonData['fields'][i]['name'] does not give you the right value...

Collectives™ on Stack Overflow

Targeting an element with jQuery depending on JSON data

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related