I think this question is asked, but I am surprised to see that dojo is not behaving as per the docs. I want some div to be changed with particular class. So I decided to use
dojo.ready(function(){
});
But that was running before the page was completely loaded. Then I used addonload() function. That too gave the same result. Finally I ended up doing something like this
require(["dojo/domReady"], function(domReady) {
domReady(function () {
setTimeout(function(){
setAfrobeat();
},500);
});
});
That is working fine, but some times I see a blink as there is delay, and very a few times this also doesn't work. If I increase that timeout to 1000 it works always, but user can see the content modification. Any perfect way like I used to do in jquery's document.ready
Regards
Aadam
The way you are loading domReady is as a typical module instead of as a dojo plugin with the "!" convention as per the dojo documentation http://dojotoolkit.org/documentation/tutorials/1.8/modules/ see using plugins.
To use domReady correctly it should look like this..
require(["dojo/domReady!"], function(){
// will not run until DOM is finished loading
});
http://dojotoolkit.org/reference-guide/1.10/dojo/domReady.html outlines when and how to use dojo/domReady! vs dojo/ready
Related
Currently, the website I'm working on uses knockout for our frontend framework. I want to incorporate Turbolinks with multiple knockout viewmodels across different pages. The problem I'm running into is that since turbolinks doesn't actually change the page, bindings get applied multiple times which results in an error.
So far here is what I have tried.
I found this article which describes exactly what I want to do but doesn't necessarily work.
His solution is to replace the ko.applyBindings with
window.applyTurboBindings = function(node, viewModelAccessor) {
return $(document).one("page:change", function() {
return ko.applyBindings(viewModelAccessor(), node);
});
};
and use it with this
applyTurboBindings(document.getElementById('my-node'), function() {
return new MyViewModel();
});
page:change is no longer a method used with turbolinks according to their documentation. So I tried it using turbolinks:load (which fires once after the initial page load, and again after every Turbolinks visit) and turbolinks:visit (fires immediately after a visit starts). That wasn't working either. The event never gets triggered when I call the method applyTurboBindings so no bindings get applied.
Here is a fiddle with a basic setup of what I'm doing. fiddle
When I run this through my debugger, the applyTurboBindings never catches the event (turbolinks:load) that is firing.
One idea I had was to use something like this:
$(document).one("turbolinks:load", function () {
// execute all js for page here
});
instead of the typical
$(function(){
// execute all js for page here
});
But I couldn't get that working either because bindings were still getting applied multiple times.
So my question is how on earth do I get this working for multiple viewmodels so the bindings don't break? Should I be organizing my js differently? Is there a simple solution I'm not seeing or is this just not a good idea use both together?
This is my first question on Stack Overflow by the way so if I'm missing anything or I didn't make my question clear enough please let me know. Thanks for your help.
I am trying to run a jQuery snippet after I initialize a custom jQuery plugin.
The snippet needs to modify part of the DOM that the plugin makes, so I need to ensure that the snippet executes after the plugin finishes initializing its DOM.
$(function() {
// initializing the plugin
PluginConstructor({
"id": "plugin-container"
});
// snippet
$('.some-div-inside-plugin-container').remove();
});
The above seems to execute non-sequentially, top to bottom, since the snippet has no effect, leading me to believe the snippet was executed before the plugin's DOM has finished initializing.
Is there a jQuery/javascript method that allows the snippet to wait for the completion of the plugin?
I cannot modify the source code of the plugin, by the way.
I think no, there's no jQuery/javascript method do that, because that depend to the plugin itself, so you have to check in the plugin you want to use for this function triggred after load (ready status).
Just like example #Marcos mentioned in comment for phantomJS we found onLoadFinished or onInitialized functions.
For some reason when I try and select an element from the page it only works if I put a timeout of 0 milliseconds. If I don't put the timeout it just returns what is there before the Ionic framework has been loaded. Any ideas? Below is my code.
The order of loading is jQuery, Ionic, Custom Script (as seen below).
Working
ionic.DomUtil.ready(function(){
setTimeout(function(){console.log($('body').html())},0);
});
Not Working
ionic.DomUtil.ready(function(){
console.log($('body').html());
});
EDIT: Obviously I could just put a timeout on everything I want to do but that's bad practice so would be nice to know the underlying cause!
EDIT (2): I have managed to get it do show the HTML doing the following... However, it is not ideal...
$(document).ready(function(){
console.log($(this).find('body')[0]);
});
It's almost as if some jQuery functions are not working even though the $ is being initiated otherwise it return $ is undefined.
I don't know ionic, but you tried with jquery stand alone? like this:
$(document).ready(function(){
console.log($('body'));
});
Maybe there are other way to do the same with ionic
Hi i trying to bounce a jpg with jquery but its not going anywhere you can check the code at
http://jsfiddle.net/sethportman/WZumy/6/
Some problems:
$("document").load(function(){
should be
$(document).ready(function() {
and
$(this).effect('bounce',1000 )
should be
$(this).effect('bounce', {}, 1000)
and beyond this, you are not loading the UI/Effects plugins, so your particular page doesn't have a .effect() method available.
You have to include jQuery UI for the effect, and be sure that jQuery has loaded properly:
http://jsfiddle.net/WZumy/11/
http://jsfiddle.net/rlemon/WZumy/12/
As posted, you will want to ensure you have loaded the library correctly (in JSFiddle) and ensure you wait for the DOM to load $(document).ready
dont know if you ever had this answered. but here is a fixed fiddle.
http://jsfiddle.net/WZumy/17/
I read http://ajaxpatterns.org/On-Demand_Javascript and got interested in "lazy loading" my JS. Questions:
Can anyone recommend a good plugin for this?
Any "real world" advice implementing such a strategy? Any "gotchas" I should look out for?
No plugin needed. You can use jQuery's $.getScript(). Just put a particular event's javascript in a separate file, then bind an event that calls $.getScript().
$(function() {
$('#yourElement').click(function() {
$.getScript('/path/to/script.js');
});
});
This will ensure that you never load more javascript than you need to. If the user never clicks on the element, you never loaded the javascript for the event. There will be a small delay for the HTTP request, so you should probably indicate a loading animation on click while the script loads.