在页面之间导航后如何在jquery mobile中停止重复数据

Posted

技术标签:

【中文标题】在页面之间导航后如何在jquery mobile中停止重复数据【英文标题】:How to stop duplicate data in jquery mobile after navigationg between pages 【发布时间】:2016-08-18 11:28:40 【问题描述】:

我正在 jQuery Mobile 中创建一个聊天应用程序。问题是当您在页面之间导航并在提交数据时返回聊天页面时,数据会根据在其他页面之间导航的次数重新发送 当我执行整页刷新时,数据只根据需要发送一次。

我已尝试将data-ajax = false 添加到链接(按钮)的href 中,但它仍然不起作用?

html代码:

<form id="form_message_user" method="post"    
action="#user_requestmoreinfo_page
  ">
  <div data-inset="true">
 <label for="requestmessage" class="ui-hidden-accessible"></label>
     <textarea cols="40" rows="6" name="requestmessage" 
 id="text_user_message" placeholder="Type message to send "></textarea>
  </div>
  <input type="submit" value="submit" id="submitmessage" />

 </form>

表单位于带有

的页面上
<div data-role="page" id="user_requestmoreinfo_page" data-theme="e">

提交代码:

    $(document).on('pageshow', '#user_requestmoreinfo_page',function(e)
        var id_from = localStorage.loggedin_id;
        var id_to = localStorage.user_schoolls_id;
var message = $("#text_user_message").val();

$('#form_message_user').on('submit', function(e)
e.preventDefault();
 if(message > 0 )
            // Send data to server through the Ajax call
            // action is functionality we want to call and outputJSON is our data
                $.ajax(url: '127.0.0.1/php/send.php',
                    data: message:message,id_from:id_from,id_to:id_to,
                    type: 'post',                   
                    async: 'true',
                         dataType: 'json',
                    beforeSend: function() 
                        // This callback function will trigger before data is sent
                        $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
                    ,
                    complete: function() 
                        // This callback function will trigger on data sent/received complete
                        $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
                    ,
                    success: function (result) 
                    console.log(result);
                    ,
                    error: function (error) 
                        // This callback function will trigger on unsuccessful action                
                        console.log(error);
                    
                );                   
         else 
            alert('Please enter the message');
                   
        return false; // cancel original event to prevent form submitting
    );

  );

成功时,console.log() 会根据到达页面前的页面导航次数显示 json 数据(#user_requestmoreinfo_page);

示例: 如果我必须在其他页面之间导航 3 次,console.log() 将显示 3 次的输出

【问题讨论】:

reload 仅在 'url' 参数是 URL (api.jquerymobile.com/pagecontainer/#method-load) 时有效。请发布 HTML 表单代码和 jQuery 提交代码。 在处理 id 作为引用时,有没有办法确保重新加载(#..) 在添加事件监听器时将代码包装在 pagecreate 中,而不是 pageshow 【参考方案1】:

我可以想到您遇到这种行为的两个原因。

1) 代码乘法。将代码绑定到pagecreate,而不是pageshow,因为每次显示页面都会触发后者事件,重复提交代码并引发多个事件。

2) 页面重复。这是 jQM 中的一个众所周知的错误,描述为 here。简而言之,在某些情况下,第一页(及其表单)在 DOM 中是重复的。要修复它,请使用属性 data-url 描述 HTML 文档的路径,并将其放在 page div 中。示例代码:

<div data-role="page" data-url="mysite/path/index.html" id="user_requestmoreinfo_page">

这是对您的代码的修改,添加了用于页面导航的按钮:

示例代码:

$(document).on('pagecreate', '#user_requestmoreinfo_page', function(e) 

  $('#form_message_user').on('submit', function(e) 
    //Cancel default action (https://api.jquery.com/event.preventdefault/)
    e.preventDefault();

    //var id_from = localStorage.loggedin_id;
    //var id_to = localStorage.user_schoolls_id;
    var message = $("#text_user_message").val();

    //Validate
    if(message == "")
      alert('Please enter the message');

    // Send data to server through the Ajax call
    // action is functionality we want to call and outputJSON is our data
    alert("Thank you for your comment.");
    $.ajax(
      url: '127.0.0.1/php/send.php',
      data: 
        message: message,
        id_from: id_from,
        id_to: id_to
      ,
      type: 'post',
      async: 'true', //<- true is default
      dataType: 'json',
      beforeSend: function() 
        // This callback function will trigger before data is sent
        $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
      ,
      complete: function() 
        // This callback function will trigger on data sent/received complete
        $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
      ,
      success: function(result) 
        console.log(result);
      ,
      error: function(error) 
        // This callback function will trigger on unsuccessful action                
        console.log(error);
      
    );

    return false; // cancel original event to prevent form submitting
  );
);
<html>

<head>
  <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

  <div data-role="page" data-url="<mysite>/index.html" id="user_requestmoreinfo_page">
    <div data-role="content">
      <form id="form_message_user" data-ajax="false">
        <label for="requestmessage">Message:</label>
        <textarea data-inline="true" id="text_user_message" placeholder="Type message to send"></textarea>
        <input type="submit" value="Submit" data-inline="true" />
      </form>
      <a href="#second" data-role="button" data-inline="true">Next page</a>
    </div>
  </div>

  <div data-role="page" id="second">
    <div data-role="content">
      <p>
        Second page
      </p>
      <a href="#user_requestmoreinfo_page" data-role="button" data-inline="true">First</a>
      <a href="#third" data-role="button" data-inline="true">Third</a>
    </div>
  </div>

  <div data-role="page" id="third">
    <div data-role="content">
      <p>
        Third page
      </p>
      <a href="#user_requestmoreinfo_page" data-role="button" data-inline="true">First</a>
    </div>
  </div>

</body>

</html>

【讨论】:

【参考方案2】:

我的猜测是,每次处理 #user_requestmoreinfo_page 事件时,您都会将事件处理程序绑定到 #form_message_user 元素。我会尝试添加

$('#form_message_user').off('submit');

直接在之前

$('#form_message_user').on('submit', function(e)
    // function body continues

您也可以尝试使用 .one:

$('#form_message_user').one('submit', function(e)
    // function body continues

根据文档,这应该与 .off() 后跟 .on() 具有相同的效果:

http://api.jquery.com/one/

【讨论】:

这在 jqm 页面重复错误的情况下不起作用,因为在 DOM 中会有两个具有相同 ID 的表单。 感谢您的解决方案,我添加了 .off(submit) 和 .one(submit)。 我发现的另一个解决方案是添加 pageinit 而不是 pageshow 好奇为什么我的答案被否决,当 OP 接受它作为答案时。 @GEOFFREYMWANGI,如果我的回答是可以接受的,我会得到赏金吗?谢谢!

以上是关于在页面之间导航后如何在jquery mobile中停止重复数据的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 OnClick 事件设置 Jquery Mobile 导航

如何在不在页面底部的 div(页面的一部分)中添加 Jquery Mobile 导航栏?

导航Jquery Mobile + PhoneGap

jQuery Mobile 面板导航冻结/挂起

JQuery Mobile 1.4.0 - 从 Javascript 打开多页模板页面 [重复]

jQuery mobile - Javascript,param传递,css文件组织