We Keep Coding

jquery .load() function only working the first time

So I have a website I am working on just as a personal website that uses jQuery and jQuery UI
Previously I have been using hidden html code and just using jquery to show it.
But its making my html file messy so I wanted to use jquery's .load() to do the same thing but from an external file.
Right now, its set to a .click function.
For my hidden html it shows it every time when I click a particular element.When you click on a different element it. It hides the first one. I am doing it by having a div with 2 classes. The problem is when I tried to load html into a hidden div, and then show it and hide it, it only worked the first time.
Enough talk, here is my code. #1 works , #2 only works on the first click. And leaves imagearea blank every time after.
$(".jquery").click(function(){
clearImageArea();
hideThumbnails(5);
showThumbnails();
$("#1").click(function(){
$(".imagearea").html(js);
$(".jscode").show(1000);
$(".title").text("Extending jQuery");
});
$("#2").click(function(){
$(".jquery2").empty();
$(".jquery2").load("jqueryEx.html");
var jquery2 = $(".jquery2");
$(".imagearea").html(jquery2);
$(".jquery2").show(1000);
$(".title").text("Extending Jquery Example");
});
});
now my hidden stuff in my html file
First my html and js code is loaded into here from jqueryEx.html and is being hidden elsewhere in my javascript via $(".hidden").hide(); and loaded then into into imagearea via .html() and shown via .show()
<div class="jquery2 hidden">
</div>
My other div looks like this which is put into imagearea by clicking on #1
<div class="jscode hidden">
<div class="block">
//lots of js code escaped out into html
</div> <!-- end of block-->
</div>
elsewhere in my JS code at the beginning I have var js=$(".jscode"); to load it into the js variable you saw earlier.
if you want to see an out of date example of what I am working on
go to www.3realsoft.com (only cs and js work on skills)
if you want to see any additional parts of my code, just ask. Most of it is there on my website though.

I got to this item in my search results, when I was trying to have a button both load and refresh the content, and the load was working but the refresh was not working.
Here's a shorter version of the solution, setting Cache to false was the key. Solution found over at this other link, but I'm posting this concept here because if Google dropped me in this item, others looking for the same will also probably find themselves here. Props to John Millikin, make sure to go over to his answer and upvote him: Stop jQuery .load response from being cached
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({
// Disable caching of AJAX responses
cache: false
});
$('.detail-expand').click(function () {
var detailRowElement = $(this).closest('.session-row-tr').next();
var detailElement = detailRowElement.find('.detail-row-div');
var sessionId = detailElement.data("sessionId");
detailElement.empty();
detailElement.load('/Admin/WebLogPartial/' + sessionId, function () {
$.bootstrapSortable(true, 'reversed');
});
detailRowElement.show();
});
});
</script>

Anything that depends on the HTML being loaded must be done in the callback function, because the first A in AJAX stands for asynchronous.
$("#2").click(function(){
$(".jquery2").empty();
$(".jquery2").load("jqueryEx.html", function() {
var jquery2 = $(".jquery2");
$(".imagearea").html(jquery2);
$(".jquery2").show(1000);
$(".title").text("Extending Jquery Example");
});
});
I'm not really sure what you're trying to do with .html(jquery2), since the argument to .html() is supposed to be a string, not a jQuery object. Maybe you meant:
var jquery2 = $(".jquery2").html();

stellar.js not working with dynamically loaded elements via AJAX

I'm using the fantastic Stellar.js (http://markdalgleish.com/projects/stellar.js/) for parallax on a recent project, but I've run into a challenge:
Stellar isn't noticing when I change content via AJAX (in this case loading in new div's from an html file and using jQuery's replaceWith method). So, my new elements have no parallax, even though they have stellar data attributes.
I've tried calling the .stellar function on my window again after the AJAX is complete, but it doesn't do anything.
How can I get Stellar to correctly apply parallax to the new AJAX'd in elements?

I know this question was posted a long time ago has been accepted, but for me the solution above did not work, so I just wanted to share this which worked for me.
After you AJAX call has been successful you can call Stellar's refresh function like so:
$.stellar('refresh');
Here is the full code:
$.ajax({
type: 'GET',
url: ajaxUrl
}).done(function(data) {
$(targetElement).html(data);
$.stellar('refresh');
}).fail(function() {
// Do something else
});

I found that I can run this code in my jQuery AJAX callback and Stellar will then correctly apply parallax to my new AJAX'd in elements:
$(window).data('plugin_stellar').destroy();
$(window).data('plugin_stellar').init();

I know that the topic is old but I want to share the solution that I found, hoping that it will be useful for people who are still searching.
First create the function:
function init () {
$(window).data('plugin_stellar').refresh();
}
jQuery(document).ready(function () {
// Initialise the plugin when the DOM is ready to be acted upon
init();
});
Second insert this line in your Ajax call:
// Reinitialise plugins:
init();

How can I make IE 9 animate a gif right before I submit a form

So I have an animated GIF that I only want to show when a user clicks a submit button, this way they think something is happening if it takes a while for a response.
The problem is in IE9 the GIF doesn't animate. I have tried adding it dynamically and adding it before hand and just having it off the page and neither seemed to work. I also tried adding a delay before adding the GIF but that didn't help either.
One other thing, I believe this may be related to the form doing a POST as opposed to a GET request (GET request experiences this problem), however I need to do a GET for reasons I would rather not get into.

