Grab the first tenth Ajax return list
I have a huge aprox 200MB html file (mycartoonlist.html) which I have to grab the AJAX and add it to a specific ID. Here is my ajax:
$(document).ready(function() {
$.ajax({
url: "mycartoonlist.html",
type: "GET",
dataType: "html",
success: function(data, textStatus, jqXHR)
{
$("#cartoonlisting").html(data);
console.log(data);
console.log(jqXHR);
},
error: function (jqXHR, textStatus, errorThrown)
{
alert(textStatus)
}
});
});
The above Ajax generates thousands of lists like:
<div id="1" class="list">Cartoon abc</div>
<div id="2" class="list">Cartoon mnk</div>
<div id="3" class="list">Cartoon klo</div>
......................
<div id="10000988" class="list">Carton zzz</div>
This will be injected into:
<div id="cartoonlisting"></div>
I know I cannot embed all these lists in my #cartoonlisting which will break my browser, so I just want the first tenth to be injected into #cartoonlisting
Any suggestion or comments would be appreciated.
Osh and I cannot execute server side scripts to split mycartoonlist.html into pieces
My decision:
Instead of using the main .ajax, I use the .load () Ajax method, for example:
$(document).ready(function(){
$("#cartoonlisting").load("mycartoonlist.html #1,#2,#4,#5,#6,#7,#8,#9,#10")
});
the above code is just an idea how I am inserting html and selecting some elements from thousands of it. In my case
source to share
You can try adding a Range header to your request, but it won't be as verbose as specifying the number of rows. You will need to know the length of each line, which can be tricky for dynamic content. You can get the file size and then return one tenth of the file size in bytes. Then you will need to clean up any invalid markup before parsing and appending to the DOM.
$(document).ready(function() {
$.ajax({
url: "mycartoonlist.html",
type: "GET",
dataType: "html",
headers: { "Range": "bytes=0-1000" },
success: function(data, textStatus, jqXHR)
{
// clean up data before inserting into DOM
$("#cartoonlisting").append($(data));
console.log(data);
console.log(jqXHR);
},
error: function (jqXHR, textStatus, errorThrown)
{
alert(textStatus)
}
});
});
source to share
I'm amazed that 200MB isn't crashing your browser, but this is a possible solution anyway:
$(document).ready(function() {
// Where do we start and how far do we go?
var start = 20000;
var go = 10;
$.ajax({
url: "mycartoonlist.html",
type: "GET",
dataType: "html",
success: function(data, textStatus, jqXHR)
{
// clear! bzzt
$("#cartoonlisting").html('');
// Loop through the DIVs and see if their index is in your range
$(data).find('div.list').each(function(){
if($(this).index() >= start && $(this).index() <= (start + go)){
$("#cartoonlisting").append($(this).clone());
}
});
console.log(data);
console.log(jqXHR);
},
error: function (jqXHR, textStatus, errorThrown)
{
alert(textStatus)
}
});
});
source to share