Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Adding Unique Values to a Sharepoint List from an Onclick function on a Website

I maintain my company’s website and we want to see how many times hyperlinks get clicked within a side panel on the website. Each hyperlink has a name on the side panel and I’m trying to have that "name" added to a Sharepoint list on(click). With that being said, I added a class to the anchor tags named "nameLink" then called a function to add "nameLink" to the title column of Sharepoint so I can keep track….

This worked however I have multiple hyperlinks in this side panel and the "name" in Sharepoint is coming across as ALL the names of each hyperlink in that category instead of the one that was clicked. Is there a way to allow each hyperlink to be unique so the Sharepoint data is shown properly? Here is a mock template of my code as I can’t provide the real data.

MY CODE

$("#dataCode").on('click', function() {
            var varUserEmail = $('#useremail').val();
            var varTitle = $('.nameLink').text();
                $().SPServices({
                    operation: "UpdateListItems",
                    async: false,
                    batchCmd: "New",
                    listName: "Analytics",
                    valuepairs: [
                        ["Title", varTitle],
                        ],
                        completefunc: function(xData, Status) {
                    alert('This Worked!');
                }
                });
            });


<ul id="dataCode">
                                                          <li>
                                <a href="link">
                                         <div class="nameLink">Title1</div>
                                </a>
                            </li>
<li>
                                <a href="Link">
                                    <div class="nameLink">Title2</div>
                                </a>
                            </li>`your text`
Tags:

2

Answers


  1. 0

    This:

    $('.nameLink').text()

    will return the text for all matching elements. You want the text for the clicked element specifically.

    One approach could be to filter the click handler to only the target element(s) and use this to reference the one which was clicked:

    $("#dataCode").on('click', '.nameLink', function() {
  var varTitle = $(this).text();
  console.log(varTitle);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul id="dataCode">
  <li>
    <a href="#">
      <div class="nameLink">Title1</div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="nameLink">Title2</div>
    </a>
  </li>
</ul>

    Note the second argument to .on() which tells it to only execute this click handler if an element matching that selection is clicked. (Without that, this would reference the #dataCode element.)

    Alternatively, if you don’t want to filter by the target element, use the event passed to the click handler to find the element which was clicked:

    $("#dataCode").on('click', function(e) {
  var varTitle = $(e.target).text();
  console.log(varTitle);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul id="dataCode">
  <li>
    <a href="#">
      <div class="nameLink">Title1</div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="nameLink">Title2</div>
    </a>
  </li>
</ul>

    Note the added argument e in the function, which is the click event object. It has a property called target which identifies the element which was actually clicked. (As opposed to the #dataCode element further up the DOM which is handling the click.)

    Login or Signup to reply.
  2. 0

    Your ul is the entire list. You want to handle click events on the list items rather than the list itself. Therefore:

    $("#dataCode .nameLink").on('click', function() {
            var varUserEmail = $('#useremail').val();
            var varTitle = $(this).text();
                $().SPServices({
                    operation: "UpdateListItems",
                    async: false,
                    batchCmd: "New",
                    listName: "Analytics",
                    valuepairs: [
                        ["Title", varTitle],
                        ],
                        completefunc: function(xData, Status) {
                    alert('This Worked!');
                }
                });
            });

    The first change I made was to add .nameLink to the selector to have separate click handlers for each menu that you have. The second change I made was to get the varTitle from the clicked element.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search