Member Avatar for dwlamb

This might be a duplicate but I can not find a solution for the small challenge I am facing. I want to assign the href and text in an <a> tag to variables and use them in a jquery script. Examples I have found pertain to diving into the DOM and retrieving several <a> based on class or specific ones based on an id. I think there should be a way to drill down and select a particular one.

I have a list of links rendered from php. Currently, they all have the same class. An admin user has the option of editing or deleting the link. These editing and deleting options are carried out with jquery and ajax. Below is how any of the links is coded. (Formatted for simple presentation here.)

<ul class="url_list">
<li>
    <input type="hidden" value="95" name="id">
    <a href="http://www.foo.com/index.html" target="blank">See this</a>&nbsp;
    <span class="itemDelete">
        <img alt="Delete this link" title="Delete this link" 
            src="images/ajax-urls/deleteIcon.png">
    </span>&nbsp; 
    <span class="itemEdit">
        <img alt="Edit this link" title="Edit this link" 
            src="/images/ajax-urls/editIcon.png">
    </span>
</li>
</ul>

The hidden field with a numeric value is to be used for deleting a url from the database.

This is my javascript:

$(document).on('click', '.itemEdit', function() {
    var url_id = $('input[name="id"]').val();
    var recipie_id = $('input[name="recipe_id"]').val();
    var href = $(this).closest('a').attr('href');

    ... more code 
});

I also tried:

$(document).on('click', '.itemEdit', function(e) {
    var url_id = $('input[name="id"]').val();
    var recipie_id = $('input[name="recipe_id"]').val();
    var href = $(e.target).closest('a').attr('href');

    ... more code 
});

I can't figure out how to assign href to a variable. Stepping through the code or echoing out href to the console and href comes up empty. Keep in mind, it is the <a> closest to <span class="itemEdit"> that I want.

Thank you for taking the time to read this.

  • 2 Contributors
  • 3 Replies
  • 261 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for diafol

Maybe try this...

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<ul class="url_list">
    <li data-id="95">
        <a href="http://www.foo.com/index.html" target="_blank">FOO - See this</a>
        <a href="#">Delete this link</a> 
        <a href="#">Edit this link</a>
    </li>
    <li data-id="99">
        <a href="http://www.example.com/index.html" target="_blank">EXAMPLE - See this</a>
        <a href="#">Delete this link</a> 
        <a href="#">Edit this link</a>
    </li>
</ul>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $('.url_list').on('click', 'a', function(e) {
        var n = $(this).closest('li').find('a').index(this);

        if (n !== 0) {
            e.preventDefault();
            var url_id = $(this).parent().data('id');
            var mode = (n === 1) ? 'delete' : 'edit';
            alert(url_id + ' ' + mode);
        }
   });
</script>

</body>
</html>
Member Avatar for dwlamb

Thanks for the possible solution, diafol. I am opting for server side solution with an AJAX call, modifying a jquery javascript I have in place for deleting a link/li from the DOM and the database.

I thought it would be easier to manipulated what is already on the page for scooping up what is there and manipulating it on the client-side rather than server-side.

Member Avatar for diafol

Yes, this is what my script allows - instead of the alert, you take the data (id and mode) and pass to an ajax php script (if delete) or to an edit form (if edit) which can then be updated via ajax.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.