values are undefined in array type ids using jquery

Question

I am changing src of an image after a colorbox is being closed. When ID of the img tag is like tabImage , it works fine but when I change the id to tabImage[0] it stop working.

Working code is as follow :

<div class="whBg"><a href="javascript:openIframe('offerImage');">Select Image</a></div>
<form:hidden path="offerImageName" />
<form:hidden path="offerImageRel" />
<form:hidden path="offerImageTitle" />
<form:errors path="offerImage" cssClass="errorInst" />              
<img id="offerImages" src="" style="width: 642px; margin:0px 0 0 220px;" />
<input type="hidden" id="returnImageName" />
<input type="hidden" id="returnImageSrc" />
<input type="hidden" id="returnImageRel" />
<input type="hidden" id="returnImageTitle" />

<script>
  function openIframe(tabName)
  {
    $.colorbox({
      iframe:true, 
      href:"imageListFrame",
      innerWidth:1000, 
      innerHeight:500,
      onClosed: function() { 
        $("#"+tabName+"s").attr("src", $("#returnImageSrc").val());
        $("#"+tabName+"Name").val($("#returnImageName").val());
        $("#"+tabName+"Rel").val($("#returnImageRel").val());
        $("#"+tabName+"Title").val($("#returnImageTitle").val());
      }   
    });    
  }
</script>

When I change IDs of input and img it stop working.

<div class="whBg"><a href="javascript:openIframe('toursImage',0);">Select Image</a></div>
<input type="hidden" id="toursImageName[0]" />
<input type="hidden" id="toursImageRel[0]" />
<input type="hidden" id="toursImageTitle[0]" />
<img id="toursImages[0]" name="toursImages[0]" src="" style="width: 642px; margin:0px 0 0 220px;" />
<input type="hidden" id="returnImageName" />
<input type="hidden" id="returnImageSrc" />
<input type="hidden" id="returnImageRel" />
<input type="hidden" id="returnImageTitle" />

<script>
  function openIframe(tabName,id)
  {
    $.colorbox({
      iframe:true, 
      href:"imageListFrame",
      innerWidth:1000, 
      innerHeight:500,
      onClosed: function() { 
        $("#"+tabName+"s["+id+"]").attr("src", $("#returnImageSrc").val());
        alert($("#"+tabName+"s["+id+"]").attr("src"));
        $("#"+tabName+"Name["+id+"]").val($("#returnImageName").val());
        $("#"+tabName+"Rel["+id+"]").val($("#returnImageRel").val());
        $("#"+tabName+"Title["+id+"]").val($("#returnImageTitle").val());
      }   
    });    
  }
</script>

I have double checked that returnImageName, returnImageSrc etc are getting right values. I tried to access value of #toursImages[0] using jquery but I am getting undefined in alert.

score 2 · Accepted Answer · answered Aug 10 '16 at 10:41

2

You have to escape the [] - Brackets with \\

$("#"+tabName+"Name\\["+id+"\\]")

From jQuery Docu: LINK

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

answered Aug 10 '16 at 10:41

Chris

703
4
10

Thanks . I really appreciate for your quick reply. – vishal Aug 10 '16 at 10:55

score 0 · Answer 2 · edited May 23 '17 at 11:53

0

I think that you can't put [ and ] in the id attribute.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

See this answer: https://stackoverflow.com/a/79022/863110

Try to replace it to underscore (_) for example:

<input type="hidden" id="toursImageName_0" />

edited May 23 '17 at 11:53

Community

1
1

answered Aug 10 '16 at 10:41

Mosh Feu

24,625
12
74
111

Then wht should I implement here ? It is essential to add multiple `toursImageName` because I am mapping it to a `List` in spring MVC. Is there any way to add multiple `` ? – vishal Aug 10 '16 at 10:43
I'm not familiar with spring MVC but it's not make any sense that it works with invalid html. Usually, when you work with multiple instances, the `name` attribute contains those characters `name=collection[0]` See this answer: http://stackoverflow.com/a/20184680/863110 – Mosh Feu Aug 10 '16 at 10:49
Thanks to provide your valuable time. Actually in Spring MVC I know only one way to bind a list (There may be another ways). Anyway issue has been resolved. Thanks again. :) – vishal Aug 10 '16 at 10:56

score 0 · Answer 3 · edited Aug 10 '16 at 12:00

0

You should change toursImageName[0] to toursImageName0.

edited Aug 10 '16 at 12:00

Ashish Ahuja

4,798
9
48
63

answered Aug 10 '16 at 10:43

Văn Tuấn Phạm

593
4
9

values are undefined in array type ids using jquery

3 Answers3