1

Normally I can find what I need here without having to post myself, but I'm stumped with this one. Go easy on me!

I have some XSLT that pulls a number of user records staff name (SharePoint 2010). I need to pass a javascript function the staff name so it can use it to create a URL for a staff image, and pass the value back to replace the image src for each of the images.

Here's some of the code I'm trying to put together:

function loadStaffPic(staffName) {
  
  /* Code to use staffName to retrieve loginID from 
     SharePoint OM goes here and returns the variable loginID */

  var filename = loginID.replace("\\","_");
  var picURL = "http://www.mywebsite.com/images/" + filename + ".png";
  
  document.getElementById("StaffPic").src = picURL;
}
<xsl:template>
  <xsl:template name="dvt_1.rowview">
    <img id="StaffPic{generate-id()}" onload="loadStaffPic({@Staff_x0020_Name})" src="placeholder.png" alt="{@Staff_x0020_Name}" />
  </xsl:template>

Can I use onload in the img tag like this? And if so, how can I target the image with the generated ID?

I'm assuming some kind of a loop is required...

By the way, if there is a better jQuery option that would be even better.

If I've not put enough information please let me know.

Chris

EatSpam
  • 11
  • 2
  • Could you just specify the `src` attribute as `src="http://www.mywebsite.com/images/{translate(@Staff_x0020_Name, '\', '_')}.png"`? – Tim C Apr 09 '18 at 16:38
  • Hi Tim, thanks - that's a good way to solve it. I have simplified the problem though for the sake of clarity (and in doing so seem to have muddied the water!). I actually need to send the value to the JavaScript function to not only replace the backslash, but also to use the staff name to return a login id from the SharePoint 2010 client object model - it's actually the login id I'm returning to the src. Sorry for confusing - I was just hoping to make the problem less complicated - Thanks again for your reply :) – EatSpam Apr 10 '18 at 07:32
  • I've updated the question Tim to hopefully better show what I'm trying to achieve. :) – EatSpam Apr 10 '18 at 08:36
  • Perhaps this will help... https://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached – Tim C Apr 10 '18 at 12:42

1 Answers1

0

Thanks Tim C for your replies - they put me on the right track to find the answer.

The answer itself was actually simple:

I changed the img onload event:

onload="loadStaffPic({@Staff_x0020_Name})"

to

onload="javascript:loadStaffPic('{@Staff_x0020_Name}')"

And now it works :)

Now on to the next issue! Thanks mate.

EatSpam
  • 11
  • 2