No data in callback : how to pause load of a javascript function - javascript

We are having an issue in the following javascript code.
doCallback function is happening before doMainProcess gets finished.
So every time we get result = null in the doCallback.
Is there a way to pause load of the doCallback to wait until we get the result ?
Edit: setResult is happening multiple times and is asynchronous via iframe, and we don't know timing. Also callback only happens some of the time decided by another process.
So we can not simply change the position of doCallback.
<html>
<head>
<script>
var result;
var callback = "callback";
var url = "http://www.example2.com/getResponse/";
function iframeCallback() {
var iframe = document.createElement('iframe');
iframe.style.border='0px';
iframe.style.width ='0px';
iframe.style.height='0px';
document.body.appendChild(iframe);
var iDocument;
if (iframe.contentDocument) {
iDocument = iframe.contentDocument;
} else if (iframe.contentWindow) {
iDocument = iframe.contentWindow.document;
} else if (iframe.document) {
iDocument = iframe.document;
}
var content = "<script type='text/javascript'>";
content += "var jsText = \"<script type='text/javascript' src='" + url + "'></\" + \"script>\";";
content += "document.write(jsText);";
content += "</"+"script>";
content += "<script type='text/javascript'>";
content += "var data = eval('"+callback+"');";
content += "window.parent.setResult(data);";
content += "</"+"script>";
iDocument.open();
iDocument.write(content);
iDocument.close();
}
function setResult(data) {
result = data;
}
function doMainProcess() {
iframeCallback()
}
function doCallback() {
//we need to wait here until we get the result.
alert(result);
}
</script>
</head>
<body>
<script>
doMainProcess();
</script>
<script>
doCallback();
</script>
</body>
<html>

Yes,
delete this:
<script>
doCallback();
</script>
Change this:
function setResult(data) {
result = data;
}
to this:
function setResult(data) {
result = data;
doCallback();
}

A clunky solution (that doesn't involve my having to read your code carefully):
var readyForCallback = false;
function doMainProcess() {
// your code here
readyForCallback = true;
}
function doCallback(arg1,arg2,arg3,etc) {
if (!readyForCallback) {
// anonymous function as way to keep the original callback
// argument(s) with a timeout
setTimeout(function(){doCallback(arg1,arg2,arg3,etc);},20);
return;
}
// your code here
}
Note: within your timeout function you could also use doCallback.apply() with the arguments object to automatically handle any number of arguments, but I didn't include this in my code because off-hand I forget whether you can just use the arguments object directly or if you'd have to first create a proper array populated from arguments.

Related

How to call "somename.html" from a method in a .gs file by passing a parameter?

I am creating a web-app, in which it has some validation before it successfully loads the "searchByDocumentPage.html" by passing a parameter.
In my previous code, I called the doGet() method directly using ScriptApp.getService().getUrl() so other buttons do not have any issue in loading new HTML page.
Since I do some validation, for some reason I can't load the "searchByDocumentPage.html" HTML Page.
1st I tried:
var html = ScriptApp.getService().getUrl()+"?v=submitDocumentID";
return html;
2nd:
return HtmlService.createTemplateFromFile("searchByDocumentPage").evaluate();
if(fileID === ""){
document.getElementById("errorMessageDiv").innerHTML='<label style="color:red;text-align:center;font-style: italic;font-size: 12px;">Please key in the Document ID</label>';
}
else{
google.script.run.withSuccessHandler(fnFileID).getFiles(fileID);
}
function fnFileID(returnedVal){
if(returnedVal === "No File"){
document.getElementById("errorMessageDiv").innerHTML='<label style="color:red;text-align:center;font-style: italic;font-size: 12px;">This Document ID do not exist</label>';
}
/*else{
ScriptApp.getService().getUrl()+"?v=submitDocumentID";
}*/
}
function getFiles(fileID) {
var returnValue = "";
var arrayTblFile = [];
var selectStatementTblFile = "SELECT File_ID FROM webapp_tblFile WHERE File_ID='" + fileID +"'";
arrayTblFile= MySQLSelectQuery(selectStatementTblFile);//Call the SQL
}
function from MySQLConnection.gs
if(arrayTblFile.length == 0){
returnValue = "No File";
}
else{
loadSearchByDocPage(fileID);
}
return returnValue;
}
function loadSearchByDocPage(fileID){
return HtmlService.createTemplateFromFile("searchByDocumentPage").evaluate();
//var html = ScriptApp.getService().getUrl()+"?v=submitDocumentID";
//return html;
}
function doGet(e){
var params = e.parameter;
if(params.v === 'newDoc'){
return HtmlService.createHtmlOutputFromFile("newDocumentPage");
}
else if(params.v === 'submitDocumentID'){
return HtmlService.createTemplateFromFile("searchByDocumentPage").evaluate();
}
else{
return HtmlService.createTemplateFromFile("landingPage").evaluate();
}
}
Expected to load "searchByDocumentPage.html" by passing parameter.
I am not sure if this is best practice, I have done the following and managed to get what i intended to see.
Append with hyperlink and included the parameter in the link
Trigger the hyperlink
doGet() triggered and the page loaded successfully with the parameter
function fnFileID(returnedVal){
$("#btnSubmit_DocumentID").append(
'<a id="loadSearchByDoc" href="<?= ScriptApp.getService().getUrl(); ?>?v=submitDocumentID&fileID=' + returnedVal + '"></a>'
);
document.getElementById('loadSearchByDoc').click();
}
`function doGet(e){
if(params.v === 'submitDocumentID'){
return HtmlService.createTemplateFromFile("searchByDocumentPage").evaluate();
}
}
`

Function within function in JavaScript - Need to understand this code:

I have below code within a function called render. How do I call the str variable value outside render function?
Also, please can you explain below code? I'm fairly new to js and head is hurting looking at the function calls having functions as a parameter.
My understanding is that app.getList is an object which takes function as a parameter? but it is not returning anything. Sorry, I'm lost here.
app.getList("FieldList", function(reply){
var str = "";
$.each(reply.qFieldList.qItems, function(index, value) {
str += value.qName + ' ';
});
console.log(str);
});
Full Code:
define(["jquery",
//mashup and extension interface
"qlik",
//add stylesheet
"text!./css/mystyle.css",
"client.utils/state",
"client.utils/routing"
],
function($, qlik, cssContent, clientState, clientRedirect) {
/*-----------------------------------------------------------------*/
// function redirect (sheetId){
// clientRedirect.goToSheet(sheetId, Object.keys(clientState.States)[clientState.state])
// }
/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/
var render = function($elem, layout) {
var html = '',
app = qlik.currApp();
//get list of tab objects and insert into div
app.getAppObjectList('sheet', function(arrayitem) {
//for each sheet in the app, create a list item
$.each(arrayitem.qAppObjectList.qItems, function(myindex, myvalue) {
//include the sheet id as the list item id to be used as a reference for active sheet
html += '<li id="' + myvalue.qInfo.qId + '">'; // onClick="redirect(' + value.qInfo.qId + ');
//wrap anchor tag to be used by bootstrap styling
html += '<a>';
//give the link the same name as the sheet
html += myvalue.qData.title;
html += '</a>';
html += '</li>';
});
html += '</ul></div>';
html += "<button id='myButton'> Click Me!! </button>";
console.log(arrayitem.qAppObjectList);
console.log(html);
//insert html into the extension object
return $elem.html(html);
});
/* Test Code Start from here */
app.getList("FieldList", function(reply) {
var str = "";
$.each(reply.qFieldList.qItems, function(key, value) {
str += value.qName + ' ';
});
console.log(str);
});
};
/*-----------------------------------------------------------------*/
return {
/*-----------------------------------------------------------------*/
paint: function($element, layout) {
console.count();
/*-----------------------------------------------------------------*/
$(function() {
$element.html("#myButton").click(function() {
// for(var mynum = 1; mynum <= 5; mynum++){
// alert('button test' + mynum);
// };
});
});
/*-----------------------------------------------------------------*/
render($element, layout);
/*-----------------------------------------------------------------*/
}
};
});
app.getList is probably asynchronous (meaning it runs in the background). The function you've passed to it is a callback. That function will be ran at some point in the future, once the AJAX call (or whatever asynchronous method is ran) is done.
Your callback is passed reply, which is the "return" value from getList(). You cannot access str from outside of this function. You need to do whatever code with reply and/or str in that function only.

