I have lots of page ajax request on my site. I am using jquery hashchange plugin to integrate them.
Now, as I have observed, after I do $(window).hashchange I always have to re-init some other plugins (e.g. fullcalendar, tooltip, and etc.).
I've been trying to google - on how to prevent re-init during ajax request. I've tried it using live and it works but the problem is there are certain plugins that wont need to use .live function especially when it's content-based (e.g. fullcalendar, tooltip (page load), etc.). I've been trying to solve this issue by using:
$(window).on("hashchange")
I can test if the elements exist and RE-INIT THE PLUGINS (which is so dirty for me), and the problem: the plugins wont work/read.
What would be the best approach in initializing plugins once everytime you do it in ajax? Is that even possible?
P.S. still beginning to learn and explore more on ajax.
From what I understand, you want to initialize plugins loaded via AJAX calls on your page. If that's right, you can put in your plugin initialization code in the "success" callback of your AJAX call.
You only need to add the code for the plugins that need explicit initialization.
Related
I am attempting to use the 'DataTables' table plug-in for jQuery on a simple Domino XPage.
I have loaded the two required libraries from CDN's...
JQuery: ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
DataTables: cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css
I have also tried loading them from local resources (doesn't help).
I then prepare a basic table on my XPage, and include the necessary Javascript to initialise the table...
$(document).ready(function() {
$('#tableID').DataTable();
} );
When I test the XPage, I continually observe
test.xsp:15 Uncaught TypeError: $(...).DataTable is not a function
I've searched through several forums, and the general consensus is that...
a) I have loaded the libraries in the wrong order (nope!)
b) I have loaded jQuery more than once (how?)
I have many other solutions using Bootstrap and jQuery, and have never run into this issue before. So, I though I might strip the XPage back to bare bones. I got rid of all Dojo elements on the page by adding the following line to the 'xp.properties' file...
xsp.client.script.libraries=none
That actually seemed to work! I no longer observed the error. However, my page no longer looked like it should (for obvious reasons!). I've had to restore the 'xp.properties' file back to its original state, but cannot find out how to avoid the error.
Has anyone successfully used the 'DataTables' jQuery plug-in on an XPage? Any feedback or suggestions would be most appreciated!
Yes I have been doing a load of work on DataTables in XPages so it definitely works! I know your pain though....
The order of your jquery scripts in relation to each other may be okay, however there is a clash with dojo and it's AMD loader, so you have 3 options.
Option 1. Load your jquery scripts before any of the xpages scripts
Option 2. remove the 'amd loader' just before your jquery scripts and then restore it just after
Option 3. modify the javascript of the datatables so it ignores the amd problem
Option 1 : Loading your jQuery scripts first
If you are using resource aggregation, you can use this tip from Sven Hasselbach's blog, in which you use the generic 'headTag' resource tag and it will load first.
http://hasselba.ch/blog/?p=1181
If you want a solution that will work regardless of resource aggregation setting, I have an example on my blog in which you can create a viewRootRenderer which will then allow you to specify that you want a script loaded BEFORE everything else
http://camerongregor.com/2016/09/19/controlling-the-order-of-script-resources-e-g-jquery-with-a-custom-viewrootrenderer/
Option 2. Removing the AMD loader before loading scripts
There is an xsnippet which explains how to remove and then restore the amd loader so that a jquery plugin will load
https://openntf.org/xsnippets.nsf/snippet.xsp?id=hack-to-use-jquery-amd-widgets-and-dojo-together
Sven had already made a similar solution to mine above (viewRootRenderer) in which you can specify which scripts will need the amd loader disabled and it will do this for you, it is available here
http://hasselba.ch/blog/?p=2070
Option 3 : modify javascript of the jquery plugin (datatables)
Mark Roden demonstrated this on his blog. I don't really like doing it but hey it works!
https://xomino.com/category/jquery-in-xpages/
Let me know if any of this works! I hope I'm right, with javascript I never know...
I am using jQuery on my website and Honeybadger to get notified about javascript exceptions. The tool shows me many errors that occurr because the global jQuery and $ variables are overwritten by another jQuery-Version (e.g. from https://ajax.googleapis.com/...)
So I am thinking about using jQuery.noConflict to use another variable for jQuery (e.g. $j). Since I use a few addons for jQuery, this must happen right after all of them are loaded, right?
But does it work all the time or might another jQuery be injected before all my addons are loaded?
As long as all your plugins know to use $j it won't matter when the other jquery is loaded.
I'm using SilverStripe 3.0 CMS, and I need to include a Google Map into the CMS.
I'm following this steps, and besides it's a little bit old, the official documentation uses the same methods in the current version of SilverStripe (At least it seems to be the current version documentation).
The issue is in this part of the code:
Behaviour.register({
"#Form_EditForm" : {
initialize : function() {
this.observeMethod("PageLoaded", this.adminPageHandler);
this.adminPageHandler();
},
adminPageHandler : function() {
initialize();
}
}
});
First of all, Behaviour was not defined. I needed to include manually the behaviour.js file that comes within the framework. But now, I get a Type Error:
this.observeMethod is not a function
Can someone give me a hint of what can I do in order to call a javascript function when a page editor is opened in the SilverStripe CMS?
the 'Behaviour.register' call you mention is definitly deprecated and no longer available in the core code, so the docs need an update here.
unfortunately, i couldn't find a documented way to replace this behaviour, but for now the following should work for you, based on the approach in the forum post you mentioned first hand:
find the 'initGoogleMaps.js' script added here:
function getCMSFields() {
Requirements::javascript('mysite/javascript/initGoogleMaps.js');
...
inside this script, remove the Behaviour.register... block, and move the initialize function outside document.ready (or simply remove the document.ready part), so initialize is globally available (you might consider renaming it).
then, add the following inside getCMSFields:
$fields->addFieldToTab('Root.Content', new LiteralField('js', '<script>initialize();</script>'));
this will ensure the initialize function is called every time a page's 'edit view' is rendered inside the cms.
hth
As mentioned by ben,
LeftAndMain::require_javascript('mysite/javascript/initGoogleMaps.js')
is more reliable than 'include-it when needed'. Why?
Because Silverstripe uses Ajax, it is better to load any javascript or css on the first load, so that they are ready when you go to different model admin areas within the CMS in ajax-powered environment. Not loading at the start causes inconsistency and your js, css files will not be loaded when you don't hard-load that admin area.
From documentation: http://doc.silverstripe.org/framework/en/reference/requirements and http://api.silverstripe.org/3.0/class-LeftAndMain.html
The whole "include it when you need it" thing shows some weaknesses in
areas such as the CMS, where Ajax is used to load in large pieces of
the application, which potentially require more CSS and JavaScript to
be included. At this stage, the only workaround is to ensure that
everything you might need is included on the first page-load.
One idea is to mention the CSS and JavaScript which should be included
in the header of the Ajax response, so that the client can load up
those scripts and stylesheets upon completion of the Ajax request.
This could be coded quite cleanly, but for best results we'd want to
extend prototype.js with our own changes to their Ajax system, so that
every script had consistent support for this.
By the way, the ideal place for this line is _config.php in your custom module or in mysite, depending on your needs.
LeftAndMain::require_javascript('mysite/javascript/initGoogleMaps.js')
would work much better
I am new to dojo and somewhat new to symfony as well and am having a wee problem here: I want to reload a part of my page using Ajax but it includes a Javascript which needs to be executed. This isn't reallly a problem in prototype or Jquery but I just can't figure it out in dojo. (I need to use dojo because it's a part of symfony and already in heavy use on the page I'm supposed to modify. I also know this is probably improped technique but it's just a little mod I need to do and this would be the easiest way ...)
Can you help??
Thanks,
thomas
You can do it by using dojo's require tool
For more information regarding this, take a look at the documentation
dojo.require("my.path.to.file", false, true);
Call this when you want to load the javascript file, mostly after the ajax request is complete. So that if this javascript is to alter/perform some operations on the ajax loaded content placed into DOM, you won't get NOT_FOUND dom exception.
Using jQuery 1.4 I've come across an issue with external JS in an ajax response being removed when accessing it using html().
I'm creating an endless scrolling effect for a tumblr theme using an ajax request to load the next page. Tumblr outputs JS in audio and slideshow posts to render <embed> elements (Flash players) to show the content. The markup cannot be changed.
Everything works fine using jQuery 1.3.2, the external JS is executed and renders the players, however in 1.4 the javascript is removed and I'm left with the fallback text. The JS is included in the response, but when using html() within the ajax callback I can't retrieve or get the javascript to execute.
I want to use jQuery 1.4 because I'm using some of it's new features in other parts, I can get it to work using split but I'm not sure how reliable it is to split the response on a specific string.
I've prepared a basic sample (includes 2 files, test.html & request.html) demonstrating the issue. Open test.html to load a local request from request.html
Is this behaviour deliberate, can I get around it, or am I just doing it wrong?
From the jQuery docs on .ajax():
If html is specified, any embedded
JavaScript inside the retrieved data
is executed before the HTML is
returned as a string. Similarly,
script will execute the JavaScript
that is pulled back from the server,
then return the script itself as
textual data.
I'm not finding any way around it... But it seems to be behaving different from 1.3.2 and the "1.3-compat" plugin doesn't seem to fix it either.
This looks like a bug in 1.4 to me—I get the same results using your sample code; switching back to 1.3.2 allows the embedded scripts to execute again.
The documentation certainly doesn't mention anything about any changes in 1.4 which prevent the execution of scripts in retrieved HTML. I'd post a question at the jQuery forum and see if anyone else is having the problem; you might get the attention of one of the jQuery devs too.