When it comes to populating a form with a nested structure there is potential to fall into a rabbit hole. Thankfully in this case the foxes had scared off the rabbits before they had the chance to dig too deeply.
The original issue manifested itself upon requesting a JSON resource with nested structure from a service and populating a form. Almost the opposite of the post linked to above. I went through the process of ensuring the JSON was valid, the path in the document matched the dot notation of the form and that the field had a value associated with it. The source presented below is a simplified test case designed to isolate the issue. What you see here is a form that is populated when the button is clicked. It looks rather innocent, however the "meh.feh" field doesn't get populated; exactly what I had seen in the original issue.
Simplied Example:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="jQuery.js"></script> | |
| </head> | |
| <body> | |
| <form id="form"> | |
| <input id="bleh" type="text" name="bleh" /> | |
| <input id="meh.feh" type="text" name="meh.feh" /> | |
| <br> | |
| <input id="input" name="submit" type="submit" value="Test It" /> | |
| </form> | |
| <script> | |
| $('#input').click(function() { | |
| $('#bleh').val("bleh bleh"); | |
| $('#meh.feh').val("meh meh meh"); | |
| return false; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
jQuery is treating the "." as CSS notation not as a literal. The solution? Escape them with a double backslash.
Simple fix:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('#meh\\.feh').val("meh meh meh"); |
For more information check the jQuery FAQ
Regular expressions FTW!
ReplyDeletefunction jq(myid) {
return '#' + myid.replace(/(:|\.)/g,'\\$1');
}
$( jq('meh.feh') )
Amazing! We cherished reading through your own publish. We additionally cherished speaking with a person upon Skyp this evening. Many thanks for the records.
ReplyDeleteLOL elo boost
Buy FUT 14 Coins