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.

Chris · Accepted Answer · 2016-08-10 10:41:37Z

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, 2016 at 10:41

Chris

7934 silver badges10 bronze badges

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

1 Comment

vishal Over a year ago

Thanks . I really appreciate for your quick reply.

Community · Accepted Answer · 2017-05-23 11:53:29Z

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, 2017 at 11:53

CommunityBot

11 silver badge

answered Aug 10, 2016 at 10:41

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

3 Comments

vishal Over a year ago

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 <input type="hidden" id="toursImageName[count]" /> ?

Mosh Feu Over a year ago

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: stackoverflow.com/a/20184680/863110

vishal Over a year ago

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. :)

Box Box Box Box · Accepted Answer · 2016-08-10 12:00:42Z

0

You should change toursImageName[0] to toursImageName0.

edited Aug 10, 2016 at 12:00

Box Box Box Box

5,38810 gold badges52 silver badges71 bronze badges

answered Aug 10, 2016 at 10:43

Văn Tuấn Phạm

6594 silver badges10 bronze badges

Collectives™ on Stack Overflow

values are undefined in array type ids using jquery

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related