We Keep Coding

Loading Sequence of JQuery objects in Firefox different than in Chrome/Opera?

I have problems with the loading sequence of jQuery objects in a HTML and Javascript file when executed on Firefox.
I have several <div> and <button> tags with different id. The page starts with following code:
<script>
$(document).ready(function () {
$("#id_1").show();
$("#id_2").hide();
$("#id_3").hide();
...
});
$(document).ready(function () {
$.getJSON("JSON_file.json", function (json) {
if (json.option[number] == "b") {
$("#id_2").show()
};
if (json.option[number] == "c") {
$("#id_3").show()
};
});
});
</script>
In Chrome and Opera I have no issues with this code. The objects "#id_2" and "#id_3" are not visible on load.
However in Firefox both "#id_2" and "#id_3" are visible for a short moment before being hidden. But I don´t want them to be visible at the begin.
I use localhost to open the files.
Does anybody know what I´m doing wrong?

Hello You can add default hide call in div and then remove that call on condition basic.
Like
<div id="#id_1" class='hide'>
My Div 1
</div>
<div id="#id_2" class='hide'>
My Div 1
</div>
<div id="#id_3" class='hide'>
My Div 1
</div>
Now your script code
<script>
$(document).ready(function () {
$.getJSON("JSON_file.json", function (json) {
if (json.option[number] == "b") {
$("#id_2").removeClass('hide')
};
if (json.option[number] == "c") {
$("#id_3").removeClass('hide')
};
});
});
</script>

Call a function in javascript only after page load

I have a button that is set up to call a javascript function to automatically activate a "tab" on a page. When that tab is loaded, there are subtabs that display. I am trying to set it up so that one of the subtabs is also automatically activated when the button is clicked.
Currently I can get the first tab to select, but I can't get the subtab to select. #detailsTab is the id of the first tab. #personal-information is the id of the subtab I am trying to select.
The following is what I have.
This is all in the same file:
HTML:
<button class="button button--primary button--sm" onclick="viewDetials()">View Details</button>
Javascript:
<script type="text/javascript">
function viewDetials() {
$("#detailsTab").click();
personalSubTab();
}
window.onload = function personalSubTab() {
$("#personal-information").click();
}
</script>

Try combining your functions and adding a short delay for the subtab.
function viewDetials() {
$("#detailsTab").click();
setTimeout(function(){
$("#personal-information").click();
}, 200); // This value can be tweaked
}

The following will be called when the document is ready.
<script type="text/javascript">
function viewDetials() {
$("#detailsTab").click();
personalSubTab();
}
function personalSubTab() {
$("#personal-information").click();
}
// Document ready
$(function () {
personalSubTab();
});
</script>

I'm not exactly sure what you want to do - but if you want to generate a click event on another button/div use trigger, not click - like this:
function personalSubTab() {
$("#personal-information").trigger('click');}

Jquery change variable on click

Right, what I'd like to happen is when a button (or in this case, some text) is pressed, Jquery shows a div tag that contains an image, fades out the image after 2 seconds then displays some text.
This all works nicely, however I only want it to work once.
I decided to do this by using a variable and an if statement, so the variable changes from 0 to 1 and then the button cannot be clicked again due to the variable being changed.
Or at least, that's the badly worded version.
Anyhow, this is what I have so far, but for some reason the variable won't change from 0 to 1 after the button has been clicked, other than that, it works well.
The JS:
$(document).ready(function(){
$("#text2").css("display","none");
$("#ltt").css("display","none");
var clicked = '0';
if(clicked == 0) {
$(".clicker").click(function() {
$("#ltt").fadeIn("slow");
$('#ltt').delay(2000).fadeOut('slow');
$("#text2").delay(3000).fadeIn(1000);
$clicked = '1';
});
}
});
The HTML:
<div class="clicker">
click to see text
</div>
<div id="ltt">
<img src="Images/LoadingCircle.gif" width="24" height="24">
</div>
<div id="text2">
SOME TEXT
</div>

Try to use .one() in this context,
$(".clicker").one('click', function() {
$("#ltt").fadeIn("slow");
$('#ltt').delay(2000).fadeOut('slow');
$("#text2").delay(3000).fadeIn(1000);
});

You should use .one() instead:
Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
$(".clicker").one('click',function() {
$("#ltt").fadeIn("slow");
$('#ltt').delay(2000).fadeOut('slow');
$("#text2").delay(3000).fadeIn(1000);
$clicked = '1';
});

You declared the variable to
var clicked = '0';
but calling
$clicked = '1';
later on, so your variable will not be found.
Other than in PHP you don't need the Dollar $ to declare a variable, it's just a simple typo :)

well this should work :)
$(document).ready(function(){
$("#text2").css("display","none");
$("#ltt").css("display","none");
window.clicked = false;
$(".clicker").click(function() {
if(!window.clicked){
$("#ltt").fadeIn("slow");
$('#ltt').delay(2000).fadeOut('slow');
$("#text2").delay(3000).fadeIn(1000);
window.clicked = true;
}
});
});

Re-run javascript code when the value changes

