Ajax call using Google Closure - javascript

I am new to Google Closure library, and I am trying to simulate something similar to that of Jquery's $.ajax function. Here is what I tried and what I got in response.
The trigger is from Chrome Extensions Right click
chrome.contextMenus.create({"title": "sample_closure", "onclick": samp.myProject.fun1,"contexts":['selection']});
This triggers the fun1 function which is defined as below:
samp.myProject.fun1 = function(info,tab) {
var string_url = info.selectionText;
//String_url works fine and passed to the function below.
samp.myProject.getAjaxData(string_url);
}
The getAjaxData function is as below.
goog.require("goog.net.XhrIo");
samp.myProject.getAjaxData = function(url) {
goog.net.XhrIo.send(url, function(event) {
alert(event.target.getResponseText());
});
}
But I get this error when I call the getAjaxData function.
Error in event handler for 'contextMenus': TypeError: Cannot read property 'XhrIo' of undefined
Can anyone tell me where I am going wrong.. I checked the Argument type that need to be passed for xhrio.send function and it has string type.

Solved this issue.. The path to base.js is causing this problem.
Not deleting this question because some of you may face the same issue and leaving for them. So, Check your path to base.js of closure-library for solving this issue

Related

My Javascript code doesn't work anymore after I wrap it in a self-calling function

