Scot Ranney Scot Ranney - 17 days ago 7
jQuery Question

I'm having trouble getting jQuery to update a particular element's contents

I have an AJAX call that is working fine in the back end, and I'm able to update various content on the page, but there is one piece of content that isn't getting touched and I'm not sure why.

Here's the HTML and I'm trying to update the content for the span with id="btotal":

<a href="#cart" role="button" data-toggle="modal" class="basket-count float-right hidden-xs"><i class="icon-shopping-cart"></i> <span class="hidden-xs hidden-sm"><span id="btotal">2</span></span></a>


I'm trying to update the "btotal" span contents this way:

$("#btotal").html(data.responseText);


The data.responseText is valid, and I can use a similar jQuery line to update other elements on the page with data.responseText if I make their id "btotal" and I'm also able to display data.responseText in the console.

I'm not all that savvy with this stuff, but it seems like this should be a no-brainier. Any ideas why this is happening?

One more thing, the css/js framework is bootstrap and the href opens a modal with shopping cart info. I'm also wondering if something about that href is blocking jQuery from updating the "btotal" element that's inside that href.

Answer

You code is fine i think you have more than one element with same id, try see rendered html source and search for that id.

Otherwise you can do this, but not recommended as id must be unique for one element

$("[id=btotal]").html(data.responseText);