Question

我目前正在尝试构建一个jquery移动应用程序。我有一个指向结果页面的表单，我附加了一个函数，它引入了一些json并根据表单提交的内容计算了一些数字。我的问题是，当显示结果页面时，它不会显示实际的计算结果，直到您刷新页面。

我做了一些关于为什么会发生这种情况的研究，并发现它是通过ajax加载页面的JQM。当我向表单添加数据-ajax =“false”时，结果页面工作正常但是我真的想在结果页面上使用jqm提供的过渡效果，因为在min它没有任何效果但是表单工作或效果和表单确实有必要有办法做到这一点吗？

结果页面表单：

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

然后在关闭正文标记之前的结果页面上，我调用此脚本：

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

}

有谁知道如何使用过渡效果并且仍然有工作表单？

Answer 1

您可以在提交表单之前添加验证，您可以保留逻辑，然后像往常一样使用ajax提交表单。

这是一个例子： http://shadym.blogspot.in/2011/03/client-side-form-validation-using.html

希望这有帮助！

Answer 2

如果你想使用jquery过渡效果您只能使用数据转换属性

离。数据过渡= “褪色”

使用data-ajax =“true”提交jquery移动表单

2 个答案: