I need implement this custom Webcontrol:
http://eonasdan.github.io/bootstrap-datetimepicker
Javascript Error:
Could not execute returned javascript: $ is not defined
...
$("#XibKlIt1").datetimepicker({
format: 'DD-MM-YYYY',
});
$("#XibKlIt1").on("dp.change", function(e) {
console.log( "Handler for .change() called." );
console.log( e.date );
});
SSCalendarHTML Constant:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='[ControlID]'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</script>
</div>
</div>
SSCalendarJS Constant:
$("#[ControlID]").datetimepicker({
format: 'DD-MM-YYYY',
});
$("#[ControlID]").on("dp.change", function(e) {
console.log( "Handler for .change() called." );
console.log( e.date );
});
In SetupHTML:
...
HTML=ReplaceAll(SSCalendarHTML,"[ControlID]",me.ControlID)
Return HTML
In SetupJavascript Framework:
...
JS=ReplaceAll(SSCalendarJS,"[ControlID]",me.ControlID)
Return JS
This javascript code works correctly in this url:
https://jsfiddle.net/qnntwvk5/
If $ is not defined jQuery hasn’t loaded.
Thanks Tim, but I check that JQuery is loaded. Continues the same error. I show image of Javascript loading:
Full Javascript Error Trace:
Could not execute returned javascript: $ is not defined
Source: var langdir = document.getElementsByTagName('body')[0]; if(langdir) { langdir.removeAttribute('dir'); }
var langdir = document.getElementsByTagName('body')[0]; if(langdir) { langdir.setAttribute('lang','es'); }
Xojo.createNamespace("SoftwareSimple.bootstrap.TextField");
Xojo.createNamespace("SoftwareSimple.bootstrap.page");
Xojo.loadLibraries("/F39DA36B1CF7053FBB869C3D7D1B35DB6A328C1C/files/8001-0695-8725-7556-4878/01_jquery-3.1.1.min.js", function() {
setTimeout(console.debug('load'),100);
});
Xojo.loadLibraries("/F39DA36B1CF7053FBB869C3D7D1B35DB6A328C1C/files/1817-5062-6531-9081-6091/02_bootstrap.min.js", function() {
setTimeout(console.debug('load'),100);
});
Xojo.loadLibraries("/F39DA36B1CF7053FBB869C3D7D1B35DB6A328C1C/files/9480-9090-6779-3022-1841/03_moment-with-locales.js", function() {
setTimeout(console.debug('load'),100);
});
Xojo.loadLibraries("/F39DA36B1CF7053FBB869C3D7D1B35DB6A328C1C/files/2976-9025-7502-2908-6281/05_jstz.min.js", function() {
setTimeout(console.debug('load'),100);
});
Xojo.loadLibraries("/F39DA36B1CF7053FBB869C3D7D1B35DB6A328C1C/files/6235-8776-2535-2953-2772/07_bootstrap-datetimepicker.js", function() {
setTimeout(console.debug('load'),100);
});
Xojo.get('PquFDGXy').onchange = function(){Xojo.triggerServerEvent('PquFDGXy', 'MyTextChanged', [SSTextField1,Xojo.get('PquFDGXy').value]);};
Xojo.get('PquFDGXy').onfocus = function(){Xojo.triggerServerEvent('PquFDGXy', 'MyGotFocus');};
Xojo.get('PquFDGXy').onblur = function(){Xojo.triggerServerEvent('PquFDGXy', 'MyLostFocus');};
Xojo.get('PquFDGXy').onmousedown = function(){Xojo.triggerServerEvent('PquFDGXy', 'MyMouseDown');};
Xojo.get('PquFDGXy').onmouseup = function(){Xojo.triggerServerEvent('PquFDGXy', 'MyMouseUp');};
Xojo.get('PquFDGXy').onmouseover = function(){Xojo.triggerServerEvent('PquFDGXy', 'MyMouseEnter');};
Xojo.get('PquFDGXy').onmouseout = function(){Xojo.triggerServerEvent('PquFDGXy', 'MyMouseExit');};$("#PquFDGXy").datetimepicker({
format: 'DD-MM-YYYY',
});
$("#PquFDGXy").on("dp.change", function(e) {
console.log( "Handler for .change() called." );
console.log( e.date );
});
new frameworkObject('Ky2AQnxF',['Close','Open','Shown']);
Xojo.controls['Ky2AQnxF'].setEnabled(true);
Xojo.view.showPage('Ky2AQnxF');
document.title = "FileDown";
Xojo.view.dismissLoader();
I can assure you, that is the cause.
jQuery may have completely loaded after the attempt to use it.
Send me the project file by email and I’ll see if I can tweak it to work for you.
[quote=294986:@Tim Parnell]I can assure you, that is the cause.
jQuery may have completely loaded after the attempt to use it.
Send me the project file by email and I’ll see if I can tweak it to work for you.[/quote]
Thanks Tim for your offer. I’m doing some tests, because not convince me a javascript library as heavy as JQuery…
The JQuery library is going to load synchronously, and that error disappears:
In SetupHTML:
...
WebFile1.Append new WebFile '
Dim Index As Integer = WebFile1.Ubound
WebFile1 (Index) = WebFile.Open (f)
...
if instr (0, WebFile1 (Index) .URL.Uppercase, "JQUERY")> 0 then
ExecuteJavascript ( "loadJavaScriptSync ( '" + WebFile1 (Index) .url + "');")
end if
...
JS = SSLoadJSFunction '<-Constant
JS = JS + "<script> var = new cScriptLoader ScriptLoader (["
for i = 0 to WebFile1.Ubound
if instr (0, WebFile1 (i) .URL.Uppercase, "JQUERY")> 0 then
'nothing
else
JS = JS + " '" + WebFile1 (i) .url + "'"
if i <> Then WebFile1.Ubound
JS JS = + ","
end if
end if
next i
JS = JS + "]); ScriptLoader.loadFiles (); </ script>"
HTML = HTML + JS
Return HTML
Javascript Code Functions in one Constant:
cScriptLoader var = (function ()
{
cScriptLoader function (files)
{
_this var = this;
this.log = function (t)
{
console.log ( "ScriptLoader:" + t);
};
this.withNoCache = function (filename)
{
if (filename.indexOf ( "?") === -1)
filename + = "? no_cache =" + new Date () getTime ().;
else
filename + = "& no_cache =" + new Date () getTime ().;
return filename;
};
this.loadStyle = function (filename)
{
// HTMLLinkElement
var link = document.createElement ( "link");
link.rel = "stylesheet";
link.type = "text / css";
link.href = _this.withNoCache (filename);
_this.log ( 'Loading style' + filename);
link.onload = function ()
{
_this.log ( 'Loaded style "' + filename + ''. ');
};
link.onerror = function ()
{
_this.log ( 'Error loading style "' + filename + ''. ');
};
_this.m_head.appendChild (link);
};
this.loadScript = function (i)
{
var script = document.createElement ( 'script');
script.type = 'text / javascript';
script.src = _this.withNoCache (_this.m_js_files [i]);
loadNextScript var = function ()
{
if (i + 1 <_this.m_js_files.length)
{
_this.loadScript (i + 1);
}
};
script.onload = function ()
{
_this.log ( 'Loaded script "' + _this.m_js_files [i] + ''. ');
loadNextScript ();
};
script.onerror = function ()
{
_this.log ( 'Error loading script "' + _this.m_js_files [i] + ''. ');
loadNextScript ();
};
_this.log ( 'Loading script "' + _this.m_js_files [i] + ''. ');
_this.m_head.appendChild (script);
};
this.loadFiles = function ()
{
// This.log (this.m_css_files);
// This.log (this.m_js_files);
for (var i = 0; i <_this.m_css_files.length; ++ i)
_this.loadStyle (_this.m_css_files [i]);
_this.loadScript (0);
};
this.m_js_files = [];
this.m_css_files = [];
this.m_head = document.getElementsByTagName ( "head") [0];
// This.m_head = document.head; // Only IE9 +
endsWith function (str, suffix)
{
if (str === === null null || suffix)
return false;
str.indexOf return (suffix, str.length - suffix.length) == -1!;
}
for (var i = 0; i <files.length; ++ i)
{
if (endsWith (files [i], ".css"))
{
this.m_css_files.push (files [i]);
}
else if (endsWith (files [i], "js"))
{
this.m_js_files.push (files [i]);
}
else
this.log ( 'Error unknown filetype "' + files [i] + ''. ');
}
}
cScriptLoader return;
}) ();
loadJavaScriptSync function (filePath)
{
var req = new XMLHttpRequest ();
req.open ( "GET" filePath, false); // 'False': synchronous.
req.send (null);
headElement var = document.getElementsByTagName ( "head") [0];
var = document.createElement newScriptElement ( "script");
newScriptElement.type = "text / javascript";
newScriptElement.text = req.responseText;
headElement.appendChild (newScriptElement);