Question

我在一个网站上使用Google Charts和JQuery Mobile。在我的文件中，我有一个表单，它发送一些数据，通过自动完成字段输入。当我提交该表格时，我的图表意外消失。

会导致此行为发生的原因是什么？

这是我的源代码的链接： http://jsfiddle.net/5sea3dgq/1/

以下是代码：

<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Chart</title>
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script src="//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
    <div data-role="page" id="page1">
        <div data-role="header">
            <h1>jQuery Mobile Example</h1>
        </div>
    <div role="main" class="ui-content">
        <form action="test.php" method="post">
            <input name="test" type="text" id="example" />
            <input type="submit" />
        </form>
        <script>
        var maxvals = 2, // anzahl aufzulistender elemente
            counter = 0; // nicht ändern
        var displayCount = 5; // anzahl anzuzeigender elemente
        var values = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
            ];
        function split( val ) {
            return val.split( /,\s*/ );
        }
        function extractLast( term ) {
            return split( term ).pop();
        }
        $("#example").bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).autocomplete( "instance" ).menu.active ) {
                event.preventDefault();
            }
        }).keydown(function(event){
            var terms = split( this.value );
            console.info(maxvals, counter);
            // remove empty bit at the end
            terms.pop();
            if (terms.length < 2)
                $(this).autocomplete("enable");
            else
                $(this).autocomplete("disable");
            counter = terms.length;
        }).autocomplete({
            minLength: 0,
            source: function(request, response) {
                response($.ui.autocomplete.filter(
                    values, extractLast( request.term ) ).slice(0, displayCount) );
            },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function( event, ui ) {
                if (counter == maxvals)
                    return false;
                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                // if one more item is allowed
                if (counter < maxvals - 1)
                    terms.push( "" );
                this.value = terms.join( ", " );
                counter++;
                if (counter == maxvals)
                    $(this).autocomplete("disable");
                return false;
            }
        });
    </script>
    <script>
    // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
    <div id="chart_div"></div>
    </div>
    </div>
</body>
</html>

Answer 1

问题不在于您的代码本身。

使用JQuery Mobile（JQM）时，它会改变一些事情。主要是这些，它改变了表格的处理方式。使用JQM，默认情况下所有表单帖子都是通过Ajax完成的（当您单击“提交”或按Enter键时，您可以在开发人员工具的网络选项卡中观察此行为。）

取自JQM文档：

在jQuery Mobile中，表单提交将自动使用   尽可能使用Ajax，在表单之间创建平滑过渡   和结果页面。为确保您的表单提交符合预期，   请务必在表单元素上指定操作和方法属性。   如果未指定，则该方法将默认为get，并且操作将为   默认为当前页面的相对路径（通过   $ .mobile.path.get（））

表单也接受转换的属性，就像锚点一样   作为数据转换=＆＃34; pop＆＃34;和数据方向=＆＃34;反向＆＃34;。提交一份   没有Ajax的表单，你可以全局禁用Ajax表单处理，   或通过data-ajax =＆＃34; false＆＃34;属性。目标属性   （如在target =＆＃34; _blank＆＃34;）也在表格上受到尊重，并且会   默认为浏览器在表单时处理该目标   提交。请注意，与锚点不同，不允许使用rel属性   形式。

要解决您的问题，您有几个选择：

使用Ajax函数发布表单，这样您的图表就不会被重新加载。
将data-ajax="false"属性和值添加到表单中（这将导致传统的表单POST）。

您可以在以下网站上详细了解此行为：

JQuery Mobile表单提交导致Google Charts消失

1 个答案: