How do I run javascript on window load or document ready in Google Optimize campaigns? It seems like it allows me to select DOM elements all the way up to Body, but I need to run js on document ready.
This is the way I go about it:
Edit your experiment variant in the Visual Editor.
Click on the Select elements icon (the rectangle in the top left corner)
In the Element Selector field, type in body.
Click the Add change button and select Javascript. This will bring up a dialog that allows you to input a JS function that will be called for the body.
Put in the code you want to run in there and make sure the After closing tag option is selected.
Because of the nature of Google Optimize, I would expect that it wouldn't start messing around with DOM elements until they are loaded. And because you select the After closing tag option on the body tag that should ensure all elements have been loaded in the DOM.
However, if you want to be 100% sure, you could write a function like this.
function runOnLoad() {
console.log('this will only run when window is loaded');
}
if(document.readyState === "complete") {
runOnLoad();
} else {
window.addEventListener("onload", runOnLoad, false);
}
That code snippet was adapted from How to check if DOM is ready without a framework?
if the above code doesn't work.
Try to use:
document.onreadystatechange = function() {
if(document .readyState === "complete") {
console.log('this will only run when window is loaded');
}
}
Ref: https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
Related
Currently I have a button when clicked, renders a template into the dom. I want the button to act more like a "clone element and append to parent element" button, but instead I only know how to "clone an element" by rerendering the template. It is a very expensive operation for rendering the template which I want to avoid.
Currrently I am doing this
Template.addWorkoutExercise.events({
'click .add-exercise': function(e) {
Blaze.render( Template.addWorkoutExercise , $( '#main' ).get(0) );
e.preventDefault();
}
});
I want to know if there is a way to 'clone a element' without rendering, or if I can safely copy the view somehow.
I think that by using Blaze.View you can create a new view from a template without rendering it immediately. You will then be able to render it by either calling Blaze.render or Blaze.toHTML.
You can do that using jquery.
Try this:
$('.element').clone().insertAfter('.element')
I want two buttons to trigger each his own overlay content (centered vertical and horizontal), but keep the overlay layout the same only the content is different. I wrote a good functional single overlay script for one button, but the two buttons aren't working. In the fiddle there is only the script for one button that i'm using, it is properly quite simple.
Here is the fiddle: link
function funcShow(event){
event.preventDefault();
$('.overlay-info').fadeIn(400);}
function funcClose(event){
event.preventDefault();
$('.overlay-info').fadeOut(400);}
You should put click handlers on your divs using jquery in a document ready function as seen below. Its not as "nice" and accepted to put them in an onclick property like you have.
And also its always nice to have Ids for everything that you are going to use to do things with like click or close. So if you see the example below, you have the document ready function that puts a clickhandler on the first div (id="overlay-one") and the second div as well as the close functions. Try it! It worked for me in you fiddle.
$(document).ready(function(){
$("#overlay-one").click(function(event){
funcShow(event);
});
$("#overlay-two").click(function(event){
funcShow2(event);
});
$("#close-one").click(function(event){
funcClose(event);
});
$("#close-two").click(function(event){
funcClose2(event);
});
});
The document ready function executes after your page is loaded so the clikc handlers are added after the elements have been created. You can also use .click on for classes to add events to a lot of things at once such as $("CLASS").click(function(){//stuff})
I have a modal dialog in my template. This dialog needs to be triggered from the code programatically. So I need to show the modal through javascript, as I cannot have a data-toggle button to launch the modal-dialog.
The modal was working with bootstrap but with bootstrap-3 its not showing up, even though I can show it from the console directly. the problem here is how can I execute javascript post the template render, to launch the modal-dialog.
There is a Template.rendered/created function which is called, and inside this this.autorun(runFunc) is supposed to run the code to update the DOM element. This is called correctly, but I still cannot trigger the modal to show-up.
Template.createDialog.created = function() {
console.log("teamplate created");
this.autorun(function(){
$('#myModal').modal('show');
});
};
Update:
This works:
Template.createDialog.rendered = function() {
console.log("teamplate created");
this.autorun(function(){
$('#myModal').modal('show');
});
};
Using the rendered function, I am able to trigger the modal to show up. But the problem is that rendered and created both are only called once. And I need a way to trigger the modal dialog consistently if a condition is reached.
This bootstrap modal dialog with meteor is turning out to be painful and hacky. Is it not possible to show/hide modal using some class parameters?
Modals can be tricky to get right in Meteor for exactly the reasons you've discovered. I don't use Bootstrap, but the basic principle is that you need to trigger the modal programatically so that you can run the relevant framework code once you know the html has been rendered but still retain reactivity (this is certainly the case with Foundation and Semantic-UI modals) .
In your use case (which appears to be a single modal), this shouldn't be too much of a problem. Set a reactive variable modalVisible (a Session variable or similar), and use that to show or hide the modal as required.
this.autorun(function(c) {
if (Session.get('modalVisible')) {
$('#myModal').modal('show');
} else {
$('#myModal').modal('hide');
}
});
If you put all of that in the rendered callback then it will only try to show the modal once it's been added to the DOM (without which you'll get an error and the computation will stop running, breaking reactivity). Note that you shouldn't make rendering of the template dependent on a reactive variable - it should always be rendered but only visible based on the value of the modalVisible Session variable.
Apologies if this is too simple for your use case - if so I would recommend investigating the several packages on Atmosphere for Bootstrap modals as others will almost certainly have faced the same problem.
The jQuery UI dialog drives me up the walls. To the best of my understanding, here's how it works:
When you do $('#myDialog').dialog({...}), it copies the #myDialog element and moves it inside this bizarre widget thing at the bottom of your body tag. This is crazy! It will duplicate possibly unique DOM elements (with ids) when it does this.
So what I'm trying to do is make it behave in a predictable way when I refresh the HTML of the original element (#myDialog). If I do this dynamically, sometimes the dialog doesn't open any more:
http://jsfiddle.net/t67y7/3/
Or sometimes the dialog opens with the old HTML (because it's cached at the bottom of the page that way). What is up with this?
Since nobody seems to have any idea how to tame this beastly dialog, here's the best thing I've come up with to date. I'll accept any superior alternatives.
var original = $('#dialogId')[0];
var clone = $(original).clone().attr('id', 'dialogIdClone');
var saveHtml = $(original).html();
$(original).html('');
$(clone).dialog({
... // other options
open: function (){
// add any dynamic behavior you need to the dialog here
},
close: function(){
$(clone).remove();
$(original).html(saveHtml);
}
});
The purpose of this whole craziness is to keep the HTML of the original dialog unique on the page. I'm not really sure why this can't be the built-in behavior of the dialog... Actually, I don't understand why jQuery UI needs to clone the HTML to begin with.
I know this has been posted for a while, but a less extensive way to handle this issue would be:
$('#your-dialog').dialog({
... // other options
open: function (){
// add any dynamic behavior you need to the dialog here
},
close: function(){
}
});
$('#your-dialog').remove();
This is due to dialog widget wants to be able to control the display and will wrap the inner content of the original dialog then create a brand new one at the bottom of the body.
The draw back of this solution is that the dialogs have to be the first to be initialized to ensure all your 3rd party library widget will operate properly.
Why don't you just call $("#dialogId").dialog("destroy") on close function, like this:
$("#dialogId").dialog({
close: function() {
$(this).dialog("destroy");
// you may want empty content after close if you use AJAX request to get content for dialog
$(this).html('');
}
}
The destroy function will remove the decorated code, and your dialog element will not be duplicate next time you show the dialog.
I added a sample code to jsfiddle.net example.
You need to empty the dialog before opening it.
$("#dialogId").html('');
$("#dialogId").dialog({
close: function() {
$(this).dialog("destroy");
}
}
Is it mandatory to write $(document).ready(function () {... }) every time ?
Can't we do it without this line?
The reason for placing your code inside this function is that it will get called once the DOM has loaded - meaning that all the elements are accessible. Calling jQuery selectors without this function means that the elements have not necessarily been loaded into the DOM and might not be accessible (and you'll see weird results or nothing at all from your code).
So in essense, yes, it is necessary.
$(document).ready makes sure your code runs when the document is ready (i.e. fully loaded). If you don't need to interact with the document, you don't need this. If you put your Javascript at the end of the document, you probably don't need it either. You should put your code into a function () { } though to namespace it either way.
$(document).ready means the code inside this box will be executed once the all document is ready (loaded). It is considered as safe programming but not mandatory.
For example you call a function in script tag do_something(); and this function is in a js file which is not loaded yet then you will get javascript error.
If you put function like this
$(document).ready(function () {
do_something();
});
you are making sure that when function get called all js files will be there to server.
If you don't use that line, and just include the javascript in your body, it will execute as soon as it's loaded. If it's trying to act on DOM elements that have not yet loaded, unpredictable results will occur.... better to be safe than sorry.
jQuery's ready() function is run after the page's content is loaded. This is relatively equivalent to using <body onload="function1();function2();">
If you want to call multiple functions when the page is done loading, you can do the following:
$(document).ready(function() {
function1();
function2();
});
In order to use javascript, you must call it somewhere. This can be in body "onload", jQuery's ready() function, or an event, like a mouse click event.
No you don't always have to do this. You only use it if you want to make sure whatever is inside the ready function loads before the page is displayed in the browser. If you do not care to load the script before page load, then you can just put the script at the end of the page before the closing body tag.
Also As a shortcut to $(document).ready(function () you can do $(function()