Develop Reference

Refresh div during JQuery update

I have a html file with many div. Beside this I have a JQuery file too which run an AJAX request in every 30 seconds. In my JQuery If a condition met and the jQuery reloded 3 times I want to update my div-s. I tried to add a div, but it does not appear just when I reload my whole page. If I set to remove my div and not add, the JQuery removes my div, so it is very odd for me, because just the .add or .append or .html do not working. furthermore I set a class with invisibility too, and I also set that when the condition met the jQuery file remove the invisibility class, but the div do not want to appear. I am trying to create a sample code.
My html
<div class="row">
<div id="myclass" class= "invisible" >
<div <p> Please appear for me!<p></div>
</div>
</div>
My JQuery:
if (condition) {
$('#myclass').removeClass('invisible');
if (n >= 2) {
$('#myclass').addClass('invisible');
}
}
The main point is, If the conditions met the class not removes just When I reload my page. In the jQuery file the n is equal with the times when the AJAX reloaded with setInterval. My question is why my div not appear just when I reload my whole page? Also why remove without reload?
Thank you in advance the answers!

removeClass and addClass perfectly work. at first, you can check if you jQuery works, just try to write you script (with ".append",".html",".insertAfter") directly in browser console, else you can add some console.log in your code, when you change invisibility like:
console.log('removeClass');
$('#myclass').removeClass('invisible');
if (n >= 2) {
console.log('addClass');
$('#myclass').addClass('invisible');
}
for update some div content, you can use simple function for it. like -
call self page in get request, and replace div content.
function reloadMyDiv(selector){
var element = $(selector);
if(element.length===1){
$.get(window.location.href,{},function(response){
var new_page = $('<div></div>').append(response);
var new_element = new_page.find(selector);
if(new_element.length===1){
element.html( new_element.html() );
console.log('update');
}else{
console.log('need contains only one element, '+new_element.length+' found!');
}
});
}else{
console.log('need contains only one element, '+element.length+' found!')
}
};
and if you more _ not use your interval, is good practice for clear it.
var n = 0;
var myInterval = setInterval(function(){ myFunction() },30*1000);
function myFunction(){
n+=1;
//do, what you want to do
if(n>2){
clearInterval(myInterval);
}
}

Remove class from nav after first loading

