1

現在、jquery モバイル アプリを構築しようとしています。結果ページを指すフォームがあります。いくつかのjsonを取得し、フォームが送信したものに基づいていくつかの数値を計算する関数を添付しました。私の問題は、結果ページが表示されたときに、ページを更新するまで実際の計算結果が表示されないことです。

なぜこれが起こるのかについて調査したところ、JQMがajax経由でページをロードしていることがわかりました。フォームに data-ajax="false" を追加すると、結果ページは正常に機能しますが、結果ページで jqm が提供するトランジション効果を実際に使用したいのですが、最小では効果はありませんが、フォームは機能するか、効果とフォーム確かにこれを行う方法があるに違いありませんか？

結果ページのフォーム :

<form action="results.html" method="get" id="calculator" data-ajax="true" data-transition="flip">

次に、body タグの直前の結果ページで、次のスクリプトを呼び出します。

$('#resultsPage').live('pageinit', function(event) {
    getFigures();
});


function getFigures() {

    var propertyValue = getUrlVars()["propertyValue"];
    var quoteType = getUrlVars()["quoteType"];

    console.log(propertyValue);
    console.log(quoteType);

    $.getJSON(serviceURL + 'calculator.php?value=' + propertyValue, function(data) {

        figures = data.figures;
        $.each(figures, function(key, val) {

            //console.log(figure);
            //console.log('Key: ' + key + '  Val: ' + val);

            if (quoteType == 'buying') {

                if (key == 'total') {
                    $('#tfoot').append('<tr><th scope="row">' + key + ' </th><td><strong>&pound;' + val + '</strong></td></tr>');
                } else if (key != 'value') {
                    $('#tbody').append('<tr><th scope="row">' + key + ' </th><td>&pound;' + val + '</td></tr>');
                }

            } else {

                if (key == 'total') { // Total is wrong need to filter results from server for quoteType
                    $('#tfoot').append('<tr><th scope="row">' + key + ' </th><td><strong>&pound;' + val + '</strong></td></tr>');
                } else if (key != 'completion' && key != 'coal' && key != 'local' && key != 'landRegistry' && key != 'stampDuty') {
                    $('#tbody').append('<tr><th scope="row">' + key + ' </th><td>&pound;' + val + '</td></tr>');
                }

            }

        });

        $('#value').append('&pound;' + data.figures.value);

    });

    //$('#figureList').listview('refresh');

}

トランジション効果を使用して、まだ作業フォームを持っている方法を知っている人はいますか?

4

2 に答える 2

0

フォームを送信する前に検証を追加して、ロジックを保持し、通常どおり ajax を使用してフォームを送信できます。

以下に例を示します: http://shadym.blogspot.in/2011/03/client-side-form-validation-using.html

お役に立てれば！

于 2013-03-12T08:49:33.537 に答える