2

ボタンのクリックで外部呼び出しを行い、成功を反映するようにボタンを更新するページがあります。ajax 呼び出しは適切に機能しますが、ページに多数のボタンがある場合、ボタンのテキストを操作するのが困難です。

それがページ上の唯一の項目である場合は簡単に照合でき $(".sabPauRes.ui-btn-text").text("Updated");ますが、each 関数を使用しているときに $(this) を使用してそれを指す方法がわかりません。「最も近い」について少し読みましたが、私が望むことを達成していないようです（または単に間違っているだけです）。

以下コードサンプル！

$(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>
4

2 に答える 2

0

まず最初に。jQuery Mobile を使用する場合は、jquery Ready ハンドラの使用を中止してください。代わりに、ページにイベントを指定idして使用してください。pageinit()

pageinit = DOM 準備完了

人々が jQuery で最初に学ぶことの 1 つは、DOM の準備が整うとすぐに $(document).ready() 関数を使用して DOM 固有のコードを実行することです (これは多くの場合、onload イベントのずっと前に発生します)。ただし、jQuery Mobile サイトとアプリでは、ページが要求され、ユーザーがナビゲートするのと同じ DOM に挿入されるため、DOM 準備完了イベントは最初のページに対してのみ実行されるため、あまり役に立ちません。jQuery Mobile で新しいページが読み込まれて作成されるたびにコードを実行するには、pageinit イベントにバインドします。

クリックされたボタンに参照を保存し、次のようsuccessにerrorハンドラーで使用できます。

$(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);
            }
        })

    });
});

ここにjsFiddleがあります

于 2013-02-10T20:58:24.370 に答える
0

Change button text jquery mobile内で答えを見つけました

$(this) を変数に割り当てると、以下に示すように .text() 関数で参照できます。

$(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);

    }
})

}))

于 2013-02-10T20:50:53.633 に答える