Develop Reference

Check if JS plugin is loaded before executing code

I'd like some insight into a little problem I'm encountering with a custom JS plugin that I've made. It's reasonably simple, I'm using a plugin JS template to write out plugins, which I'll attach. I'm then initialising the plugin, and ideally need to figure out if there's a way I can check if the plugin JS file is loaded before doing anything:
plugin template
(function() {
this.MyPlugin = function() {
// default settings
const INBOUND_CONFIG = {
isEnabled: false
}
// Create options by extending defaults with the passed in arugments
if (arguments[0] && typeof arguments[0] === "object") {
this.options = extendDefaults(INBOUND_CONFIG, arguments[0]);
}
// custom public method
HoneycombInbound.prototype.getSettings = function() {
}
// Utility method to extend defaults with user options
function extendDefaults(source, properties) {
var property;
for (property in properties) {
if (properties.hasOwnProperty(property)) {
source[property] = properties[property];
}
}
return source;
}
}
}());
With the above, I'd initialise the plugin in HTML as follows:
<script src="./my-plugin.js"></script>
<script>
const plugin = new MyPlugin()
// this doesn't work if the script file isn't linked:
if (plugin) {
// do something
}
</script>
Unfortunately, a simple check of plugin doesn't actually work if the JS file isn't loaded for instance, I've even tried something like: if (new MyPlugin()) {} with little hope.
I essentially need a way of not throwing an error in the browser. Any solution I can use to check correctly if it's loaded before executing?

A solution that has worked for me is to work with the WebAPI postMessage
I've used to communicate with the client, that the plugin is ready.
So on the plugin you will need something like this:
window.postMessage("The plugin is ready to go" );
And on your client you will need to add a new listener that can catch the message:
window.addEventListener("message", myMessage, false);
const myMessage = (event) => {
if (event.data === "The plugin is ready to go")
// This is your message so do your stuff here
...
}
EDIT
So to achieve this behavio, you will need to enable on the client sidethe initialization:
const myPlugin = {
init: () => {
// Initilize the plugin if you are using the DOM you can add a parameter with an id to mount it whenever you need it
//Otherwise just configure or initilize the variables that you will use
// And here you need to pass the messsage to tell the client that everyting is ready
// Here you need to configure the origin correctly depending on your needs check the documentation for more details
window.addEventListener("message", myMessage, false);
},
someFunctionality: () => {
//This pattern is to expose the funtionalities to the client so you can achieve any
}
};
So now on your client you just need to add your script and tell the plugin to initialize:
<script type='text/javascript' src='/myPlugin.js'></script>
<script>
window.addEventListener("message", myMessage, false);
const myMessage = (event) => {
if (event.data === "The plugin is ready to go")
// This is your message so do your stuff here
...
}
myPlugin.init();
</script>

Is there any callback function after 'Friends List' loaded in cometchat?

I have integrated 'Embed Layout' comet chat on my site. Now I want to open particular friend chat on page load.
In the documentation, I've found below code to do the same. REF : Documentation Link
jqcc.cometchat.chatWith(user_id)
I have included in custom js from admin panel. However, it is showing below error in console
jqcc.cometchat.chatWith is not a function
But If I use same after friends list loaded from the console it is working fine.
How can I fix this issue?

Currently for time being I have fixed this issue by adding below code in custom js
var first_chat_loaded = false;
var first_chat = setInterval(function () {
try {
if (first_chat_loaded === false) {
// Function to get other user id defined in parent html page
var other_userid = parent.get_other_user_id();
jqcc.cometchat.chatWith(other_userid);
first_chat_loaded = true;
clear_first_load();
}
} catch (e) {
}
}, 1000);
function clear_first_load() {
clearInterval(first_chat);
}
Please let me know, If there is any proper way to do the same.

Kindly make use of this code snippet for the above mentioned issue
var checkfn = setInterval(
function(){
if(typeof jqcc.cometchat.chatWith == 'function'){
jqcc.cometchat.chatWith(user_id);
clearInterval(checkfn);
}
},
500);

DNN 8.00.02 - Get current module ID

The login page on my DNN website doesn't submit when you hit enter. After poking around in the /DesktopModules/AuthenticationServices/DNN/Login.ascx file, I found out that the culprit is that <%#ModuleId%> isn't returning the module ID.
Here is how it's used:
<script type="text/javascript">
/*globals jQuery, window, Sys */
(function ($, Sys) {
function setUpLogin() {
var actionLinks = $("a#dnn_ctr<%#ModuleId%>_Login_Login_DNN_cmdLogin");
actionLinks.click(function () {
if ($(this).hasClass("dnnDisabledAction")) {
return false;
}
actionLinks.addClass("dnnDisabledAction");
});
}
$(document).ready(function () {
$('.dnnLoginService').on('keydown', function (e) {
if (e.keyCode === 13) {
var $loginButton = $('#dnn_ctr<%#ModuleId%>_Login_Login_DNN_cmdLogin');
if ($loginButton.hasClass("dnnDisabledAction")) {
return false;
}
$loginButton.addClass("dnnDisabledAction");
eval($loginButton.attr('href'));
e.preventDefault();
return false;
}
});
setUpLogin();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
setUpLogin();
});
});
}(jQuery, window.Sys));
</script>
The login button ends up with an id of dnn_ctr3927_Login_Login_DNN_cmdLogin but the final jQuery spits out dnn_ctr_Login_Login_DNN_cmdLogin causing the code above not to work right.
How can I get the correct Module ID without hard-coding it?

