I'm loading remote data using dynamic script tags and JSON. the remote page that I'm displaying on my website has a div in it that I use to load content into.
The problem is the javascript functions do not see the div as the page loads because it is remote data. If I set a timeout of about 300, it usually works and my javascript can see the div. But sometimes it takes longer and it breaks the javascript.
I'm tring this:
function load_content() {
if (document.getElementById('remote_div') == null) {
setTimeout('load_content()', 300);
} else {
document.getElementById('remote_div').innerHTML = 'Content goes here'
}
}
but it just doesn't work. What am I doing wrong?
You may want to do this using setInterval. Something like:
var intrval = setInterval( function(){
if(document.getElementById('remote_div')) {
load_content();
clearInterval(intrval);
}, 50);
function load_content() {
//loading content here
}
This way you don't have to estimate the loading time. load_content is executed when div#remote_div can be found in the DOM tree.
Edited based on comments, forgot to assign the interval, so it wouldn't ever clear indeed.
Are you using iframe?
If so, try
document.getElementById('YOUR_IFRAME_ID').contentWindow.document.getElementById('remote_div')
Related
We got a simple jQuery script on Drupal site that injects a div class with content:
(function($) {
Drupal.behaviors.myHelpText = {
attach: function (context, settings) {
//code starts
//change placeholder text
$('.form-item-quantity').append('<span class="help-block">For orders over 10 call for volume pricing</span>');
$('.help-block').css("flex-basis", "100%");
//code ends
}
};
})(jQuery);
The page has Drupal Commerce and various product attribute fields that gets processed by Ajax every time selecting an attribute. And when doing that our script injects same duplicate line each time on Ajax load/update.
How to avoid that? We just want jQuery code work once on page load.
Only add the element if it doesn't exist, otherwise do nothing.
(function($) {
Drupal.behaviors.myHelpText = {
attach: function (context, settings) {
if (!document.getElementById('help')) {
$('.form-item-quantity').append(
'<span id="help" class="help-block">For orders over 10 call for volume ricing</span>'
);
$('.help-block').css("flex-basis", "100%");
}
}
};
})(jQuery);
You have to understand that drupal.behaviors fire on page load and when ajax returns results. It is designed this way because you may want your code to run again on the ajax results, for example, if you are updating part of the page via ajax and it needs event listeners applied, or a class added.
The context variable is the key here.
on first page load, the context will be the whole window, but when ajax returns the result, the context will just be what is returned by the ajax.
Knowing this, you should be using context in your jquery selectors.
eg.
(function($) {
Drupal.behaviors.myHelpText = {
attach: function (context, settings) {
//code starts
//change placeholder text
$('.form-item-quantity', context).append('<span class="help-block">For orders over 10 call for volume pricing</span>');
$('.help-block', context).css("flex-basis", "100%");
//code ends
}
};
})(jQuery);
For added protection against something processing multiple times, you can use jquery once(), but this is usually not needed if using the context variable in the selector. jQuery once() separate library that must be loaded.
Why don't use jQuery once? My thought — it's a classic approach. A bunch of examples lives in docs on drupal.org
$('.form-item-quantity').once('help-appended').append('<span class="help-block">For orders over 10 call for volume pricing</span>');
And I'm not sure you need to apply styles via js. A css file is a better place for it. And jquery once should be available in your environment. That's it.
I am working on a project that has a html page that has links to libraries- in addition it dynamically prints part of the page with Jquery replaceWith().
The dynamically printed part includes src to images, etc.
What is happening is the images are not loaded, so the page is not rendering immediately.
I need to somehow get the equivalent of a window.onload event that tells me when the page
has loaded all that stuff, so that I start the code, etc that affects the page.
I have tried tacking it on at the end of the script- that does not seem to work-
any suggestions/ideas anyone?
I have tried window.onload, etc, I am wondering if I attach
$("#content").ready() that would work vs load, or if I have to write a window onload inside the content that is written in by replaceWith(). I have actually tried some of this already and nothing seems to work, but I may be implementing it incorectly.
Thanks!
Note, No html , js appear at original post.
Try below (adjustable) pattern, i.e.g., assign different class to "original content" (.ocontent) , "new content" (.ncontent), check utilizing $.is()
var callback = function (status) {
if (status === false) {
console.log(status);
// new content ready
// do stuff
};
if (status === true) {
console.log(status);
// old content present
// do stuff
};
};
$.when($(".ocontents").replaceWith("<img class=ncontents />"))
.done(function(o) {
callback($("#content *").is(o));
});
jsfiddle http://jsfiddle.net/guest271314/6agJz/
See http://api.jquery.com/is/
I am currently writing some Javascript code that adds some tags across text in an HTML file after the page loads. I use the
window.onload
method for achieving this.
However, I am facing an issue in pages like google plus, where you get more content as you scroll down. Is there a way of calling my JS function when such a page adds more content?
Thanks
Akshay
There are several ways how to get this working. You can either use jquery like this:
$('#mydiv').bind("DOMSubtreeModified",function(){
// your code goes here
alert('changed');
});
Note that this is not supported in IE8( and below).
Or you can run loop and continuously fire the desired code:
var interval = setInterval(function() {
// your code goes here
}, 1000);
Fiddle: http://jsfiddle.net/8RF5r/5/
I want to load an entire website in to my website. I have been able to do this with $(#preview).load("index.php") into my <div id="preview"></div>. What i have troubles accessing here is the background image which is a property of body. I tried making a div tag with a background-image attribute but when i removed the image from my body tag it didnt behave like i wanted to (was not filling the entire space).
My question is this. How can i access something from index.php that can let me either preview the site correctly or copy the attribute from somewhere into the preview background-image attribute?
my code now looks like this, after some extensive try-and-error (more like error-and-error and its getting more and more messy)
$(document).ready(
function() {
$("#check").click(
function() {
var bgd;
$("#preview").load("index.php",
function () {
bgd = $("#bg").css("background-image");
}
);
$("#preview").style.backgroundImage(bgd);
}
);
}
);
Where bg is the id of the div which works as a "substitute" body tag in index.php (aka with the same attributes as body)
Im either far from it, or ridiculously close. Thanks for every piece of advice i can get.
$(document).ready(
function() {
$("#check").click(
function() {
$.ajax({
url: 'index.php',
success: function(data){
data = $('data').html();
$('#preview').html(data);
bg = $('data').find('#bg').css('background-image');
$('#preview').css('background-image',bg);
}
});
}
);
}
);
Two problems here. One with how you're accessing style properties and the other has to do with the asynchronous behavior of load().
Style problem
You'll need to use $("#preview").css('background-image',bgd). The first method you were using could still be kept around by accessing the non-jQuery wrapped element, like so:
$("#preview")[0].style.backgroundImage(bgd);
Async problem
The second issue is that .load() is an asynchronous call that returns immediately. The next line of code gets executed and bdg is (most likely) still undefined. Then when load() completes, the success handler gets executed and bdg gets set to the background of the loaded page, but it's too late!
Moving the $("#preview").css('background-image',bgd) into the success handler will rectify that problem:
$(document).ready(
function() {
$("#check").click(
function() {
var bgd;
$("#preview").load("index.php",
function () {
bgd = $("#bg").css("background-image");
$("#preview").css('background-image',bgd);
}
);
}
);
}
);
I populate many parts of my website using
$("#theDivToPopulate").load("/some/api/call.php", callBackToBindClickEventsToNewDiv);
Where /some/api/call.php returns a built list, div, or some other HTML structure to place directly into my target div. The internet has been running slow lately and I've noticed that the time between a button click (which kicks off these API calls) and the div populating is several seconds. Is there an easy way to globally wrap all the load calls so that a div containing "Loading..." is displayed before the call is even made and hidden once the API call is complete.
I can not simply put the code to hide the div into the callBackToBindClickEventsToNewDiv as some load events have different call backs. I would have to copy the code into each function which is ugly and defeats the purpose. I want the flow of any .load to go as follows:
1) dispplayLoadingDiv()
2) Execute API call
3) Hide loading div
4) do callback function.
The loading div must be hidden first as the callback contains some animations to bring the newly loaded div in nicely.
EDIT:
Expanding on jacktheripper's answer:
var ajaxFlag;
$(document).ajaxStart(function(){
ajaxFlag = true;
setTimeout(function (e) {
if(ajaxFlag) {
hideAllDivs();
enableDivs(['loading']);
}
}, 500);
}).ajaxStop(function(){
ajaxFlag = false;
var load = $("#loading");
load.css('visibility','hidden');
load.css('display','none');
load.data('isOn',false);
});
This way loading is only displayed if the page takes more than 500 MS to load. I found the loading flying in and out real fast made things kind of choppy for fast page loads.
Use the following jQuery:
$(document).ajaxStart(function(){
$('#loader').show();
}).ajaxStop(function(){
$('#loader').hide();
});
Where you have an element called #loader that contains what you want to show when an AJAX request is being performed. It could be a span with text, an image (eg a gif), or anything similar. The element should be initially set to display: none
You do not even need to call the function anywhere else.
Try this
$("#someButtonId").click(function(e){
e.preventDefault();
$("#theDivToPopulate").html("Loading...");
$.get("/some/api/call.php",function(data){
$("#theDivToPopulate").fadeOut(100,function(){
$("#theDivToPopulate").html(data).fadeIn(100,function(){
//Do your last call back after showing the content
});
});
});
});