Lazy Load For Blog Posts - javascript

So I'm trying so so hard to find something for JavaScript or jQuery where I can use a lazy loading plugin or SOMETHING that goes a little like this:
if .post IS_NOT_IN_VIEW do{
dont_load();
}else{
load();
}
I could've made that better xD. But hopefully you can understand what I mean by that. I just want something that'll STOP the loading of my content with a class of "post" but it'll load it when the user has the content in view.
Thank you if you can help... I had already posted a question like this but people just had problems with the post and I guess people just didn't even bother to look at it seeing it had 6 or 7 comments...

I think ajax addresses your question.
http://api.jquery.com/jquery.ajax/
You can load resources using this.
HTML:
$.ajax({
method: "get",
url: "some_url",
dataType: "html"
})
.done(function( data ) {
alert( "HTML content: " + html);
});
Or for json just change the dataType to json.
If you want to lazily load javascript:
How to dynamically insert a <script> tag via jQuery after page load?
Has some helpful answers.

Related

Trouble getting XML data to show on HTML using jQuery

I'm working on my new PC builds website and I have trouble getting XML tag with specific attribute to show up in my HTML <p> element. My XML looks like this:
<?xml version="2016.6" encoding="UTF-8"?>
<parts>
...
<HDDs>
<hdd id="1">
<name>DiskOne</name>
<price>50</price>
</hdd>
<hdd id="2">
<name>DiskTwo</name>
<price>40</price>
</hdd>
</HDDs>
...
</parts>
I want to find tag <hdd> with attribute id="2" in above XML and show its child's name content in HTML <p> element, which has the id="test-xml". I used this jQuery code to get data from XML and show that in <p>:
function loadHDDs(name)
{
$.ajax({
type: "GET",
url: 'data/parts.xml',
dataType: "xml",
success: parseHDDsXml
});
}
function parseHDDsXml(xml, name)
{
$(xml).find('hdd[id="2"]').each(function(){
var name;
name = $(this).children('name').text();
$("#test-xml").text(name);
});
}
I found the code in another website and I don't really know, what do I need to write in brackets after loadHDDs, so I wrote name. I don't know how to cleanly make the script execute when the page is loaded, so I added onload="loadHDDs();" to the <body> element on my page. I use Google Chrome debugger to find errors. When I tested my page locally, on my computer, debugger, of course showed that XMLHttpRequest cannot load. I uploaded my project to the server and I receive no errors in the Chrome debugger at all, but the text in <p> element doesn't change to the XML text. What am I doing wrong? Maybe something is wrong with my script? Or XML document? Maybe I just don't know to execute jQuery script and onload just doesn't work? Please, help me! I'm a beginner in jQuery and Javascript, so I kindly ask you to show me the easiest and most understandable way of fixing the problem.
Thanks in advance!
EDIT: I don't have enough reputation to comment. I added error function to my Ajax as Nayeri suggested and now I get an error that loadHDDs is not defined. I don't understand that. We can clearly see function loadHDDs(name) in my script. I have checked the spelling a hundred times.
Add error function to your ajax to see your errors :
$.ajax({
type: "GET",
url: 'data/parts.xml',
dataType: "xml",
success: parseHDDsXml,
error : function (a,b,c){
console.log(a, b, c)
}
});
then your xml file seems is wrong so Remove the <?xml version="2016.6" encoding="UTF-8"?> line of your xml file

How to load ajax data into DIV without using .get() or .load()?

I have been given a URL by a partnering company to load content into a DIV. We put the following onto a page:
<div id="catalog"></div>
And then use .get() to put content into it. A problem arises due to the fact that we're using jQuery 1.3.2 on some of the older sites, and the engineering department is not going to update that any time soon. Both .get() and .load() are giving me errors.
I tried things such as:
$(document).ready(function () {
$.ajax("http://appserv.ourpartneringcompany.com/catalog/?acct=12345",function(data){
$('#catalog').html(data);
});
});
The error goes away, but the data doesn't load. Could I use jQuery.ajax()?
I don't think jQuery 1.3.2 supports that syntax.
Try modifying to:
$.ajax({
url: "http://....",
type: "GET",
success: function(data){
$('#catalog').html(data);
}
});

