当我滑动删除列表项时,会在一瞬间消失,然后返回

时间:2018-03-27 04:47:36

标签: javascript jquery

这是我的代码,当我滑动列表项时消失但后来又回来了?

目的是让用户滑动。然后,不仅可以直观地删除列表项,还可以通过调用PHP脚本从我的数据库中删除列表项。一切都很好,但删除的列表项目回来了。请帮助我在这里疯狂!我试图删除所有个人信息,如果您需要更多信息,请告诉我。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">


<style>
/* Left transition */

li.left {
    -webkit-transition: -webkit-transform 250ms ease;
    -webkit-transform: translateX(-100%);
    -moz-transition: -moz-transform 250ms ease;
    -moz-transform: translateX(-100%);
    -o-transition: -o-transform 250ms ease;
    -o-transform: translateX(-100%);
    transition: transform 250ms ease;
    transform: translateX(-100%);
}
/* Right transition */
li.right {
    -webkit-transition: -webkit-transform 250ms ease;
    -webkit-transform: translateX(100%);
    -moz-transition: -moz-transform 250ms ease;
    -moz-transform: translateX(100%);
    -o-transition: -o-transform 250ms ease;
    -o-transform: translateX(100%);
    transition: transform 250ms ease;
    transform: translateX(100%);
}
/* Border bottom for the previous button during the transition*/
li.left a.ui-btn, li.right a.ui-btn {
    border-top-width: 0;
    border-left-width: 1px;
    border-right-width: 1px;
}
li a.ui-btn.border-bottom {
    border-bottom-width: 1px;
}
/* Hide the delete button on touch devices */
ul.touch li.ui-li-has-alt a.delete {
    display: none;
}
ul.touch li.ui-li-has-alt a.ui-btn {
    margin-right: 0;
}
/* Styling for the popup */
#confirm p {
    text-align: center;
    font-size: inherit;
    margin-bottom: .75em;
}
</style>
<script>


</script>
</head>
<body>
<div data-role="page" id="demo-page" data-title="hem" data-url="demo-page">
  <div data-role="header" data-position="fixed" data-theme="b">
   <center> <br><font size="+3">hqaw</font></center><br>
    <a href="#demo-intro" data-rel="back" data-icon="carat-l" data-iconpos="notext">Back</a> <a href="#" onClick="window.location.reload()" data-icon="back" data-iconpos="notext">Refresh</a> </div>
  <!-- /header -->
  <div role="main" class="ui-content">
    <ul id="list" class="touch" data-role="listview" data-icon="false" data-split-icon="delete">
      <li data-role="list-divider">
        <font size="+2">Pick Ups</font>
      </li>


                                <li id='25'><a href='#popup_25' data-rel='popup'>
                                <h2 class='Name'>11151511</h2>
                                <p>07.00 AM</p>
                                <p><strong>sosaville</strong></p>
                                <p>sammyc</p>
                                </a></li>     
      <li data-role="list-divider">
        <font size="+2">Drop Offs </font>
      </li>

      <br><center><table width='80%'><tr><td><p><h2>No body knows.</h2></p></td></tr></table></center>      
    </ul>
  </div>
  <!-- /content -->

  <div data-role="footer">
    <div data-role="navbar">
      <ul>
        <li><a href="main.php" data-ajax="false"><font size="+2">Main Menu</font></a></li>
      </ul>
    </div>
    <!-- /navbar --> 
  </div>
  <!-- /footer --> 
 <div id='popUps'>
  <div id ="popup_25" class="ui-content" data-role="popup" data-theme="a">
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
    11151511<br><br><a href='https://maps.google.com/?q=samon, dallas, TX, USA'>12005 Dallas Parkway, dallas, TX, USA</a>
<br><br><Br><a href='tel:212-121-2121'>212-121-2121</a><br>Wants to be picked up at: 07.00 AM<br></div>  </div>
  <div id="confirm" class="ui-content" data-role="popup" data-theme="a">
    <p id="question">Are you sure you want to add:</p>
    <div class="ui-grid-a">
      <div class="ui-block-a"> <a id="yes" class="ui-btn ui-corner-all ui-mini ui-btn-a" data-rel="back">Yes</a> </div>
      <div class="ui-block-b"> <a id="cancel" class="ui-btn ui-corner-all ui-mini ui-btn-a" data-rel="back">Cancel</a> </div>
    </div>
  </div>
  <!-- /popup --> 