Context When Loading JS File Dynamically [duplicate]

I am a JavaScript newbie and learn by working on a pure JavaScript "project" that calculates mathematical functions. It all works well. Now, as a further step, I want to make the messaging multilingual. The code should be capable of loading the appropriate language file at runtime. For the dynamic loading issue, I read and found solutions on Web pages like this one.
Before writing the dynamic code, I loaded it statically and the test code worked well. The code I am asking for help about is just making the minor difference of loading a "script" element.
The code where I run into problems is the this.getString function, where it is not possible to access the de element in the language file. At line console.log(eval(language, tag));, I get the error message "Uncaught ReferenceError: de is not defined".
//File: Utils/Lang/js/FileUtils.js
function Language(language) {
var __construct = function(dynamicLoad) {
if (typeof language == 'undefined') {
language = "en";
}
// Load the proper language file:
loadFile("js/resources/lang.de.js");
return;
} ()
this.getString = function(tag, strDefault) {
console.log("getString(" + tag + ", " + strDefault + "): ");
console.log("getString(...): document = " + document);
console.log("getString(...): eval(" + language + ", " + tag + ") = ");
console.log(eval(language, tag));
var strReturn = eval('eval(language).' + tag);
if (typeof strReturn != 'undefined') {
return strReturn;
} else {
return (typeof strDefault != 'undefined')
? strDefault
: eval('en.' + tag);
}
}
}
The static test code that works is not included, where I can access the de element.
My question: How to load the language file properly so that the de tag is accessible?
Thank you for your help!
//File: Utils/Files/js/FileUtils.js
function loadFile(filepathname) {
var reference = document.createElement('script');
reference.setAttribute("type", "text/javascript");
reference.setAttribute("src", filepathname);
if (typeof reference != 'undefined') {
document.getElementsByTagName("head")[0].appendChild(reference);
}
console.log("loadFile(\"" + filepathname + "\"): document = " + document);
}
//File: Utils/Lang/js/resources/lang.de.js:
de = {
pleaseWait: "Bitte warten..."
};
//File: Utils/Lang/js/resources/lang.en.js
en = {
pleaseWait: "Please wait..."
};
//File: Utils/Lang/js/TestLanguage.js:
function output() {
console.log("output()");
var codes = ['de', 'en'];
for (var i = 0; i < codes.length; i++) {
var translator = new Language(codes[i]);
var message = "output(): in " + translator.getLanguage() + ": ";
message += translator.getString('pleaseWait');
console.log(message);
}
}
<!--File: Utils/Lang/TestLang.html:-->
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Test languages</title>
<script type="text/javascript" src="../Files/js/FileUtils.js"></script>
<script type="text/javascript" src="js/Language.js"></script>
<script type="text/javascript" src="js/TestLanguage.js"></script>
</head>
<body>
<button name="outputButton" onclick="output();">Click</button>
<br>Please press [F12] so that you can see the test results.
</body>
</html>
When you add the script tag to your document, it is not loaded synchronously. You need to wait for the file to be loaded before you can use the code that was in it.
you may be able to redesign your code to use a script.onload callback:
var reference = document.createElement('script');
// ...
reference.onload = function() {
alert("Script loaded and ready");
};
but for this scenario, if you don't have many language string you may be best to just load them all statically.
How to dynamically load a script file (the most basic version, also there are multiple options to this):
function loadScriptFile(scriptPath, jsFile, callBack)
{
var scriptTag = document.createElement("script"); //creates a HTML script element
scriptTag.language = "JavaScript"; //sets the language attribute
scriptTag.type = "text/javascript";
scriptTag.src = scriptPath + jsFile + ".js"; //the source
if (callBack)
{
scriptTag.onload = callback; //when loaded execute call back
}
var scriptTagParent = document.getElementsByTagName("script")[0];
if (scriptTagParent)
{
scriptTagParent.parentNode.insertBefore(scriptTag, scriptTagParent);
}
else
{
document.body.appendChild(scriptTag);
}
}
How it works:
Run loadScriptFile("scripts", "math", startProgram). The first two arguments will point to your file and folder. The last argument is a callback function. When defined this will be executed once the script tag has finished loading and the script is available in the global scope. The script will be dynamically added to your page. If there is a script element present on the page, this will be added before that (to keep the mark up nice). If not it will be appended to the body. (this is only visual).
The callback part is the most interesting. Since your script will now be asynchronical, you'll need to use callback to tell your program that the necessary files are loaded. This callback is fired when the script file is loaded, so you won't get script errors.
Just a basic example of what I meant in my comment:
This is not an answer to your question, it's an alternative way (I think it's better to manage). Pure Javascript (with help of XML)
XML-file: language.xml
Basic XML structure:
<language>
<l1033 name="english" tag="en-US">
<id1000>
<![CDATA[
Hello World!
]]>
</id1000>
</l1033>
<l1031 name="german" tag="de-DE">
<id1000>
<![CDATA[
Hallo Welt!
]]>
</id1000>
</l1031>
</language>
What did I do:
I constructed a root element called language. Within that wrote two language strings called l1033 for English and l1031 for German. Note that a letter is prepended before the language code. XML will throw an error when a tag starts with a digit. a CDATA block is used to prevent any problems with special characters.
Now the loading will be done by AJAX:
var xmlLoader = new XMLHttpRequest();
xmlLoader.onreadystatechange = trackRequest; //event to track the request, with call back
xmlLoader.open("get", "language.xml", true); //set asynchronous to true
xmlLoader.send(null);
function trackRequest()
{
if (this.status == 200 && this.readyState == 4) //all is good
{
globalLanguageFile = this.responseXML;
startProgram(); //fictive function that starts your program
}
}
Now the XML is loaded. How to load strings from it?
function loadLanguageString(code, id, fallback)
{
var word = fallback;
if (globalLanguageFile.getElementsByTagName("l"+code).length > 0)
{
if (globalLanguageFile.getElementsByTagName("l"+code).[0].getElementsByTagName("id"+id).length > 0)
{
//found the correct language tag and id tag. Now retrieve the content with textContent.
word = globalLanguageFile.getElementsByTagName("l"+code).[0].getElementsByTagName("id"+id)[0].textContent;
}
}
return word; //when failed return fall back string
}
How to call the function:
loadLanguageString(1031, 1000, "Hello World!");
I found the right answer to my question using the info from GarethOwen. Here are the code modifications I had to do:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Test languages</title>
<script type="text/javascript" src="../Arrays/js/ArrayUtils.js"></script>
<script type="text/javascript" src="../Files/js/FileUtils.js"></script>
<script type="text/javascript" src="../Logic/js/LogicalUtils.js"></script>
<script type="text/javascript" src="js/LanguageUtils.js"></script>
<script type="text/javascript" src="js/TestLanguageUtils.js"></script>
</head>
<!-- body onload="load(null, '../Maths/js/resources')" -->
<body onload="load();">
<button onclick="output();">Click</button><br>
Please press [F12] so that you can see the test results.
</body>
</html>
TestLanguage.html: Augmented the body tag
<body onload="load()">
TestLanguage.js:
2a. Added the load() function requested by the HTML page now:
var gCodes = ['de', 'en', 'tr'];
function load() {
console.log("load()");
for (var i = 0; i < codes.length; i++) {
new Language(codes[i]);
}
}
2b. Using the global gCodes variable also in the output() function
Language.js: To test the whole better, I made the code in the function Language a little bit more elaborate by changing the line in the constructor in function Language(language) to:
// Load the proper language file:
if (eval("gLoaded.indexOf('" + language + "') < 0")) {
loadFile("js/resources/lang." + language + ".js");
gLoaded[gLoaded.length] = language;
}
Thank you for your support! :-)
//Lang/js/Lang.js:
"use strict";
/**
* Object for multilingual message handling.
*
* #param language
*/
function Language(language) {
var __construct = function(dynamicLoad) {
if (typeof language == 'undefined') {
language = "en";
}
// Load the proper language file:
switch (language) {
case "de":
loadFile("js/resources/lang.de.js");
break;
case "tr":
loadFile("js/resources/lang.tr.js");
break;
default:
loadFile("js/resources/lang.en.js");
}
return;
}()
/**
* Returns the language of that object.
*
* #returns The language
*/
this.getLanguage = function() {
var strLanguage;
switch (language) {
case "de":
strLanguage = "German";
break;
case "tr":
strLanguage = "Turkish";
break;
default:
strLanguage = "English";
}
return strLanguage;
}
/**
* Returns the language code of that object.
*
* #returns The language code
*/
this.getString = function(tag, strDefault) {
var strReturn = eval('eval(language).' + tag);
if (typeof strReturn != 'undefined') {
return strReturn;
} else {
return (typeof strDefault != 'undefined') ? strDefault : eval('en.' + tag);
}
}
}
//Lang/js/TestLang.js:
"use strict";
var gCodes = ['de', 'en', 'tr'];
function load() {
console.log("load()");
for (var i = 0; i < gCodes.length; i++) {
new Language(gCodes[i]);
}
}
/**
* Object for multilingual message handling.
*
* #param language
*/
function output() {
console.log("output()");
for (var i = 0; i < gCodes.length; i++) {
var translator = new Language(gCodes[i]);
var message = "output(): in " + translator.getLanguage() + ": ";
message += translator.getString('pleaseWait');
console.log(message);
}
}
//Utils/Files/js/FileUtils.js:
"use strict";
/**
* Object with file utilities
*
* #param filepathname
*/
function loadFile(filepathname) {
var methodName = "loadFile(" + filepathname + "): "
var reference = document.createElement('script');
reference.setAttribute("type", "text/javascript");
reference.setAttribute("src", filepathname);
if (typeof reference != 'undefined') {
document.getElementsByTagName("head")[0].appendChild(reference);
}
reference.onload = function() {
console.log(methodName + "onload(): Language script loaded and ready!");
}
}
Here is the console output:
Here is the output:
load()
loadFile(js/resources/lang.de.js): onload(): Language script loaded and ready!
loadFile(js/resources/lang.en.js): onload(): Language script loaded and ready!
loadFile(js/resources/lang.tr.js): onload(): Language script loaded and ready!
output()
output(): in German: Bitte warten...
output(): in English: Please wait...
output(): in Turkish: Lütfen bekleyiniz...
loadFile(js/resources/lang.de.js): onload(): Language script loaded and ready!
loadFile(js/resources/lang.en.js): onload(): Language script loaded and ready!
loadFile(js/resources/lang.tr.js): onload(): Language script loaded and ready!

