jQueryMobile - looping each button to change text of nested tag on click with ajax

Question

I have a page that will make an external call on a button click, and then update the button to reflect success. The ajax calls work properly, however I am having difficulty trying to manipulate the text of the button when there are many on the page.

It is easy enough to match using $(".sabPauRes.ui-btn-text").text("Updated"); when it's the only item on the page, but I am not sure how to point to it using $(this) when I am using the each function. I read a bit about 'closest', but it doesn't seem to accomplish what I want (or I'm just doing it wrong).

Code sample below!

$(document).ready(function(){
    $('.sabPauRes').each(function() {
        $(this).click(function(event) {
            event.preventDefault();
            $.ajax({
                type: "GET",
                url: this.href,
                cache: false,
                dataType: "text",
                success: onSuccess
            })
        })

        $("#resultLog").ajaxError(function(event, request, settings, exception) {
            $("#resultLog").html("Error Calling: " + settings.url + "<br />HTTP Code: " + request.status);
        })

        function onSuccess(data)
        {
            // validate the result of the ajax call, update text, change button methods as needed
            if (data == "Success") {
                // PROBLEM -- how do I use $this to match a class that is nested within it?
                $(this).closest(".ui-btn-text").text("Updated");
            } else {
                alert("Failed: " + data);
            }
            $("#resultLog").html("Result: " + data);

        }
    })
})

html

<body>
<div data-role="page">
    <div data-role="content">

    <div data-role="collapsible">
        <h3>This is an item</h3>
        <p>
                <a href="/api/?resume=fhdh54" class="sabPauRes" data-ajax="false" data-role="button" data-inline="true" data-request="resume">Resume Download</a>


            <div id="resultLog"></div>
        </p>
    </div>
</div>
</body>

score 0 · Answer 1 · edited May 23 '17 at 12:12

Found the answer within Change button text jquery mobile

If you assign $(this) to a variable, then you can reference it in the .text() function as shown below:

$(document).ready(function(){
$('.sabPauRes').each(function() {
    $this = $(this);
    $(this).click(function(event) {
        event.preventDefault();
        $.ajax({
            type: "GET",
            url: this.href,
            cache: false,
            dataType: "text",
            success: onSuccess
        })
    })

    $("#resultLog").ajaxError(function(event, request, settings, exception) {
        $("#resultLog").html("Error Calling: " + settings.url + "<br />HTTP Code: " + request.status);
    })

    function onSuccess(data)
    {
        // validate the result of the ajax call, update text, change button methods as needed
        if (data == "Success") {
            alert(data);
            $(".ui-btn-text",$this).text("Updated");
        } else {
            alert("Failed: " + data);
        }
        $("#resultLog").html("Result: " + data);

    }
})

})

peterm · Answer 2 · 2013-02-10T21:18:44.523

First things first. Please stop using jquery ready handler when working with jQuery Mobile. Give your page an id and use pageinit() event instead.

pageinit = DOM ready

One of the first things people learn in jQuery is to use the $(document).ready() function for executing DOM-specific code as soon as the DOM is ready (which often occurs long before the onload event). However, in jQuery Mobile site and apps, pages are requested and injected into the same DOM as the user navigates, so the DOM ready event is not as useful, as it only executes for the first page. To execute code whenever a new page is loaded and created in jQuery Mobile, you can bind to the pageinit event.

You can save a ref to the clicked button and use it in success and error handlers like this:

$(document).on("pageinit", "#page1", function(){
    $(document).on("click", "a.sabPauRes", function(event){
        event.preventDefault();
        //Save a ref to the clicked button
        $this = $(this);
        $.ajax({
            type: "GET",
            url: this.href,
            cache: false,
            dataType: "text",
            success: function (data){
                // validate the result of the ajax call, update text, change button methods as needed
                if (data == "Success") {
                    $this.find(".ui-btn-text").text("Updated");
                } else {
                    $this.find(".ui-btn-text").text("Failed");
                }
                $("#resultLog").html("Result: " + data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $this.find(".ui-btn-text").text("Error");
                $("#resultLog").html("Error Calling: " + $this.attr("href") + "<br />HTTP Code: " + jqXHR.status + " " + jqXHR.statusText);
            }
        })

    });
});

Here is jsFiddle

@user2012899 Did it help? Do you need more help with the question? — peterm, Feb 14 '13 at 20:11

jQueryMobile - looping each button to change text of nested tag on click with ajax

2 Answers2