0

i have a control on the page that is an image:

<IMG style="BORDER-RIGHT-WIDTH: 0px; WIDTH: 100%; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 100%; BORDER-LEFT-WIDTH: 0px" id=ctl00_ctl38_g_e05451aa_ea4f_4e2f_adf1_50fc0a6edb84_ctl00_ListForm2_formFiller_FormView_ctl30_ctl12_595dbbb6_2a8c_46ea_b0ec_06a88ebef06c_ctl01_ctl11_f067f2dd_39e0_4ca5_825c_c2495c422fb2 class="serviceSearch1 nf-image" alt="Find a service" src="/Style%20Library/workflow/lbg%20ccr/Images/findLogo24.png" jQuery110209154273117302492="20">

that is fine an i can get the correct ID.

when another image is added dynamically using JS it looks like this:

<IMG style="BORDER-RIGHT-WIDTH: 0px; WIDTH: 100%; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 100%; BORDER-LEFT-WIDTH: 0px" id=2_ctl00_ctl38_g_e05451aa_ea4f_4e2f_adf1_50fc0a6edb84_ctl00_ListForm2_formFiller_FormView_ctl30_ctl12_595dbbb6_2a8c_46ea_b0ec_06a88ebef06c_ctl00_ctl11_ad824e8a_1581_470c_a6c9_223e6d8c2370 class="serviceSearch1 nf-image" name=2_ alt="Find a service" src="/Style%20Library/workflow/lbg%20ccr/Images/findLogo24.png" jQuery110209154273117302492="18">

when i get this ID it returns the first image ID and not with the value of "2_" or the new name attribute added into the dynamic object, code just returns blank.

code is based on the click event of the clicked image class:

$('.serviceSearch1 .nf-image').click(function () {
    alert(this.name);
    alert(this.id);
});

on the browser source i can see the correct values though. Im confused as to what is going on and any help would be greatly appropriated!

I have no control over the html and javascript automation. That is due to a third party!

it looks like the browser as shown above is uptodate but in code its not updating (has old values).

marked in blue is the new repeating section that is auto generated (not by me by third party):

enter image description here

in each repeating section contains an image that i have shown above.

as noted when the image is clicked it calls the click event but the attribute values are all old. The first image contains no name attribute but any new repeating control does noting its current index. so first has none, second has "2_", third has "3_" and so on.. i need those name values but when i access them on the click event its blank and the ID's are the same as the first image. The controls are added dynamically by third party which i assume is using JS. hope that helps.

Ali Jafer
  • 119
  • 6
  • It shows ID of first image, even though you click the second one? – Wax Cage Sep 19 '16 at 11:51
  • 3
    90's HTML coding... awesome but totally wrong in 2016 – Marcos Pérez Gude Sep 19 '16 at 11:52
  • `$('#imagecontainerID").on("click",".nf-image", function () {` – mplungjan Sep 19 '16 at 11:52
  • no this has todo with nintex and sharepoint im afraid! i have no control over how the controls are generated! – Ali Jafer Sep 19 '16 at 11:53
  • @mplungjan: both the classes are added to img element. – Milind Anantwar Sep 19 '16 at 11:53
  • 1
    @almostSharepointMaster: why name attribute value is not wrapped in quotes? – Milind Anantwar Sep 19 '16 at 11:53
  • @mplungjan: yup.. that should work for event delegation. – Milind Anantwar Sep 19 '16 at 11:54
  • @MilindAnantwar this is auto generated by third party. i have no control over how its set or generated unfortunately. all i have control is the JS code i have shown, the html is not mine but is generated by JS. – Ali Jafer Sep 19 '16 at 11:58
  • @WaxCage yes! i think its partly todo with the fact that the JS click event is based off the class but shouldnt be an issue as it should be getting the values from the image i clicked. As noted on code its old values but on browsers there is a new attribute "name" and the ID has "2_" added – Ali Jafer Sep 19 '16 at 12:01
  • @almostSharepointMaster check third comment on your post. mplungjan has provided syntax for event delegation. – Milind Anantwar Sep 19 '16 at 12:09
  • no doesnt work. the name just returns undefined. dont know why he said its a repeat question when its not and have looked at that answer before asking this question as none of the work so far – Ali Jafer Sep 19 '16 at 12:18
  • @mplungjan this is not a duplicate! – Ali Jafer Sep 19 '16 at 12:21
  • Yes it is. Show us the HTML that contains the images and how you dynamically add them and we will show you it's a duplicate – mplungjan Sep 19 '16 at 12:28
  • just updated my question, thanks. – Ali Jafer Sep 19 '16 at 12:55
  • after a little debugging. I set the function to update the ID when clicked. It looks like its only updating the first in the repeater that is hidden and the actual image that is clicked is never hit. I would of assumed that onclick would target the actual image clicked – Ali Jafer Sep 19 '16 at 13:12
  • anyone can help would be greatly appreciated – Ali Jafer Sep 19 '16 at 13:24
  • 1
    solved the issue: $('.serviceSearch1 .nf-image').bind('click', function(){ that did the trick! thanks for the links. Just needed to bind the links as they wernt binding properly. – Ali Jafer Sep 19 '16 at 14:45

0 Answers0