0

I have inserted an image (with <a> tag) like "Add to cart" before the title of list item using SP Designer. Now I want to check that which item's link is clicked using java script. How to do that?

My code is:

<script type="text/javascript">                             
function Clicked()                          
{                                   
     alert("You have clicked link");
     return false;
}
</script>
<a href="#" onclick="return Clicked();" title="Add item to cart"><img alt="Add to cart" src="file:///C:/Users/Kalpesh.Vaghela/Desktop/add-to-cart-web-button-9227672.jpg"></img></a>
<xsl:value-of select="$thisNode/@*[name()=current()/@Name]" disable-output-escaping ="yes"/>
3
  • Are you sure return Clicked is the optimal use in the onclick event? I advice you to use <a href="javascript:void(0)" onclick="Clicked()"> instead as it makes return redundant/unneeded. Commented Sep 17, 2013 at 8:46
  • I corrected my code sir, @DanielZiga Commented Sep 17, 2013 at 9:03
  • Is there any way to decide which link is clicked? Commented Sep 17, 2013 at 9:07

1 Answer 1

2

Change your function Clicked() to have a parameter.

function Clicked(elem) { 
    alert(elem.length); // This is just to alert something
}

Then in your click event on the <a> tag, add the argument this in Clicked()

<a href="javascript:void(0)" onclick="Clicked(this);" title="Add item to card">...</a>

The Clicked function should now alert the length of the clicked <a> tag.

Update
Since the <a> tag is located within XSL and you want to know which item is being clicked, you can create an XSL variable

<xsl:variable name="ItemName" select="$thisNode/@*[name()=current()/@Name]" />

You can now use this XLS variables value in your javascript as follows

<script type="text/javascript">
function Clicked(value) { 
    alert(value);
}
</script>
<xsl:variable name="ItemName" select="$thisNode/@*[name()=current()/@Name]" />
<a href="javascript:void(0)" onclick="Clicked({$ItemName});" title="Add item to card">...</a>
<xsl:value-of select="$thisNode/@*[name()=current()/@Name]" disable-output-escaping ="yes"/>

Change the XML path in the select property out with the one you want and that will be alerted by your javascript.

This is just a proof of concept. You'll have to make the rest of the logic yourself.

9
  • Output comes as "undefined" Commented Sep 17, 2013 at 9:32
  • @users1100 Try just alerting elem or alert elem === "undefined" <- if this returns false it means you have a valid object and can continue from there. Commented Sep 17, 2013 at 9:36
  • Plz have a look at this I want the name of item when user clicks on the green button left side of name. @DanielZiga Commented Sep 17, 2013 at 9:48
  • Provide some suggestion or reference. Commented Sep 17, 2013 at 9:50
  • @users1100 Check my update. Commented Sep 17, 2013 at 10:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.