I'm getting a "SCRIPT5009: 'channel_click' is undefined" error in IE9 within the js console. The code works in chrome & firefox but it suddenly stopped while clicking the link to initiate the js sequences in IE9.
I have been trying to figure this out with no success but what I have done was timed a series of events to occur which:
1) onclick - toggle div to hide
2) wait 1500
3) open print command
- User closes the window to return to page
4) wait 3500 toggle div to show again
The reason why I do this is I don't want the print preview to pick up these series of divs when the user decides to print the page.
Javacript:
<script>
//WAITS UNTIL EXCESS IS HIDDEN THEN FIRES PRINT COMMAND
function channel_click(){
// anon wrapper function, 2 second delay
setTimeout( function () {
window.print();return false;
} , 1500 );
}
</script>
<script>
//HIDES EXCESS IN PREP FOR FIRING PRINT COMMAND PREVIOUS FUNCTION EXECUTES IN BETWEEN FOLLOWING FUNCTIONS
$(".hideshow").click(function () {
$("#header,#footer").toggle("slow");
setTimeout( function () {
$("#header,#footer").toggle("slow");
} , 3500 );
$('.modal-backdrop').hide();
});
</script>
HTML:
Print Preview
<div id="header">
<div class="pull-left">
<h1>Edt Mode</h1>
<h6 style="padding-bottom: 30px;">Some informational text here</h6>
</div>
<div>
<div class="pull-left">
<h1>PRINT ME!</h1>
<h6 style="padding-bottom: 30px;">PRINT ME - PRINT ME - PRINT ME</h6>
</div>
<div id="footer">
<div class="pull-left">
<h1>Edt Mode</h1>
<h6 style="padding-bottom: 30px;">Some informational text here</h6>
</div>
<div class="model-backdrop">wow this is some more text</div>
Do you load you javascript file before you try to use it in the html?
If you do that that's not the problem but if you don't try to link to the .js file at the end of your html file.
If you don't want this to be nessecary you have to wrap your channel_click within a window.onload or if you use jQuery
$(document).ready(function() {
function channel_click() {
....
}
})
try removing onclick from your anchor tag:
Print Preview
JS:
<script type="text/javascript">
function channel_click(){
// anon wrapper function, 2 second delay
setTimeout( function () {
window.print();return false;
} , 1500 );
}
$(document).ready(function() { //add this
$(".hideshow").click(function (e) {
e.preventDefault();
$("#header,#footer").toggle("slow");
channel_click(); //call print
setTimeout( function () {
$("#header,#footer").toggle("slow");
} , 3500 );
$('.modal-backdrop').hide();
});
});
here it is working as u expected
http://jsbin.com/imimom/2
Out of that your html is not well-formed, I don't see something wrong there. Maybe you can provide us with the complete markup?
Related
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>
I have a div, or more specifically a <p> tag with id="routineInfo" I want to dynamically update on document.ready, but for some reason it does not seem to work:
$(function() {
$("#routineInfo").html("Routine: Full Body");
});
I started troubleshooting and I could get the desired effect by attaching an onclick handle to an element to trigger the function:
$(".playIt").click(function() {
$("#routineInfo").html("Routine: Full Body");
});
However, I wanted the function to happen on load of the desired page, so to simulate this I attached the handle to the element, found on a different page, that links to the page in question:
$(".linkElementOnDifferentPage").click(function() {
$("#routineInfo").html("Routine: Full Body");
});
Did not work. Can anybody explain this to me please?
EDIT: adding html.
<div class="header">
<div id="info">
<p id="routineInfo"></p>
</div>
</div>
If your div(or p tag) is loaded dynamically, then it cannot be guarantied that its available at the document ready function(mostly in case of rendering views asynchronously).
$(function() {
setTimeout(function() {
$("#info").append($('<p id="routineInfo"></p>'));
}, 3000);
});
var DivPopulateIntervel = window.setInterval(function() {
if ($("#routineInfo").length > 0) {
$("#routineInfo").html("Routine: Full Body");
window.clearInterval(DivPopulateIntervel);
}
}, 100);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div id="info">
</div>
</div>
here
setTimeout(function() {
$("#info").append($('<p id="routineInfo"></p>'));
}, 3000);
simply adds your #routineInfo to document after 3 seconds to create a lazy loading or asynchronous effect(just for demo purpose).
var DivPopulateIntervel = window.setInterval(function() {
if ($("#routineInfo").length > 0) {
$("#routineInfo").html("Routine: Full Body");
window.clearInterval(DivPopulateIntervel);
}
}, 100);
is the setInterval function which gets called after every 100 milliseconds, until the required div gets rendered.
window.clearInterval(DivPopulateIntervel);
removes the DivPopulateIntervel intervel function once the html is set(or the required div is available).
I'm having the first popup on which another popup comes to select few fields.
To show the second popup this is the code I'm trying:
$("#select1").click(function(e) {
e.stopPropagation();
//$('#sellerModal').hide();
var tmplData = {
string:['Ready','2-3 Days','4-5 Days','1 Week','10+ Days']
};
$("#countTypePopupTemplate").tmpl(tmplData).appendTo(".maindiv");
that.closePopup();
$("#count_div").each(function() {
$("#count_div").click(function(evt) {
evt.stopPropagation();
$("#select1").text($(this).text());
$("#myCounttype").remove();
});
});
});
Here is the HTML template:
<script id="countTypePopupTemplate" type="text/x-jquery-tmpl">
<div id="myCounttype" class="popup1 layer-2">
<div class="popup5">
{{each string}}
<div id="count_div" class="popup4 bottom-border">${$value}</div>
{{/each}}
</div>
</div>
</script>
I'm getting a warning:
Ignored attempt to cancel a touchstart event with cancelable=false, for example, because scrolling is in progress and cannot be interrupted. fastclick.js
Here I'm not able to click the 4 out of 5 elements in the second popup. Only first 1 is clickable.
Snapshot of second popup.
I read all the blogs where the topic is disscussed. But didn't got any solution working for me. Looks like there is some corner case.
Try using some parent selector before $("#count_div").each(function() {
$("#count_div").click(function(evt) {
Like this $(".parent_class #count_div").each(function() {
$(".parent_class #count_div").click(function(evt) {
This will solve 1 time running each() for "#count_div".
So the actual problem is each() is running only 1 time, that's why your first element that is Ready click event is working, not others.
Your each function is pointing to id which makes you cannot click other buttons. You should use class to recognize the buttons.
$("#select1").click(function(e) {
e.stopPropagation();
//$('#sellerModal').hide();
var tmplData = {
string:['Ready','2-3 Days','4-5 Days','1 Week','10+ Days']
};
$("#countTypePopupTemplate").tmpl(tmplData).appendTo(".maindiv");
that.closePopup();
$(".pop_btns").each(function() {
$(this).click(function(evt) {
evt.stopPropagation();
$("#select1").text($(this).text());
$("#myCounttype").remove();
});
});
});
HTML template:
<script id="countTypePopupTemplate" type="text/x-jquery-tmpl">
<div id="myCounttype" class="popup1 layer-2">
<div class="popup5">
{{each string}}
<div id="count_div" class="popup4 bottom-border pop_btns">${$value}</div>
{{/each}}
</div>
</div>
</script>
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;
});
Can anyone tell me how to change the following statement which is currently controlled by a radio button to a document load function.
Basically I want the slide div to slide out from the left to right when the page loads.
jQuery:
jQuery(function() {
jQuery('#slide').hide();
jQuery(':radio[name=radiobutton]').click(function() {
var value = $(this).val();
if (value === 'Y') {
jQuery('#slide').show('slow');
} else if (value === 'N') {
jQuery('#slide').hide('slow');
}
});
HTML:
<div id="slide" class="alpha60">
<p class="statement_style_head">Content goes here</p>
<p class="statement_style_text">A line or two of text goes here </p>
</div>
$(document).ready({. Your staff. });
One way is to just click it on load like so $('input[name=radiobutton]').click(); or $('input[name=radiobutton]').trigger('click');
The other would be to place your code inside a function and call that function on load.
function showSomething(){
// code here
}
showSomething();
Document.ready is kind of onload for javascript , it waits till everything is ready and then executes...your code , it safe and best practices for onload
$(document).ready(function() {
$("divid").animate({top:'10px', bottom:0}, 3000);
});