</div>

<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    ///#########################PRIVATE
  };
  firebase.initializeApp(config);


var dbRef = firebase.database().ref().child('update_tor');
  //dbRef.on('value', fRefresh());


var isInitialValue = true;
dbRef.on('value', function(snapshot) {
  if (isInitialValue) {
    isInitialValue = false;
  }
  else {


       $.ajax({
      type: "GET",
      url: "waitingData.php",
      success: function(data){
          $('#list').empty().append(data); 

            },

      complete: function() {

           $('#list').listview('refresh');
          onPageLoad();

        }
    });


      $.ajax({
      type: "GET",
      url: "waitingData.php?popUps=1",
      success: function(data){
          $('#popUps').empty().append(data); 
          $('#popUps').trigger("create");
            }
      });
  }
});

  $( document ).on( "pagecreate", "#demo-page", function() {
    // Swipe to remove list item
    $( document ).on( "swipeleft swiperight", "#list li", function( event ) {
        var listitem = $( this ),
            // These are the classnames used for the CSS transition
            dir = event.type === "swipeleft" ? "left" : "right",
            // Check if the browser supports the transform (3D) CSS transition
            transition = $.support.cssTransform3d ? dir : false;
            confirmAndDelete( listitem, transition );
    });




    // If it's not a touch device...
    if ( ! $.mobile.support.touch ) {
        // Remove the class that is used to hide the delete button on touch devices
        $( "#list" ).removeClass( "touch" );
        // Click delete split-button to remove list item
        $( ".delete" ).on( "click", function() {
            var listitem = $( this ).parent( "li" );
            confirmAndDelete( listitem );
        });
    }
    function confirmAndDelete( listitem, transition ) {

        if(!listitem.attr("id")){
            return false;
        }

        // Highlight the list item that will be removed
        listitem.children( ".ui-btn" ).addClass( "ui-btn-active" );
        // Inject topic in confirmation popup after removing any previous injected topics
        $( "#confirm .Name" ).remove();
        listitem.find( ".Name" ).clone().insertAfter( "#question" );
        // Show the confirmation popup
        $( "#confirm" ).popup( "open" );
        // Proceed when the user confirms
        $( "#confirm #yes" ).on( "click", function() {
            // Remove with a transition


            if ( transition ) {
                listitem
                    // Add the class for the transition direction
                    .addClass( transition )
                    // When the transition is done...
                    .on( "webkitTransitionEnd transitionend otransitionend", function() {
                        // ...the list item will be removed

    var TripID = listitem.attr("id");


                $.ajax({
                    type: "POST",
                    url: "response.php",
                    cache: false,
                    data: "DriverID=101&TripID="+TripID,
                    success:  listitem.remove(),
                    error: onError
                });

    // update firebase here
    var updates = {};
  updates['/update_tor/'] = Date.now();
  return firebase.database().ref().update(updates);

                        // ...the list will be refreshed and the temporary class for border styling removed
                        $( "#list" ).listview( "refresh" ).find( ".border-bottom" ).removeClass( "border-bottom" );
                        $( "#list" ).listview( "refresh" );
                    })
                    // During the transition the previous button gets bottom border
                    .prev( "li" ).children( "a" ).addClass( "border-bottom" )
                    // Remove the highlight
                    .end().end().children( ".ui-btn" ).removeClass( "ui-btn-active" );
            }
            // If it's not a touch device or the CSS transition isn't supported just remove the list item and refresh the list

            //
            else {
                listitem.remove();
                $( "#list" ).listview( "refresh" );
            }
            //




        });
        // Remove active state and unbind when the cancel button is clicked
        $( "#confirm #cancel" ).on( "click", function() {
            listitem.removeClass( "ui-btn-active" );
            $( "#confirm #yes" ).off();
        });
    }



});

function onError(data, status)
        {
            alert(error);
           data = $.trim(data);
            $("#notification").text(data)
        } 

  </script>
      <script>
$(document).ready(function(){
    onPageLoad();
     });


</script>


    </body>
</html>

1 个答案:

答案 0 :(得分:0)

您当前的片段: -

  

未捕获的ReferenceError:未定义onPageLoad       在HTMLDocument。 (index.html的:286)