Why does my JS/JQuery code only work in a web browser's console?

The $(element).scroll(function(){}); function isn't working for me when I put it into a js file but when I enter it into the console (just the scroll func), it works just fine.
I'm trying to do a scrolling pagination.
I've looked through my other js files and the only thing that I think could be conflicting is another one of the files has a $(document).ready(function(){}) but I'm pretty sure that's not the problem. I'm also using Dropkick to make pretty dropdowns but I doubt that's it either.
Here's the code, almost verbatim. It's basic for now until I can figure out how to get it to load.
$('#main').scroll(function(){
if(($('#main').prop('scrollHeight'))==
($('#main').scrollTop()+$(document).height()-10)){
//^there's a strange 10px empty space that needs to be accounted for
$('#loading').show();
$('#main').css('overflow','hidden');
addMore();
}
});
$(document).ready(function(){
addMore();
});
addmore.counter=0;
function addMore(){
$.ajax({
async: 'true',
url: 'http://mywebsite.com/bc/get',
type: 'post',
data: ({'offset':(addmore.counter)}),
success: function(data) {
$('#scrollingpagination').append(data);
$('#loading').hide();
$('#main').css('overflow','scroll');
addmore.counter++;
}
});
}
And here's the HTML (not verbatim, but same idea)
<!--I'm only including the "main" div that shows the content.-->
<div id='main'>
<div id='scrollingpagination'></div>
<div id='loading'></div>
</div>
Thanks guys, I really appreciate it!
try keeping
$('#main').scroll(function(){
......
})
inside document.ready. i think it was called before the dom was ready

loading html page inside div

how can I load an html page inside a div. With the 'object' tag it's loading, but I think it's not a good approach. It is not an external file. Is dojo good for this?
Use jquery
$("#mydiv").load("myexternalfile.html");
I'm not completely sure what you're looking for, but if you're wishing to display an HTML document inside another HTML document then I think the only way to do this is to use an iframe. Check out this tutorial: http://www.designplace.org/tutorials.php?page=1&c_id=1
Perhaps you could load the HTML document and strip away the HEAD and wrapping BODY elements and then insert the code into the DIV element.
EDIT: Ah, no iframes you said. Well, then I propose the latter. ^^
No reason to use jQuery just to load content to your page (e.g. only to one div) if there is no another tasks which need framework's functions :)
This should be done with AJAX basics.
Check this out: http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first
This also works... using dojo...
<script type="text/javascript">
var url = dojo.moduleUrl("dijit.form", "help.html");
dojo.xhrGet({
url: url,
load: function(html){
dojo.byId("mycontent").innerHTML = html;
}
});
</script>
<div id="mycontent">
</div>
Update:
In Dojo 1.7+, use require.toUrl instead of dojo.moduleUrl
You have to use jQuery with load() method.
Here jQuery reference about load method: http://api.jquery.com/load/
You can still use jquery to load the content through an ajax call. Take the result and delete <body> and everything before it, and </body> and everything behind it. You can use regex to make sure you include any attributes of the body tag.
Then you're left with the raw body html, which you can add to the div using jQuery.
jQuery.ajax({
url: 'page.html',
success: function(data, textStatus, XMLHttpRequest) {
data = data.replace(/.*<body.*?>/gi,'');
data = data.replace(/</body>.*/gi,'');
jQuery('#myDiv').html(data);
}
});
My regex is a bit rusty so you might have to tweak that :)

Automatically initialize rich text editor on top of all textarea's, including ones that are loaded via ajax

I'm developing an ajax heavy web app, and would like to have textarea's (with class="ui-richtext") automatically initialize TinyMCE.
This is easy for textarea's that are loaded normally, but how about for content that is loaded AFTER the fact using ajax?
I was thinking something along these lines: (i'm using jquery)
$("textarea.ui-richtext").live("ajaxComplete", function()
{
$(this).tinymce({...});
});
Unfortunately this doesn't seem to work. Any ideas?
This is my first post, let me know if I need to add more info
Live is limited to a small number of events.
You can do something like this though:
$.ajax({
url: 'url/here',
success: function(data){
var $data = $(data).("textarea.ui-richtext").tinymce();
$('#mydiv').append($data);
}
});

Categories