Once you submit a form on a page all execution of the current page STOPS. You can use AJAX instead, or post your form to an Iframe.

Not sure about your specific IE9 issue but you can try doing this in jquery:
$(function(){
$('form#my-form').submit(function(e){
$('#my-animating-gif').show();
});
};
and just make the animated gif in the dom on page load with the attribute style="display:none;" (or a hidden class and the proper css in your stylesheet)
If that fails to do the trick you can see if you can prevent the regular form submission and do it yourself after you show the gif.... but I'm pretty sure doing this is identical to the previous version. Worth a try I guess.
$(function(){
$('form#my-form').submit(function(e){
e.preventDefault();
$('#my-animating-gif').show();
$(this).submit(); // <-- This might cause infinite recursion
// into this event handler. Probably a
// terrible idea. Go with the above version,
// or serialize the form data yourself and submit
// it as a separate form but that's outside
// of the scope of this answer.
});
};

That has been a problem with every version of IE. Unfortuntely most of the old workarounds don't work with IE9. One that still does is spin.js, if you're ok with a javascript-only solution. It's pretty simple and has no dependencies (although there is a jQuery plugin for it if you want it). The basic syntax is:
HTML:
<div id="spinner" style="width:24px; height:24px"></div>
JS:
var opts = {
lines: 12,
length: 7,
width: 4,
radius: 12,
color: '#000',
speed: 1,
trail: 54
};
var target = document.getElementById('spinner');
var spinner = new Spinner(opts).spin(target);

jquery ajax success fade effects

I would like to do some effects like fadeIn to page once I get the ajax response.
I tried this,
$.ajax({
type: "post",
url: actionLink,
cache: false,
data: ....someData....,
success: function(data) {
$(".response").fadeOut(100);
$(".response").html(data);
$(".response").fadeIn(500);
}
});
This is working but data is displayed first and with a flash of 500ms getting data with fade effect but I need to get the loaded data directly with fade effect.
I even tried with Fade out a div with content A, and Fade In the same div with content B, but I still get the same issue.
I also tried:
$(".response").fadeOut(100).hide();
$(".response").show().html(data).fadeIn(500);
Still the same. How do I fix this?

This thing worked.........
jQuery(".response").fadeOut( 100 , function() {
jQuery(this).html( data);
}).fadeIn( 1000 );

Have you tried:
$(".response").fadeOut(100).html(data).fadeIn(500)

The easiest way I found was to set the initial fadeOut() to '0'. This worked perfectly:
$(".response").fadeOut(0).html(result).fadeIn(500);
As setting an initial fadeOut() with an actual value makes it 'pop' in, and then it fades in. Still not the desirable result.
So by setting the initial fadeOut to 0, means it doesn't spend a tenth of a second fading out before fading in. So you don't get a strange effect.

Try $(".response").fadeOut(100).delay(100).html(data).fadeIn(500)
This will force the subsequent operations (the addition of the html to your div) to wait until after the fadeOut has completed.

success:function(data)
{
$(".response").fadeOut(600, function ()
{
$(".response").html(data)
});
$(".response").fadeIn(600);
}

Concept is: Once ajax response received, fadeIn the message - wait for some seconds (delay) - fadeOut
Like this ------
$('div.errorul').fadeIn(600).html( 'msg' ).delay(1000).fadeOut(500);

show/hide loading message for html table

How can I show a "loading" message when clicked/checked to expand table column(s), and hide the message as soon as its expended. Here is demo of what I've got so far. I can make the message appear, but can't hide it once the job is done. It seems useful when I'm trying to expand a large table, and I think it would be nice to let the user know that it's working. Any help/suggestion will be greatly appreciated.
$(document).ready(function() {
$("#load").hide();
$("#check").live("click", function() {
$("#load").show();
if ($("#check").is(":checked")) {
$(".hidden").show();
} else {
$(".hidden").hide();
}
});
$("#load").hide();
});

Do you really need the loading message?
anyway, you could hide it like this:
$(document).ready(function() {
$("#load").hide();
$("#check").live("click", function() {
$("#load").show();
if ($("#check").is(":checked")) {
$(".hidden").show();
$("#load").hide();
} else {
$(".hidden").hide();
$("#load").hide();
}
});
$("#load").hide();
});

this is a bit unuseful thing to create a loading text because this need only one reflows to the DOM so you actually not see the "loading.." message.
but if you want to create an ajax call wich gets the data form the server, it would be useful, but in this usuage this is unuseful
but if you insist to this, you need to create a new "thread" to detect is the table shown. for example
$("#link").click(function() {
$("#text").html("loading...");
$("#table").show();
window.setTimeout(function() {while(true){if($("table").is(":visible")){$("#text").html("");break;}}},0);
});

It's a matter of the page lifecycle. You don't have any blocking events in your code and there is no callback for your code to know "hey the hidden elements are shown now, hide the loading bar." Take a look at this updated jsfiddle. Instead of a callback, I've told the code to wait .5 secs after showing or hiding before calling the method to the hide the loading message.
If you were doing something with a callback, like an AJAX post, then you could invoke this on success or fail of the request.