I have two files: a html file (with the code below) and a javascript file (it creates a value for the <span id="quantity">) The code works fine, but the word only changes if I refresh the whole page.
I want the word to change from 'articles' to 'article' or vice versa as soon as the 'quantity' changes. Is this possible? And if so, how?
<span id="quantity" class="simpleCart_quantity"></span>
<span id="quantityText"></span>
<script type="text/javascript">
$(window).load(function()
{
var quantity = document.getElementById("quantity"),
quantityText = document.getElementById("quantityText");
if (parseInt(quantity.innerHTML, 10) === 1) {
quantityText.innerHTML = "article";
} else {
quantityText.innerHTML = "articles";
}
});
</script>

You might want to look into MVVC framework like Knockout JS. For example, you would set the contents of the #quantity <span></span> element to be an observable.
However, try reading this SO thread to find a solution similar to what you probably are hoping for. In summary, change events only occur from the browser on the blurring of form fields, so you'll need to implement a $("#quantity").trigger('change')
Once you have a trigger set-up after the DOM element has been loaded, you can do the following:
$('#myParentNode').on('change','#mynum', function() {
// Add your logic in here
$('#quantityText').text('articles') .... .. .. .....
});

Normally, the span element doesn't fire a change event, so you cannot subscribe to it, like you would normally do in an input element.
However, you can trigger such an event using jQuery in the same code, which changes the value of the span (I assume there is such code, because normally spans don't change value).
Here is an example which simulates this change every 10 seconds, and triggers the change event. It also includes a handler for that change event, which duplicates the value in the other span.
<span id="quantity" class="simpleCart_quantity">1</span>
<span id="quantityText"></span>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var quantity = $("#quantity"),
quantityText = $("#quantityText");
setInterval(function() {
var currentVal = parseInt(quantity.html());
if (currentVal >= 10) {
quantity.html(1);
}
else {
quantity.html(currentVal + 1);
}
quantity.trigger('change');
}, 10000);
quantity.on('change', function(sender, args) {
quantityText.html($(this).html());
});
});
</script>

how to stop setInterval() on slidetoggle() then restart again?

I have looked at all the other answers similiar to this question but i can't make them fit my scenario.
i have a page that has a sidebar that contains 15 results that auto refreshes, which is fine.
There is a link that loads up an external page into a div with an overlay. then this new div with the FULL list of the results also auto refreshes whilst its open. (don't want both divs auto-refreshing in background uneccesarily)
in this full list div each result has a jquery slideToggle() function to display more information.
what i am TRYING(and failing) to do is make the auto refresh stop whilst this slideToggle is displaying information, cos otherwise when the page refreshes it goes back to display:none.
here is my latest attempt:
html
main page has div to load into...
<div id="full_list"> loading... </div>
external page with the full list
<div class="events_list"> <!--container for events -->
<ul><li>
<div class="full_event"> <!--each event in a list-->
#1<b> 500 m race </b> <!--this bit always seen -->
<div class="event_slide"> <!--this div is slideToggled() -->
<b>500m race </b><br>
<div class="evntdescription">
run 500mrun 500mrun 500mrun 500mrun 500mrun 500m
</div>
</div>
</div>
</li></ul>
</div>
now my attempted javascript
var refreshData;
var infodisplay = $('.event_slide').css('display');
function autoRefresh () {
if(infodisplay == 'none')
{
refreshData = setInterval(function() {
$('#full_list').load('eventlist.php');
}, 1000);
}
else
{
clearInterval(refreshData);
}
};
$("#view_events").click(function(){ //this opens up the div //
overlay.fadeIn(1000).appendTo(document.body);
$('#full_list').load('eventlist.php'); //loads external page//
$('#full_list').fadeIn(800, function() {
autoRefresh (); //start the auto refresh/
$("body").on("click",".full_event", function(e){
$(this).children('div.event_slide').slideToggle(300, function() {
autoRefresh (); //thought it might work if i add the function
//here as well //
});
});
});
$("body").on("click","#close", function(e){ //closes div//
overlay.fadeOut(300);
$("#full_list").fadeOut(300);
});
return false;
});
basically it doesnt do anything. i have made it work if i get rid of the second autoRefresh function, but it won't stop the function from going. just keeps on refreshing, also not sure how to stop the refresh when i close the div aswell.
let me know if you need more info.
thanx!

Try clearing the interval when the asynchronous loading has completed:
function autoRefresh () {
refreshData = setInterval(function() {
$('#full_list').load('eventlist.php', function() {
clearInterval(refreshData);
});
}, 1000); };

ok so i figured it out anyway. thanx for trying if you did tho.
put the if statement into a function after toggle is completed.
only downside is if it refreshes at same time that its still 'toggling' it will refresh. it won't clear the interval untill the toggle has completed. no idea how to get round that.
changed the code to this:
var refreshData;
function autoRefresh() {
refreshData = setInterval(function() {
$('#full_list').load('eventlist.php');
}, 10000);
};
$("#view_events").click(function(){ //this opens up the div //
overlay.fadeIn(1000).appendTo(document.body);
$('#full_list').load('eventlist.php'); //loads external page//
$('#full_list').fadeIn(800, function() {
autoRefresh (); //start the auto refresh/
$("body").on("click",".full_event", function(e){
$(this).children('div.event_slide').slideToggle(300, function() {
if($(this).css('display') == 'none')
{$('#full_list').load('eventlist.php');
autoRefresh();
}
else
{
clearInterval(refreshData);
};
});
});
});
$("body").on("click","#close", function(e){ //closes div//
overlay.fadeOut(300);
$("#full_list").fadeOut(300);
});
return false;
});