Jquery hide/show not working with animation - javascript

I am trying to hide a result div. Modify it. Then Show it with animation.
I have the following:
$("#SearchButton").button().click(function() {
$("#resultContainer").hide();
$("#resultContainer").empty();
searchResults();
$("#resultContainer").show("slow");
});
Where searchResults() makes an ajax call to load some stuff into the div #resultContainer
However, even if I comment out the line //searchResults(); I still end up with a blank div when I click the button.
However if I switch $("#resultContainer").show("slow"); to $("#resultContainer").show(); It works fine. But I want the animation. .show("slow") works fine elsewhere...
Update: I now have:
$("#SearchButton").button().click(function() {
$("#resultContainer").hide(0);
searchResults();
});
And searchResults does the ajax call with the following callback:
//appending something to the div here
$("#resultContainer").show(600);
alert("test");
I get the alert but the div never shows back up...

You code can be improved, try this:
$(function() {
var $resultContainer = $("#resultContainer");
$("#SearchButton").click(function() {
$resultContainer.hide();
//$resultContainer.empty(); // BTW, no need to empty since the ajax will replace its content anyway!
searchResults();
});
function searchResults() {
$.ajax({
url: "yourRequest.php",
success: function(resp) {
$resultContainer.html(resp);
$resultContainer.show("slow");
}
});
}
});
You don't need the empty the container since it's content will be replaced in the ajax call anyway and it's already hidden anyway!
Remove your show method to the ajax success callback
store the container in a var $resultContainer and use it for faster access.
And here's a live example.

Your code showing the resulting div:
$("#resultContainer").show("slow");
should be chained in the callback of the ajax call; that's the only way you can be sure it will get executed after the ajax result is there. See the optionnal function callback at the end of the load() function. or the callbacks in the ajax functions of jQuery.
You could use something like a jquery queue to queue your events and get that queue paused. Then un-pause the queue in your ajax callback.
Or define some named functions and test that theses callbacks exists before calling them in the ajax callback.
Last thing, please store your selector results var $foo=$("#resultContainer") and use $foo variable after that and avoid calling the $() selector each time you need that div. This can speed up a lot your code.

Related

jQuery not displaying appended content

When I drop a debug point in my source file I can see the following image:
But when I remove this debug point, I only see the following:
The change in color is affected by an overlay with some opacity.
The relevant code is:
flashSuccessMessage = function(msg) {
$('#overlay').hide();
var $ch = $("#content-header");
$ch.after('<div id="flash_message" class="alert"></div>');
var $fm = $("#flash_message");
$fm.addClass("alert-success");
$fm.append(msg);
$fm.show().children().show();
$fm.fadeOut(3000);
$fm.empty();
}
And in this case msg is "Job Type Added Successfully"
I can't understand why I only see the message when I break on the execution after the point where I call $fm.append(msg); It doesn't matter which I break on after that (of the three lines), it will appear. When I don't have any break and let the page execute the script, the green alert appears but no words.
Any ideas?
I've tried various jQuery methods here - instead of .append() using .html() for example, and I've tried inserting the msg inside the with the flash_message id to begin, tried inserting the message wrapped in tags, tried re-ordering things, (but I need to clear the contents of this div at the end...)
I've used jQuery's .delay() method, etc. Is it jumping to executing .empty() despite other elements using a timer to fully execute?
Add a callback to your fadeOut so that the contents aren't emptied until $fm is completely hidden:
flashSuccessMessage = function(msg) {
$('#overlay').hide();
var $ch = $("#content-header");
$ch.after('<div id="flash_message" class="alert"></div>');
var $fm = $("#flash_message");
$fm.addClass("alert-success");
$fm.append(msg);
$fm.show().children().show();
$fm.fadeOut(3000, function(){ // empty() is not called until
$(this).empty(); // the animation is complete
});
}
Without the callback, the empty() method is being triggered immediately after fadeOut(). This causes the content to be emptied BEFORE the animation is complete.
More information on jQuery's fadeOut method can be found in the docs.
The animations in JQuery are asynchronous, so the code keeps executing while the animation happens. .fadeOut has a completion block which you can read about at http://api.jquery.com/fadeOut/.
So, instead of calling fm.empty() after your animation, you should put it inside a function and pass that function into fade out. That function will then run after the animation completes.
but I need to clear the contents of this div at the end...
Use html instead of append:
$fm.html(msg);
$fm.fadeOut(3000, function(){
$fm.empty();
});
Check doc of fadeOut:
.fadeOut( [duration ] [, complete ] )
complete
Type: Function()
A function to call once the animation is complete.

jQuery load finish-event not working?

