It seems to be impossible to disable auto initialization:
Both
$.lazyLoadXT.autoInit=false;
AND
$.extend($.lazyLoadXT, {
autoInit: false
});
do not prevent lazy loading.
jsfiddle:
https://jsfiddle.net/cvlug/16f5h1mn/
You may want to try the code specified in the docs:
$.lazyLoadXT.autoInit=false;
That didn't work for our project, which loads jQuery and lazyLoadXT sandboxed within a Require.js object. LazyLoadXT appears to be trying to access jQuery as window.$ which, but that is not where jQuery is located when it's loaded inside Require.js.
We ended up making a fork of lazyLoad that addresses this issue, by removing their jQuery wrapper and wrapping their code inside a Require.js define statement. Now it's all the same scope. Maybe it will be useful:
https://github.com/Sitetheory/lazy-load-xt
A while back, I looked into a solution for the "flash of unstyled content" when using Dojo and Dojo themes. Someone suggested to combine everything by creating a build, and it'll reduce the load/parse time and remove the need to use preloader overlays, etc.
However, it seems like Dojo is severely lacking in straightforward, "real world" useage examples and tutorials for a lot of its functionality, this especially. A lot of the resources tell you how to set up a build, but not how to implement it.
Let's say I have this in "pageinit.js":
require([
'dojo/parser',
'dojo/dom',
'dojo/dom-class',
//etc...
'dijit/form/ValidationTextBox',
'dijit/form/CheckBox',
// etc...
// Dom Ready call
'dojo/domReady!']
function(
Parser,
Dom,
Class,
// etc...){
// do stuff with parser, dijits, so on.
}
)
Some of the require calls were removed for brevity, but there's a handful of dom requires, style classes, some dijits, etc. When this page loads, there's the flash of unstyled content and then it's fine.
Using the Dojo Web Builder, I selected the modules I'm using, and ran it. It downloaded a zip with a lot of files under it, including a new dojo.js and custom_layer.js.
So my question is now, how do I use these new combined and minified files in place of my "non-build" version? What do I require? Or do I?
So confused...
First, let's understand how the AMD(require/define) API works.
require([
'dojo/parser',
'dojo/dom',
'dojo/dom-class'
], function(parser, dom, domClass){
});
This is going to call the require function, specifying that I need three modules in order to do some work. require will get each module. If will determine if the module has been loaded. If it hasn't it will asynchronously get the file, and load the module into the javascript runtime. Once require has retrieved all of your required modules, it will execute your callback (the function) passing the modules as arguments to the function.
Next, let's understand the build. The dojo build does exactly what you describe. It will compress a bunch of the individual files into a single file. this will make the page load quicker and prevent that 'flash' that you describe.
Finally, putting it all together, you should include the custom_layer.js file along with the dojo.js file.
<script type="text/javascript" src="path/to/dojo/dojo.js" />
<script type="text/javascript" src="path/to/custom_layer.js" />
The web browser will load these two files and evaluate the code. Instead of lazily loading each module in it's own file, the module will already be loaded because it was defined in the custom_layer.js.
So, the answer to your final question is that you should NOT change any of your code based on the specific version of code (source vs custom build) that you are using. Using the AMD api, it should just work.
Not sure if it's best practice or not, but I was seeing the flash of unstyled content when I first started (a few days ago), and saw several examples somewhere that takes care of by just hiding the <body>. Parse will unhide it when it's ready to show something.
<body style="visibility: hidden;">
I have a simple comment system when I can dynamically add replies and I am trying to add a UJS way of allowing the user to cancel the reply. I have a text field with id="comment_reply_content" and followed with an
<input id="cancel_reply" data-remote="true" class="btn btn-mini" type="button" value="Cancel">
In my application.js file I added:
$('#cancel_reply').live('ajax:success', function() {
alert('hello');
// $('#comment_reply_content').val('');
});
No matter what I do I can't get this to work. I commented out the actual functional javascript that clears the form etc. but now I have resorted to a simple alert for testing. Placing the alert alone in my application.js works fine. I have *.js files in my controllers which are working to create the new reply forms etc. so I know that UJS is working. I am pretty sure I am just missing something easy here. I have tried changing the live to bind with no success.
I am using haml for creating views in rails. I want some of these views to also be available as javascript templates. What is the best way to do that without repeating myself?
I was hoping I can do something like this:
Create a haml view, e.g.
app/views/my_view.html.haml
and create a js template as:
app/assets/templates/my_view.js
And inside the js template, having something like:
//= Rails.views.render('my_view')
Is something like this possible?
You can use haml in a javascript thing if you want by putting it in a some_file.js.haml file.
For example, you can use .js.haml files as replacements for the js.erb files that might be used in a javascript call back to mess around with the page.
I am getting an error message as element.dispatchEvent is not a function. I am using jQuery with prototype in rails 3 application. In my layout file, I have added the js files as below
javascript_include_tag 'jquery','jquery_ujs','prototype','shadowbox/shadowbox.js'
<script type="text/javascript">jQuery.noConflict();</script>
I have also added jQuery.noConflict as above and used jQuery instead of $ in jQuery functions. Any idea how to resolve this.?
In my another controller page action I have also mentioned the same thing as there are some js files which needs to be reloaded only for that particular page.
I am a newbie in js as well as rails also.
you should use jQuery.noConflict right after src to the jQuery library
Using jQuery.noConflict(); should be enough. Please check the code of the page in your browser so you can see when prototype is actually added.
You should have jQuery, then the .noConflict call, then prototype.
Besides adding the 'no conflict' method, I do this instead (though both would probably be best):
I'll 'preset' my custom script page. Let's say my prediction is that I will use maybe 5 blocks of code in a page - this is how I preset my page:
jQuery(document).ready(function($) {
// use $ in here like normal!
});
jQuery(document).ready(function($) {
});
jQuery(document).ready(function($) {
});
jQuery(document).ready(function($) {
});
etc. etc.
Notice this uses the jQuery object itself to pass as the callback function to the .ready method so you can once again use the $ identifier within the functions. I can rename it so their will never be a conflict, and I can use the $ identifier within the function like I normally would. Hope that helps.