I have a website based on top of a single page that changes its content dynamically. The container of the content is a div with a few javascript and css animation (I gave my nav a class "animated") and I want to remove this class (so it won't be animated anymore) after the first time.
Is there any way to remove (after the first page load) or add (during the first page load) this class? I have already tried with the standard query code but when I click on a link that changes the content of my div container, the animations are all restarted.
Here is my html:
<nav class="main animated fadeInRight"><?php include('template/nav/main.php'); ?></nav>
I would like to remove the animated class with something like that but for every new page load.
<script type="text/javascript">
$(document).ready(function() {
$('nav').removeClass("animated");
});
</script>
This doesn't work because when I click a link to change my content, it also reloads the page and start all the animations again.
Thanks a lot!

It's tough to say without looking at all of your code, but I would probably put a URL parameter on the end of your nav links. You mentioned that clicking a link to change your content will also reload your page, right?
Well, on all of the links in your nav, put a parameter like this:
Page Name
Then at the top of all your pages where you include the nav:
<?php
if($_GET["firstLoad"] == "N") {
echo '<nav class="main fadeInRight">';
include('template/nav/main.php');
echo '</nav>';
}
else {
echo '<nav class="main animated fadeInRight">';
include('template/nav/main.php');
echo '</nav>';
}
?>

You are missing couple of ''
<script type="text/javascript">
$(document).ready(function() {
$('nav').removeClass("animated");
});
</script>
or even precise
<script type="text/javascript">
$(document).ready(function() {
$('nav[class="main"]').removeClass("animated");
});
</script>

You should put the nav in quotes, like
$("nav")
Otherwise it points to a non-existent variable

Each page reload starts your app completely anew.
If you'd like to prevent things from being animated during after a page refresh,
you could add a parameter to your string - ie /?animation=true
and look for it within your PHP file
<nav class="main <?php if($_GET['animation'] == true) {echo animated." ";} ?> fadeInRight"><?php include('template/nav/main.php'); ?></nav>
Then just remove it for all other links.
Unless i didn't get you right, so in that case- just fix your typos in the provided script:
$().ready(function() {
$("nav").removeClass("animated");
});

You can use web storage.
When the page first load you will remove the class from nav and later do some checking whether you already removed the class or not.
When the page loads you can do something like this:
<script>
if(localStorage.getItem("ClassRemoved") !== "true") {
// remove the class
localStorage.setItem("ClassRemoved", "true");
}
</script>

There are many solutions as this is open to possibilities. But this link will probably help you in creating a cookie and based on its life time, you may wish to animate or not.

script tag executed twice when called from an animated div

i have a countdown() function defined in a static js file, main.js:
function countdown() {
var tID = window.setInterval( function() {
var t = $("#countdown").html();
$('#countdown').html(--t);
if (t <= 0) {
window.clearInterval(tID);
$("a.about").trigger("click");
}
}, 1000 );
}
I also have the following within the page content:
<div id="content">
<p>Sorry, but no page was found here. Redirecting you to the home page in <span id="countdown">25</span></p>
<script type="text/javascript">
countdown();
</script>
</div>
#content is initially hidden and is displayed using jQuery (after being loaded with AJAX). for some reason this causes the <script> block to execute twice - once when the content is display:none, and once while the jQuery show function is being called. Thus my timer counts down by 2s at a time. (actually 1 at a time but 2 iterations happen almost concurrently.) if instead of animating the display of the div I simply execute $('#container').css('display','block');, the code correctly creates a single interval. Can anyone explain this?
I have an example demonstrated in jsFiddle here

Copied your code into jsfiddle - this might help
http://jsfiddle.net/rJHKQ/4/
Because your html element has display set to none, when your change the display of it, it's redrawing to display - causing your method to be hit again.
Also edited your example and updated it: (moved your code out of the div)
http://jsfiddle.net/NpKvr/

Loading Indicator in Ajax

I know this has been asked and answered many times in this forum. But it does not work in what I am looking for.
I want to display a loading indicator while the ajax div is loading. There are cases when it takes a few minutes to load so it would be good to let the user know that the is loading.
From what I gathered it can be done in jquery. I am not too familiar with jquery yet. With this code the loading works but only for the first page.
$(document).ready(function() {
$('body').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>');
});
$(document).ajaxStart(function(){
$('#ajaxBusy').show();
}).ajaxStop(function(){
$('#ajaxBusy').hide();
});
My page is structured like this
Header Page
-Div (display ajax here)
-Another div within the first loaded page(Load another page through ajax here)
I need it to display the loading indicator in the second div while it's loading. I am assuming that jquery "body" appends it to the main page body once and doesn't run again as it's within the same page. I did try to create a div and instead of body, load the div in jquery but it doesn't work.
Any help will be greatly appreciated.

I found that the easiest way to add the loader gif to specific elements is to create a CSS class with the loader as a background instead of appending an actual image:
.ajax-loader {
background: url(ajax-loader.gif) center center no-repeat;
}
Then you just add that class to the element you are loading and remove it when it is done:
// Removes any loaded images on Ajax success
var removeLoader = function(event, XMLHttpRequest, ajaxOptions)
{
$('.ajax-loader').removeClass('ajax-loader');
};
// Add the ajax loader to a specific element and remove it when successful
$('.div1').addClass('ajax-loader').load('mypage.html', removeLoader);

considering that the div you want to load your image has an id="theDiv"
$(document).ready(function() {
$('#theDiv').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>');
});

Is there a reason you're appending your "ajaxBusy" div via Javascript? Why not just include the HTML on the page itself?
<div id="main">
<div id="ajaxBusy">
<p><img src="ajax-loader.gif"></p>
</div>
</div>
Try binding the ajaxStart and ajaxStop to the ajaxBusy div instead of the document.
$('#ajaxBusy').ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});

hide + load + slideDown(), can't see the effect

Intro,
I'm trying to write a new function to load content using the slideDown() effect from Jquery
This is the function, the content gets loaded properly, but i just don't see the Slide effect, i guess because it might be done before the content its loaded, so:
function load_something(nombre,tipo){
$("#router").prepend(loader_image);
$("#router").load('/includes/router.php?nombre='+encodeURI(nombre)+'&tipo='+tipo,function(){
$("#router").slideDown(600); return false;
});
}
Tried also:
$(div).hide().slideDown(time);
getting same result
Question,
What i am doing wrong?
Thank you !

Your code looks okay.
I think you need to start off with router hidden in order to see the effect. If you have an external style sheet add:
#router {display: none;}
so that the content is hidden until you execute your function, triggering the slidedown effect.