jQuery .append() with wait for render - javascript

I'm getting some html from a webservice that I'm appending to a div. This is my success function:
function SucceededCallback(result) {
// get the div element
var RsltElem = $(".placeholder");
// update div inner Html
RsltElem.append(result);
$('.loading-gif').hide();
}
Is there any way I can get .append() not to display until the browser is finished loading and painting it?
I'd rather not use .append(result).slideDown(n) as n could be anything, depending on what the webservice sends me.
Thanks in advance

Consider using
$( document ).ready(function() {
...
});
like so:
$( document ).ready(function() {
//get the div element
var RsltElem = $(".placeholder");
//update div inner Html
RsltElem.append(result);
$('.loading-gif').hide();
});
I don't know what you are painting and when it will complete, so you could also use this:
$(window).bind("load", function() {
// code goes here
});
Code inside the function only runs when the entire page has loaded.

$(window).on('load', function() {
//everything is loaded
});

Related

append in jquery works sometimes and sometimes doesn't

I am trying to append a span element in a div tag using the below code .
$( document ).ready(function() {
$(".rocketchat-widget").append("<span class='tooltiptext'>Chat button</span>");
});
sometimes it works and adds the element.
But sometimes it doesn't load the element.
I am new to jquery so any help would be appreciable
Thank you
Below is what you want, op (shahzad) was including third party widget on page load, as it is a third party widget sometimes it will load early or later, so, needed below code,
$( document ).ready(function() {
$(document).on("click", "[data-state=closed]" , function() { $(this).data('state', 'opened').attr('data-state', 'opened'); });
myVar = setInterval(function() {
if($(".rocketchat-widget").length){
$(".rocketchat-widget").append("<span class='tooltiptext'>Chat button</span>");
clearInterval(myVar);
}
}, 1000);
});

isotope append method removes current elements

I am attempting to append elements to a list using the .load() method to retrieve elements from another page.
But when I use this method it is removing the current DOM elements and replacing them, rather than appending them to the list.
Any help would be much appreciated.
Code below:
var $container = $('#container');
$('#insert a').click(function () {
var newEls;
$container.load('../pages/2.html .element', function () {
newEls = $(this);
});
$container.isotope('insert', $(newEls));
return false;
});
Surely you should be telling isotope to insert after they have been loaded.
e.g.
$container.load('../pages/2.html .element', function () {
newEls = $(this);
$container.isotope('insert', $(newEls));
});
otherwise you are inserting the current contents (or an empty div) before loading them.
Your $container.isotope('insert', $(newEls)); is executing before the load even starts (the load is asynchronous so you can only trust something to run against the loaded data if it is in the callback/function).
In addition to this, you are reloading the entire contents of the '#container' so it simply erases the previous children. You need to append the content, e.g. by loading into a dummy element then appending to your container.
maybe something like this (untested):
var $container = $('#container');
$('#insert a').click(function () {
var $newEls;
$container.append('<div id="#loadme"></div>');
var $loadme = $('#loadme');
$('#loadme').load('../pages/2.html .element', function () {
$newEls = $loadme.children();
$loadme.children().unwrap();
$container.isotope('insert', $newEls);
});
return false;
});
Normally I would not use load in this situation, but an AJAX get call and append the returned elements. Much simpler.

Can someone please tell me why this js function doesn't run on load?

I've:
//Resize tabs - height when window size changes. Don't forget to reset niceScroll
function recalc_tab_height () {
//
var wrapper_h = $(".ui-panel-content-wrap").outerHeight();
var content_h = $(".ui-content").outerHeight();
var current_h = $(".tab1").outerHeight();
var newHeight = (wrapper_h - content_h) + current_h;
//
$(".tab1, .tab2, .tab3").css({"height":newHeight}).getNiceScroll().resize();
}
//Run once onLoad
recalc_tab_height();
That is supposed to resize lyrics section on-load to fit the screen. But it doesn't run at all... any ideas why? it is inside ui.js
http://mac.idev.ge:800/mobile-radio/
try
$(function() {
recalc_tab_height();
});
instead of your last line.
$(...) is a shortcut for $(document).ready(...) and is executed as soon as your page is entirely loaded, so that you can deal with DOM element properties.
Try this : Need to set $(document).ready
$(document).ready(function(){
//Run once onLoad
recalc_tab_height();
});
To load this function either you should use this on body as
<body onload="recalc_tab_height();" >
or by jquery
$(document).ready(function() {
recalc_tab_height();
});
Wrap the function call when the dom is ready.Try like this
$(document).ready(function(){
recalc_tab_height();
});
A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $(document).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $(window).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.
So you have to call your function inside
$(document).ready({...}); or $(window).load(function() { ... });
I changed css() to animate() and it works.