I think it's a bug. I replaced #ModuleId by =ModuleId and it seem's to work.
i suggest you to try this modification in the /DesktopModules/AuthenticationServices/DNN/Login.ascx file.

(lazy) loading google maps is not working after refactoring

I only load Google maps When needed. Before I refactored my code, it worked and looked like this:
function initialize_map_brand() {
(...)
}
jQuery(document).ready(function ($) {
load_google_map('initialize_map_brand');
});
After refactoring, my code looks like this:
lib = {
loadGoogleMapScript: function(_callback) {
(...)
script.src = 'http://maps.google.com/maps/api/js?sensor=false&callback=' +_callback;
}
}
Page = {
viewPage: {
init: function() {
lib.loadGoogleMapScript(self.initialize_map);
},
initialize_map: function() {
var locations = [ (...)
}
}
}
jQuery(document).ready(function ($) {
Page.viewBPage.init();
});
And now I'm getting this error:
"NetworkError: 400 Bad Request -
http://maps.google.com/maps/api/js?sensor=false&callback=function%20()%20{var%20locations%20=%20[[%....
It seems it takes the entire function code and passes it in the url. So how can I load the Google Maps script correctly with my new code?
Se my fiddle here.

According to the documentation You need to provide a string for the url callback parameter with the name of a function in the global scope.
You instead passed the function as parameter, so the function body gets appended to the url.
var Page = {
viewPage: {
init: function() {
lib.loadGoogleMapScript('Page.viewPage.initialize_map');
},
initialize_map: function() {
}
}
};
window.Page = Page;

javascript revealing module pattern and jquery

I'm trying to up my js foo and start to use the module patter more but I'm struggling.
I have a main page with a jquery-ui element that pops up a dialog that loads an ajax requested page for data entry. The below code is contained within the popup ajax page.
After the pop up is loaded the Chrome console is able to see and execute ProtoSCRD.testing() just fine. If I try to run that in the jQuery.ready block on the page, I get:
Uncaught ReferenceError: ProtoSCRD is not defined
Yet i can execute toggleTypeVisable() in the ready block and life is good. Can anyone shed some light?
$(document).ready(function() {
setHoodStyleState();
$('#hood-style').change(function(){
hstyle = $('#hood-style').val();
if ( hstyle.indexOf('Custom') != -1) {
alert('Custom hood style requires an upload drawing for clarity.');
}
setHoodStyleState();
});
setCapsState();
$('#caps').change(function(){
setCapsState();
});
setCustomReturnVisibility();
$('#return').change(function(){ setCustomReturnVisibility(); });
toggleTypeVisable();
$('#rd_type').change(function(){
toggleTypeVisable();
});
ProtoSCRD.testing();
});
function toggleTypeVisable(){
if ( $('#rd_type').val() == 'Bracket' ) {
$('.endcap-ctl').hide();
$('.bracket-ctl').show();
}
if ( $('#rd_type').val() == 'Endcap' ) {
$('.bracket-ctl').hide();
$('.endcap-ctl').show();
}
if ( $('#rd_type').val() == 'Select One' ) {
$('.bracket-ctl').hide();
$('.endcap-ctl').hide();
}
}
ProtoSCRD = (function($, w, undefined) {
testing = function(){
alert('testing');
return '';
}
getDom = function(){
return $('#prd-order-lines-cnt');
}
return {
testing: testing,
getDom: getDom
};
}(jQuery, window));
calling the popup dialog like so - which is in fact in another ready in a diff file on the parent page:
// enable prototype button
$( "#proto-btn" ).click(function(e){
e.preventDefault();
showPrototype();
});

I don't know if it will solve your problems at all, but you are definitely missing several var statements you really should have:
var ProtoSCRD = (function($, w, undefined) {
var testing = function(){
alert('testing');
return '';
};
var getDom = function(){
return $('#prd-order-lines-cnt');
};
return {
testing: testing,
getDom: getDom
};
}(jQuery, window));
IMHO, it's best practice to use var for every variable you declare. (Function declarations do so implicitly.)
But I really don't know if this will help solve anything. But it should store everything in its proper scope.
Update
Here's one possible issue: if the document is already ready (say this is loading at the end of the body), then perhaps jQuery is running this synchronously. Have you tried moving the definition of ProtoSCRD above the document.ready block?