I found the below script here but wanted to know if it is posible to preload multiple pages with the same script. The reason is I want to preload some forms that will be hold in fancybox and it takes too long to load. Using this script help load the form much faster (it works) but I don't know how to make it work for multiple pages.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery().ready(function () {
$.get('index2.html', function(data) {
jQuery("#index2content").html(data);
});
});
</script>
<div id="index2content"></div>
This script loads the page "index2.html" and puts its content into the div#index2content when the DOM is ready.
So, if you want to load multiple pages, you can do the following:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery().ready(function () {
$.get('index2.html', function(data) {
jQuery("#index2content").html(data);
});
$.get('index3.html', function(data) {
jQuery("#index3content").html(data);
});
$.get('index4.html', function(data) {
jQuery("#index4content").html(data);
});
});
</script>
<div id="index2content"></div>
<div id="index3content"></div>
<div id="index4content"></div>
Three options:
a) Setup an API that would serve the whole html, then just get the data using $.AJAX, witch would be a bad practice because of overload
b)
<script>
var html = '<?php echo $html_file;?>';
jQuery("#index2content").html(html);
</script>
c)
<iframe id="data" style="display:none" src="your document">
</iframe>
<script>
$("#data").load(function(){
$("#index2content").html($("#data").contents().find("body").html());
$("#data").remove();/detach the iframe
});
</script>
Related
I'm trying to lazy load genius' lyrics of a song at the end of my post. I discovered that jquery allows you to do that but my code isn't working. What am I doing wrong?
The page : https://soundsirius.digitalpress.blog/golden-rule-trust/
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/eisbehr-/jquery.lazy#1.7.10/jquery.lazy.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/eisbehr-/jquery.lazy#1.7.10/jquery.lazy.plugins.min.js"></script>
<script>
$(function() {
$("div.rg_embed_link").lazyload({
effect : "fadeIn"
});
});
</script>
I have a <script type="text/html"> like below:
<script type="text/html" id="id">
// I want to import HTML from a file here
</script>
Please suggest any other solution than <object>, <iframe> and <embed>
Those tags are messing up my CSS as they insert their own HTML, BODY and other elements.
I would prefer NOT using jQuery. Although not so adamant about it.
EDIT:
script type="text/html" is MUST as I am using templates to route between the pages. And the template is identified by the "id" of this script type="text/html" element.
If you do consider utilizing jQuery, .load() will do the trick:
$( "#id" ).load( "path/to/file.html" );
JSFiddle illustration
If your file is on the same domain, I suggest you use ajax to recover it.
Like this:
<div id="wrapper"></div>
<script type="text/javascript">
var remote_html_container = jQuery("#wrapper");
jQuery.ajax({
url: "my-page-url",
success: function(data){
remote_html_container.html(data);
}
});
</script>
What it does is load the page's output through jQuery and "paste it" into the div#wrapper.
EDIT:
It's indeed way easier with the load function:
<div id="wrapper"></div>
<script type="text/javascript">
jQuery("#wrapper").load("my-url.html");
</script>
I am creating an application that may become very large over time. So in order to keep things simple, we have decided to keep Javascript (mostly jQuery code), CSS and html for one particular feature in one file. for example, if upload is a function, then we have all the jQuery validation and css, html for upload in one file (without head and html tags).
We have a home dashboard in which a click handler will load all the links by ajax and append to the designated DIV of class indicated by additional attribute in links called "whereTOadd". so if a link has its "WhereTOadd" attribute set to ".here" and href set to upload.php then the contents of upload.php will be added to a div of class 'here' in the same page. it is done using script given below.
But the problem i am facing is that I need to include jQuery file again in every file to get the codes working, which is a terrible thing. What can be done to avoid this?
This is html of my dashboard:
<html>
<head>
..
<script src="Path-to-jquery-min-file.php" ></script>
<script>
$( document ).ready(function(){
$(document).on("click","a",function(e){
if( $(this).attr('href'))var ajaxurl = $(this).attr('href').valueOf();
if( $(this).attr('whereTOadd'))
var target = $(this).attr('whereToadd').valueOf();
/*for ajax request */
var options= {
type: 'GET',
url: ajaxurl,
dataType: 'html',
success: function (html, textStatus){
$(target).empty().append(html);
},
error: function(xhr, textStatus){
alert('error');
}
}
$.ajax(options);
return false;
});
});
</script>
</head>
<body>
<a href="upload.php" >Upload data</a>
<div class=".here" ></div>
</body>
upload.php contains:
<script type="javascript" >
$('body').append('load successful!');
</script>
This setup will not work until I make change in upload.php as:
<script src="Path-to-jquery-min-file.php" ></script>
<script type="javascript" >
$('body').append('load successful!');
</script>
Please help in solving this because loading jQuery again and again in the same page may cause errors and conflicts. Please suggest me a better approach to what I am doing.
Thanks
I have javascript, that loads new posts on website from database before :
<script type="text/javascript">
function LoadContent() {
patch = window.location.toString();
if (patch!== undefined && patch=="http://i-sc.ru/" || patch=="http://i-sc.ru/index.php") {
$.ajax({
url: patch,
success: function(content) {
$('#dle-content').html($('#dle-content', content).html());
}})}
setTimeout("LoadContent()", 50);
}
</script>
<script type="text/javascript">
$(document).ready(function(){
LoadContent()
});
</script>
And after i have set up script for
<script type="text/javascript" src="js/jquery.fancyzoom.js"></script>
that i put in <head>
set up:
<script type="text/javascript">
$(function() {
//Set the default directory to find the images needed
//by the plugin (closebtn.png, blank.gif, loading images ....)
$.fn.fancyzoom.defaultsOptions.imgDir='../images/'; //very important must finish with a /
$('a.tozoom').fancyzoom({Speed:0});
$('a').fancyzoom({overlay:0.6});
//new rev > 1.2
//apply fancyzoom effect on all image whose class is fancyzoom !!
$('img.fancyzoom').fancyzoom();
});
</script>
Well, now about the problem:
When the website is loaded, i cant zoom images because of conflict, i think
How to solve it?
Don't reference jquery.js file multiple times, from the second script, remove the reference to the file.
And ensure you are not referencing different versions of .js files any where in your script.
I've updated the script here to give a better example. For $header I've got an anonymous function now returning $("#header"). Although this works I'm sure its not efficient as it calls $header every time it's used - so its the same as just using $("#header") throughout the code.
What I really want is to store $("header") in a variable. When I try to do this with $header2 (below) it fails. #header is red not blue.
When I use firebug to output lib.page.$header2.selector is correctly displays #header. As you can see the script which calls lib.page.init is at the bottom of the DOM.
Any ideas?
<script type="text/javascript">
var lib = {
page : {
$header : function() { return $("#header")},
$header2 : $("#header"),
init: function() {
lib.page.$header().css("background","red");
lib.page.$header2.css("background","blue");
console.log(lib.page.$header2.selector);
}
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<em>Example!</em>
</div>
</div>
<script type="text/javascript">
$(function() { lib.page.init(); });
</script>
</body>
Because when you define $header : $('#header') that element is not available? and when you call lib.page.init it is? I am not sure when you call lib.page.init, but I bet it's in $(document).ready() right? And you define the object literal before the dom is ready.
Ok, your div#header is not available by the time you want to assign it to $header, you have two options and I will show you the best option first. It's what I meant with 'put all scripts at the bottom'!
<head>
<!-- dont put scripts here if you can avoid it, it's bad! -->
</head>
<body>
<div id="wrapper">
<div id="header">
<em>Example!</em>
</div>
</div>
<!-- keep scripts at the end of the page just before the </body> tag -->
<script type="text/javascript">
var lib = {
page : {
// div#header is available
$header : $("#header"),
init: function() {
lib.page.$header().css("background","red");
}
}
}
// you don't need onDomReady anymore.
lib.page.init();
</script>
</body>
Another option if you want to keep scripts in the header, is to assign $header in your onDomReady call.
<script>
// create lib etc here
$(function(){ // this is an onDomReady call in jQuery
lib.page.$header = $('#header');
lib.page.init();
});
</script>
"This happens because the variables are instantiated at the time the script is interpreted.
So at the time of the parser gets to the script the $("#header") isn't in the DOM yet."