Jquery selector not pulling text out

Question

Im working inside of opencart's framework. The base install has the exact same code but mine doesn't seem to be working. I'm not seeing any errors.

Im unsure how to make my selectors in jquery work. When the below code is ran it doesn't find the text in the span. Its returning an empty alert box. Am i doing something wrong or missing something?

alert($('#cart-total').text());

<button type="button"><span id="cart-total" ><?php echo $text_items; ?></span></button>

functions.min.js -> line 197

If youd like to see it in action: http://oc1.theaamgroup.com/ Press add to cart and watch.

UPDATE: I have added a new line to help with the debugging process. When you press on add to cart a alert box will pop up telling you waht the jquery selector found for #cart-total and then what it should have found.

Things I have tried:

• Changing jquery versions

• Moving the functions file to load before other files

• (The selector works when its not inside the functions file for some reason.)

• Same selectors at the top of the functions.min.js file

• Same selectors at the bottom of the functions.min.js file

• You can run the command in chrome console and it works fine.

• Multiple css selectors.

UPDATE 2 At the end of functions.min.js line 498 i have added alert($('#cart-total').text()); to show that for whatever reason cart-total is returning nothing even when it starts (BY default if there are no products in your cart) 0 item(s) - $0.00

Answer 1

You need to wait until the cart has been completely updated and that doesn't happen until after the .load event. Try updating line 205 of functions.min.js with a callback function like so:

$('#cart > ul').load('index.php?route=common/cart/info ul li',function(){
  alert('#cart-total inner text is: '+$('#cart-total').text()+'\n\n#cart-total inner text should be: '+json['total']);
});

This way, all the content is in place when you try to get the value of $('#cart-total').text();

More info on .load can be found here: http://api.jquery.com/load/

Answer 2

You are loading #cart after the successful request so you might update the text after you fetch the content with callback

$('#cart > ul').load('index.php?route=common/cart/info ul li', function(){
    $('#cart-total').text(json['total']);
});

Answer 3

I can't comment yet... So this isn't a full answer, but I suggest that the OP abstract out the problem in a JSfiddle like so

http://jsfiddle.net/31c2zb0u/1/

Also, all of this ugly markup isn't necessary for the question, and distracts from the point.

<button type="button" onClick="cart.add('1274');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">Add to Cart</span></button>

This is all the information that would be needed from the above html.

<button onClick="cart.add('1274');"><span style='display: none'>Add to Cart</span></button>

Answer 4

Only the script you are referring to in your question is working for me. But to go a bit further I inspected your page you linked to and saw that you have a function that looks like this:

if (json['success']) {
  $('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');

  $('#cart-total').html(json['total']);
  alert($('#cart-total').text());
  $('html, body').animate({
    scrollTop: 0
  }, 'slow');

  $('#cart > ul').load('index.php?route=common/cart/info ul li');
}

You are changing the html of the #cart-total, so why do you want to fetch the text again if you already set it with an variable? Just do the following and change alert($('#cart-total').text()); to alert(json['total']);

Like so:

if (json['success']) {
  $('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');

  $('#cart-total').html(json['total']);
  alert(json['total']);
  $('html, body').animate({
    scrollTop: 0
  }, 'slow');

  $('#cart > ul').load('index.php?route=common/cart/info ul li');
}