这是我的代码,当我滑动列表项时消失但后来又回来了?
目的是让用户滑动。然后,不仅可以直观地删除列表项,还可以通过调用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>
答案 0 :(得分:0)
您当前的片段: -
未捕获的ReferenceError:未定义onPageLoad 在HTMLDocument。 (index.html的:286)