问题
Spend a couple of days now on trying to get swipe on a php website with dynamic content. I've been looking at jQuery mobile but there is no example out the how to get swipe to work with dynamic content. Anybody that can point in a direction how to accomplish this? Does not have to be jQuery mobile it could be anything as long as they have an example to work after. This is what I've accomplished with jQuery mobile and it of course doesn't swipe nice with animation but do load the content on swipe.
$(document).on('swipeleft', '.ui-page', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
getartikel('1');
}
});
getartikel() is a function that runs an ajax request getting the data from mysql and put it in a div.
function getartikel(id) {
$.ajax({
url: "ajax/getartikel.php",
type: "post",
data: {id:id} ,
success: function (data) {
$("#artikel").html(data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
}
It is a bunch of articles that I want to be able to swipe between. data from the database I just HTML.
Pagecontainer is what I understand I must use but I can't figure out how to get that to work with a ajax call.
done some change to my code but still no slide, now I get Uncaught TypeError: a.split is not a function. It comes up when I add
$.mobile.pageContainer.pagecontainer('change', "#"+sida, {transition: 'slide'});
here is my complete code
<script>
$(document).on("pageshow", function (event) {
getartikellist();
//this get the menue and put into a ul listview with the class artikel
});
$(document).ready(function(){
$(document).on("click", \'[class^=artikel]\', function(event, ui) {
$("#menyn").panel("close");
getartikel($(this).data(\'secid\'));
});
});
</script>
function getartikel(id) {
var sida;
if($.mobile.activePage.attr("id")=="1"){
sida="2";
}else{
sida="1";
}
$.ajax({
url: "ajax/getartikel.php",
type: "post",
data: {id:id} ,
beforeSend: function() {
$.mobile.loading("show");
},
success: function (data) {
$("#innehall"+sida).html(data);
},
complete: function() {
$.mobile.loading("hide");
$.mobile.pageContainer.pagecontainer('change', "#"+sida, {transition: 'slide'});
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
}
Everything works fine until I add the pagecontainer row, It adds the content to the right page and all.
来源:https://stackoverflow.com/questions/49234553/uncaught-typeerror-a-split-is-not-a-function-pagecontainer