I see in a lot of code that people wrap everything in a self-calling function so everything stays more or less private. Doing this to my code resulted in it not working anymore.
I Googled a bit about it and saw that it is good practice to place the whole source file in a self-calling function so I decided to try it too. I tried this with my little piece of code and it just doesn't work anymore after doing it.
(function($) {
const auth = firebase.auth();
function logIn(){
window.alert("pressed log in button");
var userEmail = document.getElementById("txtEmail").value;
var userPass = document.getElementById("txtPassword").value;
auth.signInWithEmailAndPassword(userEmail,userPass).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
window.alert("Error : " + errorMessage);
});
};
});
I expected the code to work but whenever I press the button that calls the logIn function I get the following error message: "Uncaught ReferenceError: logIn is not defined at HTMLButtonElement.onclick". This clearly shows that turning my code into a self-calling function makes it not work anymore.
after I wrap it in a self-calling function
You haven't wrapped it in an IIFE. You've wrapped it in a function which is never called. To make it an IIFE you need to call it (e.g. with (whatever_you_want_assigned_to_the_$_argument) at the end).
I Googled a bit about it and saw that it is good practice to place the whole source file in a self-calling function
This is because globals are bad. (That's a generalisation).
Uncaught ReferenceError: logIn is not defined at HTMLButtonElement.onclick
Since you don't assign any event handlers in your code, presumably your HTML looks like:
onclick="logIn()"
You are trying to call logIn, as a global.
Now, since the whole point of using an IIFE is to stop using globals, that doesn't work.
Bind your event handlers with addEventListener, or (since you seem to be using jQuery) the jQuery wrapper around that instead.
(function($) {
function logIn(){
window.alert("pressed log in button");
}
$("button#logIn").on("click", logIn);
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id=logIn>Log In</button>

Uncaught ReferenceError: function is not defined. Jquery already attached

I just got an error and I do not know why it is happening. Below are my functions.
function senditnow(){
//something
}
$('.check-with-bank').click(function(){
//something
checksuccess_checkall(successsent);
if(successsent == true) {
//It already passed and come to this function but It cannot call.
senditnow();
}
}
I also attached jQuery and all other features working well except stopping at senditnow() function.
Can you help me to explain why?
the problem may be that successsent value is not changing, as far as i know pass by reference only works on arrays an objects, so it would be better if you do
successsent = checksuccess_checkall();
if checksuccess_checkall() returns a boolean, that way you can validate if successsent is true, and you should check what values successsent has before and after calling checksuccess_checkall()

How does this javascript work?

I'm a javascript noob, and I don't understand why this works:
$().load('/my/url/', {my:data, more:data}, jsFunc());
function jsFunc()
{
$("#myid").val("yep");
}
But not this:
$().load('/my/url/', {my:data, more:data}, function() {jsFunc()});
function jsFunc()
{
$("#myid").val("yep");
}
I tried an $.ajax instead of $.load with the same result. I will be passing the response data to jsFunc() and that is why I need jsFunc() inside the function. I'm sure it is something simple I'm just not very experienced with javascript. Thanks.
Thanks again for all the help. I decided to use $.post because it works best for the situation but now I'm having trouble with the response data. My code looks like this:
$.post('/my/url/', {my:data, more:data}, function(data) {
var strung = JSON.stringify(data)
var parse = jQuery.parseJSON(strung)
console.log(parse.some);}, 'json');
I'm logging to the console to see what is coming back for now and I will add the callback when I see the correct value logged. The process I got from the jQuery api page, but it will only log undefined. When I change parse.some to parse the console log will display the objects and I can select an element and see the correct key:value pair. Any help would be sweet.
Neither works. The first one appears to work, because you call the function jsFunc immediately, it doesn't wait for any response.
If you create an empty jQuery object using $() and use the load method on that, it won't call the server because there is no element where it can put the result.
To specify the callback function you either use the name of a function:
$('#someElement').load('/my/url/', {my:data, more:data}, jsFunc);
or a function expression:
$('#someElement').load('/my/url/', {my:data, more:data}, function() { jsFunc(); });
The first code block will simply call jsFunc() and return the results as the parameter to the load(..) method, which is odd because that parameter is supposed to be a callback function to fire when the load completes, but that works? The callback syntax is more in keeping with the second example (the one I believe you stated doesn't work).
Answer to my second part:
My returned JSON data consisted of many objects, so I had to specify the index and the key to get the value to return.

Calling Google's Javascript API request.execute within request.execute

What I'm trying to do is to get a list of calendars from google, and then get the list of events from each calendar.
So basically I'm calling the events.list method within the callback function for the calendarList.list method.
However, when debugging using Firebug, it appears that the callback function for the events.list method just doesn't get called at all.
var request2 = gapi.client.calendar.events.list({
"calendarId":calendarId
});
request2.execute(function(response2) {
resp2 = response2;
findEvent();
});
I can debug up to request2.execute, but function(response2) is never performed.
resp2 is a global variable, and all of this code is in a function called from the first request's callback.
A very similar code works perfectly for the first call, with a different global variable.
I've tried removing either of the lines in the callback to no effect.
Thanks for any help.

ColdFusion.Window.create callbackhandler issue

I'm trying to use the callbackhandler entry for the configuration parameter for ColdFusion.Window.create(). I have the following js functions below. Within populateWindow2() I have calls to other functions that I intend to only run after the window is rendered as these functions need to make references to elements within the created window.
Triggering populateCFwindow with:
<input id="selectProcessorButton" onclick="javascript:populateCFwindow();">
populateCFwindow = function(){
ColdFusion.Window.create(...{callbackhandler:populateWindow2()}).
}
populateWindow2 = function(){
initSearchgetProcessorList();
initTable_selectProcessor();
}
The issue I am having is that the init functions above still fire before the window is completely rendered.
I appreciate any feedback. Thank you.
You need to remove the parentheses which are invoking the function and passing it's result to callbackHandler (undefined) instead of passing a reference to the populateWindow2 function .
<input id="selectProcessorButton" onclick="javascript:populateCFwindow();">
populateCFwindow = function(){
ColdFusion.Window.create(...{callbackhandler:populateWindow2}).
}
populateWindow2 = function(){
initSearchgetProcessorList();
initTable_selectProcessor();
}
I had the same problem and checked their JavaScript code. The configuration property name is callbackHandler, not callbackhandler. Adobe needs to update their docs, this problem drove me nuts!!!

Categories

Resources