CODEWITHSUNDEEP
javascripthtmljquery-mobile
AddyProg
AddyProg

Reputation: 3050

Getting text of html elements via Jquery

I am trying to get the dynamically generated text from a list and show it tin alert dialog in jquery mobile app but its not working Here is what i have tried

HTML

<center>
    <div class="preview ui-shadow swatch cus-bg-bdy" style="max-width:50em;text-align:left;">
        <div style="border-color: #DDDDDD !important;text-align:left;" class="ui-bar ui-bar-a">
                <h3>Customers</h3>

        </div>
        <div style="padding:1em;">
            <table>
                <tr>
                    <td>Name :</td>
                    <td>Dummy Name</td>
                </tr>
                <tr>
                    <td>Address :</td>
                    <td>Dummy Address</td>
                </tr>
            </table>
            <fieldset id="download_c_list" data-role="controlgroup" data-iconpos="left" data-filter="true" data-filter-placeholder="Search here..." data-count-theme="a">
                <label>
                    <input type="radio" name="customer">
                    <table data-role="table" data-mode="reflow" class="ui-responsive" style="font-weight: normal;">
                        <thead>
                            <th></th>
                        </thead>
                        <tbody>
                            <tr>
                                <td><font class="customer-name">Company-1</font>

                                </td>
                            </tr>
                            <tr>
                                <td><font class="customer-adress">Stradbroke Island.</font>

                                </td>
                            </tr>
                        </tbody>
                    </table>
                </label>
                <label>
                    <input type="radio" name="customer">
                    <table data-role="table" data-mode="reflow" class="ui-responsive" style="font-weight: normal;">
                        <thead>
                            <th></th>
                        </thead>
                        <tbody>
                            <tr>
                                <td><font class="customer-name">Shope-1</font>

                                </td>
                            </tr>
                            <tr>
                                <td><font class="customer-adress">address-1.</font>

                                </td>
                            </tr>
                        </tbody>
                    </table>
                </label>
                <label>
                    <input type="radio" name="customer">
                    <table data-role="table" data-mode="reflow" class="ui-responsive" style="font-weight: normal;">
                        <thead>
                            <th></th>
                        </thead>
                        <tbody>
                            <tr>
                                <td><font class="customer-name">customer-1</font>

                                </td>
                            </tr>
                            <tr>
                                <td><font class="customer-adress">Address-2.</font>

                                </td>
                            </tr>
                        </tbody>
                    </table>
                </label>
            </fieldset>
        </div>
    </div>
</center>

Jquery

$("input[name=customer]:radio").change(function () {

alert($($($(this).siblings('label')).children("[name='custerm-name']")).html());
});

I want to show customer name and address of clicked item in alert box , here is the Fiddle http://jsfiddle.net/SzaBw/

Upvotes: 0

Views: 54

Answers (3)

Sandeeproop
Sandeeproop

Reputation: 1776

You need to update you alert code to this

alert($(this).closest(".ui-radio").find(".customer-name").text())
alert($(this).closest(".ui-radio").find(".customer-address").text())

here is the Fiddle for above code

Upvotes: 1

flygge
flygge

Reputation: 189

Try this:

$("#download_c_list input:radio").change(function () {
var label = $(this).prev();
var customerName = label.find('.customer-name').first();

var customerAdress = label.find('.customer-adress').first();
alert(customerName.html() + ' - ' + customerAdress.html());

});

Upvotes: 0

Rick Su
Rick Su

Reputation: 16440

Try the following

$("input[name=customer]:radio").change(function () {
    var parent = $(this).parent();
    alert(parent.find(".customer-name").text());
    alert(parent.find(".customer-adress").text());
});

Note: you have typo in customer-address class

Upvotes: 3

Related Questions