i want to expand a division with data that should be loaded from another server.
the problem is if i start expanding the division (toggleslide) and the load method finishs the height is jumping and the effect is destroyed.
what i want is that jquery starts expanding AFTER the data-transfer finished but my following code does not work:
// divison name = details
details.load("index.php", expandLastResultDetails3(details));
function expandLastResultDetails3(details) {
$(details).slideToggle('slow', function () {
ready();
});
}
the box is jumping because (i guess) the slidetoggle starts to early.
.load() expects a function callback to be called upon the completion of the request. However, instead of passing a callback, you are executing the function. Try the following:
details.load("index.php", function () {
expandLastResultDetails3(details);
});

Wrapping all AJAX calls jQuery

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
});
});
});
});

jQuery Horizontal Ticker with Continuous loop

I am using a jQuery ticker which is pretty cool. It works well with predefined content, but I want to build my tags dynamically by getting the data from a feed via the $.ajax method.
http://progadv.uuuq.com/jStockTicker/
The problem is when I do this the ticker wont work, as it looks like the function might be loading before my page content has loaded. Can anbody think of a way around this?
$(function() {
$("#ticker").jStockTicker({interval: 45});
});
$(document).ready(function() {
$("#ticker").jStockTicker({interval: 45});
});
You need to call the jStockTicker function from within the success method with the Ajax call, because like you say, jStockTicker is calculating the dimensions for scrolling before the content has been added to the page.
$.ajax({
url: 'ajax/test.html',
success: function(data) {
//Populate $('#ticker') with data here, e.g...
$('#ticker').html(data);
//Now call jStockTicker
$("#ticker").jStockTicker({interval: 45});
}
});
Something like that ought to do it.
Rich
I have never used the jStockTicker; however with another plugin you can change the data dynamically. For example for the jQuery webTicker you can simply replace the content with the list items using javascript and the rotation will continue without halt. I have used this method on a financial website and works like a charm updating the data every few seconds to show the latest exchange rates. The scrolling and dimensions id done automatically per item; once it moves out of screen it is popped back in at the end of of the list. So the list should not break at any point in time
$("#ticker").jStockTicker({interval: 45});
from calling the jStockticker inside success method the scrolling stops and restarts from the begining.

Calling Javascript in a page after it's been loaded by jQuery GET

Imagine a normal page calling javscript in head. The trouble is some of the content isnt loaded untill i click on a link. Subsequently when this link loads the content it wont work. This is because i guess the javascript has already been run and therefor doesnt attach itself to those elements called later on. There is only standard html being called.
So for example this is the code which calls my external html.
$.get('content.inc.php', {id:id}, function(data){
$('#feature').children().fadeTo('fast', 0).parent().slideUp('slow', function(){
$(this).html(data).slideDown('slow');
});
});
If the html i was calling for example and H1 tag was already in the page the cufon would work. However because i am loading the content via the above method H1 tags will not be changed with my chosen font.This is only an example. The same will apply for any javascript.
I was wonering whether there is a way around this without calling the the javascript as well the html when its received from the above function
If you want to attach events to elements on the page that are dynamically created take a look at the "live" keyword.
$('H1').live("click", function() { alert('it works!'); });
Hope this is what you were looking for.
Does Cufon.refresh() do what you want?
As you said Cufon was just an example, I'd also suggest a more general:
$.get(url, options, function(html, status) {
var dom = $(html);
// call your function to manipulate the new elements and attach
// event handlers etc:
enhance(dom);
// insert DOM into page and animate:
dom.hide();
$target_element.append(dom); // <-- append/prepend/replace whatever.
dom.show(); // <-- replace with custom animation
});
You can attach event handlers to the data that you get via the get() inside of the callback function. For example
$.get('content.inc.php', {id:id}, function(data){
$('#feature').children().fadeTo('fast', 0).parent().slideUp('slow', function(){
$(this).html(data).find('a').click(function(e) {
// specify an event handler for <a> elements in returned data
}).end().slideDown('slow');
});
});
live() may also be an option for you, depending on what events you want to bind to (since live() uses event delegation, not all events are supported).
Andy try this. It will call the Cufon code after each AJAX request is complete and before the html is actually added to the page.
$.get('content.inc.php', {id:id}, function(data){
$('#feature').children().fadeTo('fast', 0).parent().slideUp('slow', function(){
$(this).html(data);
Cufon.replace('h1');
$(this).slideDown('slow');
});
});
JavaScript is not executed because of a security reason OR beccause jQuery is just setting this element's innerHTML to some text (which is not interpreted as a JavScript) if it's contained. So the security is the beside effect.
How to solve it?
try to find all SCRIPT tags in Your response and execute them as fallows:
var scripts = myelement.getElementsByTagName("SCRIPT");
var i = 0;
for (i = 0; i < scripts.length; i++)
eval(scripts[i].innerHTML);

Categories

Resources