how to get data in jquery append and prepend from an xhtml page
Question
I was trying to load more than one html/xhtml/xml pages into a webpage. this is the method i am following
This is my base page
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
var lastScrollTop = 0;
var indexup = 4;
var indexdown = 4;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
console.log($(window).scrollTop()+ " <><><> " + $(window).height()+" === "+$(document).height());
// downscroll code
var total = $(window).scrollTop()+$(window).height();
var diff = Math.abs(total-$(document).height());
if(diff<=2) {
// alert("bottom!");
indexdown = indexdown+1;
if(indexdown>7)
{
alert("This is the last page")
}
else
{
appendNext(indexdown);
}
}
} else {
// upscroll code
if ($(window).scrollTop() == 0)
{
console.log($(window).scrollTop() + $(window).height()+" === "+$(document).height());
// alert('Scrolled to Page Top');
indexup = indexup-1;
if(indexup==0)
{
alert('This is the first page');
}
else
{
appendPrevious(indexup);
}
}
}
lastScrollTop = st;
});
function appendNext(index)
{
$.get("html/01.PAGE."+index+".html", function (data) {
$("#appendToThis").append(data);
});
}
function appendPrevious(index)
{
$.get("html/01.PAGE."+index+".html", function (data) {
var old_height = $(document).height(); //store document height before modifications
var old_scroll = $(window).scrollTop();
$("#appendToThis").prepend(data);
$(document).scrollTop(old_scroll + $(document).height() - old_height); //restore "scroll position"
});
}
</script>
</head>
<body>
<div id="loadDiv">
</div>
<script type="text/javascript">
$("#loadDiv").load("xhtml/01.PAGE.4.html");
</script>
</body>
</html>
This is working fine as expected. I am loading 01.PAGE.4.html first, 01.PAGE.5.html is appended after the loadDiv and 01.PAGE.3.html is prepended.
But actually those 01.PAGE.4.html is 01.PAGE.4.xhtml.
I changed the extentions from xhtml to html for testing and found that the jquery can load xhtml codes, but it cannot append or prepend the same.
That is when i tried to re-run the code as xhtml the code gave me this error
uncaught typeerror cannot read property 'ownerdocument' of null jquery when checked the console,
here is my doubt how to get the value from #Document
When i logged it out it has the entire page data, but i dont know how to append or prepend it with jquery. But even for the xhtml page load function of jquery is working. Somebody please help
how to get data from #Document for jquery append and prepend?
1 answers
solution1
1 ACCPTED 2018-10-29 06:12:58
$.get ("xhtml/01.PAGE.xhtml", function (data)
{
$("#appendToThis").html($(data).children());
}, 'xml');
Try this. Refer https://api.jquery.com/jquery.get/ for more details.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.