Jquery menu - return json data

Question

I've created a menu from a jquery script. The script parses a json response file and creates the menu. That works. However, the menu then links to a URL. I don't want it to link to the URL, but rather get the json response from that URL and parse it. I've tried and no matter what, it always follows the URL. Here is what I have so far:

jQuery Menu creation (working):

<script>
    $.getJSON('https://example.com/api/products/GetProductList/', function(data) {
        var output = '<div class="panel panel-default">';
        for (var i in data.Categories) {
            output += '<div class="panel-heading '+data.Categories[i].category_id +'"><a data-toggle="collapse" data-parent="#accordion" href="#' + data.Categories[i].category_id + '-products">';
            output += data.Categories[i].Category + '</a></div>';
            output += '<div id="' + data.Categories[i].category_id + '-products" class="panel-collapse collapse"><div class="panel-body">';
            for (var j in data.Categories[i].Products) {
                output += '<li><a class="ProdLink" href="https://example.com/api/products/GetProductDetail/'+data.Categories[i].Products[j].product_id+'">'+data.Categories[i].Products[j].short_description + " -- " + data.Categories[i].Products[j].coins+' coins</a></li>';
            }
            output += "</div></div>";
        }
        output += "</div>";

        document.getElementById("accordion").innerHTML = output;
    });
</script>

This creates a menu with an item such as this

<a class="ProdLink" href="https://example.com/api/products/GetProductDetail/2">Test Item</a>

To parse the data from this URL I've tried:

     <script>
 $('#accordion').on('click','a.ProdLink',function(event) {
    event.preventDefault();
    var url = $(this).attr("href");

    $.getJSON(url, function(data) {
        var output = '<div>';
        for (var i in data) {
            output += data[i].full_description;
        }
        output += "</div>";

        document.getElementById("itemdata").innerHTML = output;
    });});

</script>

But this isn't working. Any insight would be appreciated.

This excerpt appears to be missing a closing brace and parentheses }); before your closing </script> tag. Is that the case in the actual code? — cloudworks
– cloudworks, Commented Jun 30, 2015 at 4:49
That was a typo on my part here, the actual code was correct. — Merlin7591
– Merlin7591, Commented Jun 30, 2015 at 4:59

Community · Accepted Answer · 2017-05-23 12:06:04Z

2

You are appending links dynamically, so use event delegation to handle events on dynamic elements, here a.ProdLink.

$('#accordion').on('click','a.ProdLink',function(event){
  ...
});

Also, this line suggestsProdLink is the id, change it to class t avoid duplicate IDs

output += '<li><a id="ProdLink" ...

And as cloudworks points out the click function should be closed with apt paranthesis.

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Jun 30, 2015 at 4:54

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Merlin7591 Over a year ago

I've tried this, but it's still forwarding to "example.com/api/products/GetProductDetail/2" and not executing the script instead.

Shaunak D Over a year ago

Are you sure ProdLink is the class attribute?

Merlin7591 Over a year ago

Yes changed id="ProdLink" to class="ProdLink"

Merlin7591 Over a year ago

I've updated to show the current state. Still not working though.

Shaunak D Over a year ago

Try using $(document) instead of $('#accordion') . Try adding a debugger to the code to check whether click fires

|

Collectives™ on Stack Overflow

Jquery menu - return json data

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related