CODEWITHSUNDEEP
jquery
sparkymark75
sparkymark75

Reputation: 593

jquery .text() returns empty string

Not sure why, but with the following Html

<div id="basket" class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Basket</h3>
    </div>
    <div class="panel-body">

            <div id="row-031d9f2b-c6e9-e311-827b-c8bcc8ef428f" class="row">
                <div class="col-xs-8"><span id="qty-031d9f2b-c6e9-e311-827b-c8bcc8ef428f">5</span> <small>x</small> Match Night Ticket [Adult]</div>
                <div class="col-xs-2 text-right">16.00</div>
                <div class="col-xs-2"><a name="removeFromBasket" href="javascript:;" data-pid="031d9f2b-c6e9-e311-827b-c8bcc8ef428f"><span class="glyphicon glyphicon-remove text-danger"></span></a></div>
            </div>
    </div>
    <div class="panel-footer">
        <div class="row">
            <div class="col-xs-8"><strong>Total</strong></div>
            <div id="basket-total" class="col-xs-4">80.00</div>
        </div>
    </div>
</div>

I cannot get the value of the span with the id qty-031d9f2b-c6e9-e311-827b-c8bcc8ef428f

I'm using the following javascript which returns an empty string. I'm sure I am missing something obvious but after looking at it for an hour or so and trying umpteen variations, I cannot see where I am going wrong.

 var qtyId = "qty-" + pid;
                //var productRowId = "#row-" + pid;
                alert($("#basket .panel-body " + qtyId).text());

pid in the script above equals the guid value 031d9f2b-c6e9-e311-827b-c8bcc8ef428f

Upvotes: 0

Views: 1580

Answers (2)

ArtOfCode
ArtOfCode

Reputation: 5712

It's because you're referring to the element as a top-level element rather than by ID. Using jQuery, with no . or # selector, the Sizzle selector engine assumes you're referring to an element, such as a <div>.

To solve your problem, just add the ID selector in:

var qtyId = "qty-" + pid;
//var productRowId = "#row-" + pid;
alert($("#basket .panel-body #" + qtyId).text());

The only change there is on the last row, where I have added #.

Upvotes: 1

j08691
j08691

Reputation: 207881

Change the alert to:

alert($("#" + qtyId).text());

jsFiddle example

Since IDs must be unique, there's no need to chain them here to get the one you want. And you have to remember to use the # to prefix the ID.

Upvotes: 2

Related Questions