How to load a jQuery function only after the document finish loading

Strange situation:
I am building a menu bar using jQuery and CSS.
In my JavaScript file, I have an on-ready function like so:
$(document).ready(function(e) {
mark_active_menu();
}
and...
function mark_active_menu() {
var elementWidth = $("nav li").width();
alert(elementWidth);
}
For some reason, even BEFORE all the document finish loading, I'm getting the alert message with an incorrect width. Only when I release the message, the rest of the document loads and I'm getting the right width as it should be.
Why my function is being called BEFORE all the document finish loading?
Is there a way to load the function only AFTER a certain element done loading (Example: the nav element)?
You can use window.load, it will be triggered after all the resource have completed loading.
$(window).load(function(e) {
mark_active_menu();
});
The load event fires at the end of the document loading process. At
this point, all of the objects in the document are in the DOM, and all
the images and sub-frames have finished loading, Reference
All the current solutions are just treating symptoms of the main problem. If you want your handler to execute after all your ajax loads, then you may use a promise.
var ajax1 = $.ajax();
var ajax2 = $.ajax();
jQuery(function($) {
$.when.apply($, [ajax1, ajax2]).done(function() {
// your code here
});
});
Try on the window load event :
$(window).load(function() {
//Stuff here
});
To be sure, Try window load
$(window).load(function(e) {
mark_active_menu();
}
Before(sometimes, doesn't load absolutely at the beginning, a few milliseconds after(0-200ms about)):
$(document).ready(function(){
$('body').hide(0);
});
After:
$(window).load(function(){
$('body').delay(500).show(0);
});
In my situation of work with AJAX and HTML. I have the same problem with functions $(document).ready() and $(window).load(). I solved this problem by adding handler of my event (that should work at HTML DOC), to the jQuery function that runs right after AJAX reguest was finished. Read this: "
jQuery.post()" (third parameter in the function).
In my code it looks like this:
var RequestRootFolderContent = function(){
$.post(
'PHP/IncludeFiles/FolderContent.inc.php',
function(data){
$('[class~="folder-content"]').html(data);
//Here what you need
$('[class~="file"]').dblclick(function(){
alert("Double click");
});
}
)
}

Select tags within a string using jQuery

I have my website getting a value as a result of an ajax call. After that, I would like to insert that result (a string) into a tag. However, I would like to insert that result in a way that (1) it must have opacity = 0, then (2) it will slideDown() so the whole content list being pushed down using animation, and finally (3) change opacity = 1. Imagine this is just like a Facebook message list insert process
The way I am planning to do this is to return the result string from ajax to opacity=0 first. However, I don't know how to use jQuery to select a tag from within a string. I know jQuery only select from the DOM. So how to do this? Any advice?
Thanks
I'd consider putting the return value inside a SPAN. Hide the container that will hold it. Set the opacity of the SPAN to 0, then add the result to it and put it in the container. Once that is done, slide the container down and animate showing the result in the callback to the slideDown method.
$.ajax({
...
success: function(data) {
var container = $('#container').hide();
$('<span />').css( 'opacity', 0 )
.html(data.result)
.appendTo(container);
container.slideDown('normal', function() {
$(this).( 'span:first' )
.animate( { 'opacity': 1.0 } );
});
}
...
});
Hide() is a jquery function, meaning that only works on a jquery object, so you have to first inject the html in the DOM, and then call hide() on the DOM element.
$('#msgList').load (url,data,function(html){
var $this = $(this); // cache $(this) for performance
$this.hide().html(html); // inject the html in the DOM
$('#aa', $this).hide(); // hide #aa
$this.show(); // reveal the messageList
});
The following will make the ajax call using the simple .get() wrapper.
Then the callback function will load the response into a jquery object and find the tag you want.
It then hides this tag and appends it to a div container.
Finally it will slide it down.
//do ajax call
$.get( url, function(html) {
//load html into a jQuery object, find the tag by id then hide it
var $el = $(html).filter('#someId').hide();
//append element to the dom and slide it down
$el.appendTo('#someDiv').slideDown('slow');
});

Categories

Resources