Calling multiple functions from Salesforce Javascript Button

I'm fairly new at javascript, so this might be a silly question.
I've built a javascript button in Salesforce that does the following when clicked (http://i.stack.imgur.com/hqMhp.png)
What I'd like it to do for now is just display 4 separate alerts (I'll add in the real functions later).
Here's the code I'm using:
{!REQUIRESCRIPT("/soap/ajax/20.0/connection.js")}
var leadObj = new sforce.SObject("Lead");
var countryVal = "{!Lead.Country }";
var leadID = "{!Lead.Id}";
var ownerID = "{!Lead.OwnerId }";
function insertScript(script){
var targetNode = document.createElement('div'); // construct div for script injection
document.body.appendChild(targetNode);
try {
var el = document.createElement('script');
el.type="text/javascript";
el.innerHTML = script;
targetNode.appendChild(el);
} catch (e){
var el = document.createElement('span');
targetNode.appendChild(el);
el.innerHTML = "<br /><scr"+"ipt type='text/javascript' defer='defer'>"+script+"</script" + ">";
}
var box = new SimpleDialog("hersh"+Math.random(), true);
parent.box = box;
box.setTitle("Lead Rerouter");
box.createDialog();
box.setWidth(350);
box.setContentInnerHTML("<p align='center'><img src='/img/icon/profile24.png' style='margin:0 5px;'/><img src='/img/sales/quotes/sync_overlay_arrow.png' style='margin:5px;'/><img src='/img/icon/custom51_100/globe24.png' style='margin:0 5px;'/></p><p align='center'>Which region should this lead be routed to?</p><p align='center'><br /><button class='btn' onclick='routeAPAC(); return false;'>APAC</button><button class='btn' onclick='routeEMEA(); return false;'>EMEA</button><button class='btn' onclick='routeNA(); return false;'>NA</button><button class='btn' onclick='routeLATAM(); return false;'>LATAM</button><br><button class='btn' onclick='window.parent.box.hide(); return false;'>Cancel</button></p>");
box.setupDefaultButtons();
box.show();
}
script = "function routeAPAC(){alert (\"Lead routed to APAC!\")}";
script = "function routeEMEA(){alert (\"Lead routed to EMEA!\")}";
script = "function routeNA(){alert (\"Lead routed to NA!\")}";
script = "function routeLATAM(){alert (\"Lead routed to LATAM!\")}";
insertScript(script);
What am I doing wrong here?
Thanks!
You are over-complicating it.
document.querySelector(".generatorbutton").onclick = function() {
//add the window
}
var actionlist = {
".apa": function(){
//things to do onclick
},
".emea": function(){
//things to do onclick
},
".na": function(){
//things to do onclick
},
".latam": function(){
//things to do onclick
},
};
for(selector in actionlist) {
document.querySelector(selector).onclick = actionlist[selector];
}
Take a look at this for future references.
Hope this helps!
Due to overwriting of script variable, In your above code you can have only last one function routeLATAM will define through insertScript function
If you concatenate like below you will see all function definitions available
script = "function routeAPAC(){alert (\"Lead routed to APAC!\")}";
script += "function routeEMEA(){alert (\"Lead routed to EMEA!\")}";
script += "function routeNA(){alert (\"Lead routed to NA!\")}";
script += "function routeLATAM(){alert (\"Lead routed to LATAM!\")}";
insertScript(script);

How to use file_get_contents and json_decode in Javascript

I am trying to use this PHP API in Javascript. How can I use file_get_contents and json_decode in Javascript?
PHP API Code
$content=#file_get_contents("http://doma.in/api/?url=http://www.google.com&api=APIKEY");
$url=json_decode($content,TRUE);//Decodes json into an array
if(!$url["error"]){ // If there is no error
echo $url["short"]; //Outputs the short url
}else{
echo $url["msg"]; //Outputs the error message
}
Javascript
(function( $ ) {
$(document).ready(function() {
var url = window.location.href;
var host = window.location.hostname;
var title = $('title').text();
title = escape(title);
var twitter = 'http://twitter.com/home?status='+title+'%20'+url;
var facebook = 'http://www.facebook.com/sharer.php?u='+url;
var tbar = '<div id="sicons">';
tbar += 'Twitter';
tbar += 'Facebook';
tbar += '</div>';
});
})(jQuery);
Edit: Thanks to the replies
data.php
$content = #file_get_contents('http://doma.in/api.php?api=asd4sdf5634d&url=' . urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']));
echo $content;
I have added this to the Top of the Javascript
$.getJSON('data.php', function(data) {
if(!data.error){ // If there is no error
alert(data.short) //Outputs the short url
}else{
alert(data.msg)
}
});
The Javascript is now looking like this
(function( $ ) {
$(document).ready(function() {
var shorturl = data.short;
var title = $('title').text();
title = escape(title);
var twitter = 'http://twitter.com/home?status='+title+'%20'+url;
var facebook = 'http://www.facebook.com/sharer.php?u='+url;
var tbar = '<div id="sicons">';
tbar += 'Twitter';
tbar += 'Facebook';
tbar += '</div>';
});
})(jQuery);
I am sure I am doing something wrong. Sorry but I am beginner in Coding (C, C++)
Loading data via AJAX is asynchronous. Your first call ($.getJSON) is executed as soon as the page is loaded, but the callback function that you pass as a parameter, is executed only as soon as the underlying HTTP request is finished. This means that your program does not block to wait for the HTTP request; after calling $.getJSON(...) your program runs on, and the callback method is called at some time when the HTTP request finished.
You evaluate your data (in your second function) as soon as the page is loaded. But, since your data is loaded asynchronously, it is not yet loaded when the document is rendered and your function is executed.
The solution for your problem would be to move the code that evaluates your data into the callback function of $.getJSON(...):
$.getJSON('data.php', function(data) {
if (!data.error) {
// Process your data here!
} else {
alert(data.msg)
}
});

Categories

Resources