We Keep Coding

Synchronous Meteor Call in React Class Component

I’ve been experimenting around with this for quite a while but I haven’t been able to quite figure this out. I am trying to get a synchronous Meteor method call going in a React class component, as part of a registration form I’m doing up. Basically I continually check if a username is taken every time the username input field changes (onChange) and update a visual indicator. I know this isn't ideal design as once you scale it out, it's costly database calls, so I will change this/throttle it as needed, but that's after I get this basic functionality down.
Here is my Meteor method on the server:
checkUsername({ username }) {
var result = false;
if (username != "") {
if (Accounts.findUserByUsername(username)) {
result = true;
}
}
return result;
},
Here is my function in a React class component:
async checkUsername(username) {
Session.set("usernameValid", true);
var syncCall = await Meteor.call(
"checkUsername",
{
username,
}
);
// Shouldn't the line of code below run only AFTER the call above completes?
if (syncCall === false) Session.set("usernameValid", false);
return Session.get("usernameValid");
}
I understand that this shouldn't need to be async, nor should I need await. Furthermore I know this code is wrong since syncCall will always be undefined. This is where I check for username availability:
if (username === "") {
this.state.username = false;
this.setFeedback("username", "", false);
}
else if (this.checkUsername(username)) {
// Username is valid and available
console.log("Username is available!");
this.state.username = username;
this.setFeedback("username", "", true);
}
else {
// Username is invalid and nonempty
console.log("Username is invalid/unavailable!");
this.state.username = false;
this.setFeedback("username", "Username is invalid/unavailable :-(", false);
}
The issue is that the checkUsername function returns before the Meteor call completes, and hence the state isn't updated in time and I can't check that either.
How do I go about forcing this to be synchronous? I read about Meteor.wrapAsync() but I couldn't nail how to incorporate it properly (or even if it's the right way to go about it). Any help is appreciated, thank you!

Meteor method calls on the client do not return a Promise, so you can't await them. You need to provide a callback function:
checkUsername(username) {
Session.set("usernameValid", true);
Meteor.call("checkUsername", {username},
(isTaken) => isTaken && Session.set("usernameValid", false));
}
However with React I wouldn't use session variables. React has it's own support for reactive state variables via useState and it's much better integrated:
const [usernameValid, setUsernameValid] = useState(false);
...
checkUsername(username) {
Meteor.call("checkUsername", {username}, setUsernameValid);
}

MeteorJs, unable to get method.call return value outside of the method

I have following autoform hook code. How can I get value outside of method.call.
My problem is that when I run method.call, then 'chi' value is undefined. Whereas, on server there is '1' record.But chi doesn't get 'myResult' value. If I comment out the method.call and return 'Gogo', then 'chi' gets this value correctly. Can some one guide me what I am doing wrong and how it can be rectified.
Code:
before: {
method: function(doc) {
var retVal = false ;
var pai = Q.fcall(function(){
if(!_.isEmpty(doc) && _.pick(doc, 'name') ) {
console.log('Ist level, true condition: ', doc);
return true;
}
else{
console.log('Ist level, false condition: ', doc);
return false;
}
})
.then(function(check){
console.log('Check value: ', check);
if( check ){
Meteor.call('CategoryNameAvailable', doc.name, function (error, result) {
console.log('Returned result from server', result);
if (!result) {
if(Contexts.Category.keyIsInvalid('name')){
Contexts.Category.resetValidation('name');
}
console.log('Returned result from server inside if condition ', result);
Collections.Category.simpleSchema().namedContext("CategoryInsertForm").addInvalidKeys([{
name: "name",
type: "notUnique"
}]);
console.log('Doc value in meteor call function: ', doc);
Session.set('retVal', true);
console.log('retVal value in meteor call function: ', retVal);
}
return 'myResult';
});
// return 'Gogo';
/* Meteor call End */
}
})
.then(function(chi){
console.log('Chi value: ', chi);
})
.done();
console.log('Pai value-2: ', pai);
} /* End of method */
} /* End of 'before' hook */

You could check this out https://github.com/stubailo/meteor-reactive-method
It might solve your problem

Do you think you could add in the file where you're defining your method? I had a similar problem recently attempting to do something similar, and it had to do with the formatting of my Method definition.
For me it was misplacing where I was returning data within my method definition. In another instance of another similar problem, I wasn't subscribing to the Collection on the client side.
If thats not the issue, and your call is returning data correctly, its only not passing it outside of the context of the call, you could try and use Session.set to define a session variable that can then be called whenever you need the data.
Its going to be difficult to tell exactly whats going on though without the context of the Method definition.

Casper JS waitForResource with a restful API

We are having a little problem with a functional test with casper.js.
We request the same resource twice, first with the GET and then with POST method.
Now when waiting for the second resource (POST) it matches the first resource and directly goes to the "then" function.
We would like to be able to check for the HTTP method in the "test" function, that way we can identify the resource properly. For now we use the status code (res.status), but that doesn't solve our problem fully, we really need the http method.
// create new email
this.click(xPath('//div[#id="tab-content"]//a[#class="button create"]'));
// GET
this.waitForResource('/some/resource',
function then() {
this.test.assertExists(xPath('//form[#id="email_edit_form"]'), 'Email edit form is there');
this.fill('form#email_edit_form', {
'email_entity[email]': 'test.bruce#im.com',
'email_entity[isMain]': 1
}, true);
// POST
this.waitForResource(
function test(res) {
return res.url.search('/some/resource') !== -1 && res.status === 201;
},
function then() {
this.test.assert(true, 'Email creation worked.');
},
function timeout() {
this.test.fail('Email creation did not work.');
}
);
},
function timeout() {
this.test.fail('Email adress creation form has not been loaded');
});
Or maybe there is a better way to test this scenario? Although since this is a functional test we need to keep all those steps in one test.

You can try to alter the form action url to add some query string, therefore generating a new resource appended to the stack. Could be done this way:
casper.thenEvaluate(function() {
var form = __utils__.findOne('#email_edit_form');
form.setAttribute('action', form.getAttribute('action') + '?plop');
});
That's a hack though, and functional testing should never be achieved that way. Let's hope more information will be added to the response objects in the future.

The res parameter that is passed to the test function has an ID. I created a helper that tests against this ID and blacklists it, so the same resource won't get accepted a second time.
var blackListedResourceIds = [],
testUniqueResource = function (resourceUrl, statusCode) {
return function (res) {
// check if resource was already loaded
var resourceFound = res.url.search(resourceUrl) !== -1;
// check statuscode
if (statusCode !== undefined) {
resourceFound = resourceFound && res.status === statusCode;
}
// check blacklisting
if (!resourceFound || blackListedResourceIds[res.id] !== undefined) {
return false;
} else {
blackListedResourceIds[res.id] = true;
return true;
}
};
};

Getting a value from a function with Javascript

I have 2 functions: 1 checks that the user is logged in, and if he does - it calls for second function to get his userID. For now I'm just testing it with alert, to see if I do get the parameter.
This is the first function:
//Checking if the user is logged in or not
$(function(){
$.getJSON("inc/API.php", {command : "getUserName"},
function(result){
if(result==null){
$("#divGreeting").html("Hello, guest!");
$("#divLogin").hide();
$("#divUserOption").hide();
$("#divConnectOption").show();
}
else {
alert(getUserID(result));
$("#divGreeting").html("Hello, "+result+"!");
$("#divHeader").html("Hello, "+result+"! <a href='javascript:logout()'>Logout</a>");
$("#divUserOption").html("Hello, "+result+"! <a href='javascript:logout()'>Logout</a>");
$("#divConnectOption").hide();
$("#divLogin").hide();
$("#divUserOption").fadeIn(300);
}
});
});
And this is the second function, the one that should return the userID:
function getUserID(){
$.getJSON("inc/API.php",
{
command : "getUserID"
},
function(result){
alert(result);
return result;
});
}
The alert of the first function is undefined, while the alert of the second does have the userID. How come I can't return it's value to the first function? Why do I get `undefined?
Thank you!`

Ajax is asynchronous. You can't return a value from it.
What are are trying to do is akin to:
function foo() {
$('button').click(function () { return 1; });
}
var not_one = foo();
In this example, the value is not returned until the button is clicked (and it isn't the return value of foo anyway). With Ajax, the value is not returned until the HTTP response arrives.
You have to process the data in the callback function and not try to return to the calling function.

Try this:
//Checking if the user is logged in or not
$(function(){
$.getJSON("inc/API.php", {command : "getUserName"},
function(result){
if(result==null){
$("#divGreeting").html("Hello, guest!");
$("#divLogin").hide();
$("#divUserOption").hide();
$("#divConnectOption").show();
}
else {
getUserID(function(result) {
$("#divGreeting").html("Hello, "+result+"!");
$("#divHeader").html("Hello, "+result+"! <a href='javascript:logout()'>Logout</a>");
$("#divUserOption").html("Hello, "+result+"! <a href='javascript:logout()'>Logout</a>");
$("#divConnectOption").hide();
$("#divLogin").hide();
$("#divUserOption").fadeIn(300);
});
}
});
});
and then your getUserID function:
function getUserID(callback){
$.getJSON("inc/API.php",
{
command : "getUserID"
},
callback
}
EDIT
You said that you would need to use the username in a string concatenation context :
"Hello "+getUserName()+"!"
however, if it has to make an AJAX request every time, this is not possible unless a blocking,syncronous call is being used which is not a good practice at all. If you store the username in a variable when the page loads, you can just use the variable. if you want to still use a function that requests it every time it's used, it would have to be done something like this:
function getUserName(callback) {
$.getJSON("inc/API.php", {command : "getUserName"}, callback);
}
getUserName(function(result){
//do username processing here
});

JavaScript Seems to Stop After AJAX Call

The question title is rather vague, but here's my situation. I have roughly 700+ lines of jQuery for a web application, each function and "major point of interest" in the code noted by a log to the console when it fires. For example, I have a few functions that use an AJAX call to a servlet to retrieve some information. I log when the AJAX request begins, if it's succeeded (then print what data it gathered), etc. So, by the look of what my console has logged when I open the page, it seems to stop after the first AJAX call. Granted, the call seemed to work just fine, and the data it returned was perfect. As you'll see, it even populated the select box as intended. However, the console logs stop shortly after, making me believe that for some reason, the other functions are not being called...
jQuery
$(document).ready(function() {
Initialize();
});
function Initialize() {
console.log("Initializing...");
User();
Widgets();
if($.cookie("fogbugzId") != null) {
console.log("Stored ID: " + $.cookie("fogbugzId"));
$("#userSelect").val($.cookie("fogbugzId")).trigger("change");
$("#userSelect").hide();
} else console.log("No ID Stored!");
}
function User() {
console.log("Initializing User...");
$.each(FetchUsers(), function(index, user) {
$("#userSelect").append($("<option>").val(user.id).text(user.name));
});
$("#userSelect").change(function() {
if($("#userSelect").val() != "") {
console.log("User Changed to " + $("#userSelect").val() + ": " + $("#userSelect").text());
$.cookie("fogbugzId", $("#userSelect").val(), { expires: 365 });
}
Update();
});
console.log("User Initialized!");
}
function FetchUsers() {
console.log("Loading Users...");
$("#loading").show();
$.get(servlet, { command: "getUsers" }, function(data) {
var users = new Array();
$(data).find("user").each(function() {
users.push({
id: $(this).find("id").text(),
name: $(this).find("name").text()
});
});
$.each(users, function(index, user) {
console.log(">> " + user.id + ": " + user.name);
});
console.log("Users Loaded!");
return(users);
}, "xml").complete(function() {
$("#loading").hide();
}).error(function() {
console.log("Loading Users Failed!");
});
}
function Widgets() {
console.log("Initializing Widgets...");
// More Code
console.log("Widgets Initialized!");
}
Console
Initializing...
Initializing User...
Loading Users...
>> 267: Alex Molthan
>> 35: Bill Brinkoetter
>> 100: Bob Yoder
>> 189: Brian Cutler
>> 559: Brian Ormond
>> 400: Corey Nakamura
Users Loaded!
But the logging stops right there. So the AJAX call to fetch the users from the database works fine, but apparently the User() function doesn't manage to finish properly. The only error that the JavaScript console gives me is one within my jquery.min.js file:
Uncaught TypeError: Cannot read property 'length' of undefined jquery.min.js:16
f.e.extend.each jquery.min.js:16
User modifytime.js:14
Initialize modifytime.js:3
(anonymous function) modifyTime.jsp:21
f.extend._Deferred.e.resolveWith jquery.min.js:16
f.e.extend.ready jquery.min.js:16
f.c.addEventListener.B jquery.min.js:16
It looks as though it is breaking on the $.each() that iterates through the array of users returned by the FetchUsers() function. I know the function returns usable array, so I'm not sure what it's getting stuck on. Can anyone see something I'm missing right off the bat? I tried assigning the users[] returned by the FetchUsers() function into a variable first, then passing that into the $.each(), but it still didn't work. Any suggestions?
Edit: After replacing the minified version of jQuery with the uncompressed version, it seems as though the array of users that I pass into the $.each() function has now .length property, which is why it's breaking. Just to check, before I call that particular $.each() function, I placed a log of the users[].length returned from the FetchUsers() function to see that it still had no .length property. I then went to the FetchUsers() function itself and placed a log of the users[].length just before I return it. This log, however, works perfectly fine (though my example doesn't show it, it returns 40 users). So is my users[] not being returned as an array or something?

FetchUsers does not return anything, it does not even have a return statement. Additionally, $.get is an asynchronous function, so you cannot return the value it passes to its callback from the FetchUsers function. Instead, you could make FetchUsers take a callback it calls when it has received data of a user (and in this case doing that change would be relatively trivial):
function User() {
console.log("Initializing User...");
FetchUsers(function(user) { // Changed!
$("#userSelect").append($("<option>").val(user.id).text(user.name));
});
<...>
}
function FetchUsers(callback) { // Changed!
console.log("Loading Users...");
$("#loading").show();
$.get(servlet, { command: "getUsers" }, function(data) {
//var users = new Array(); No longer necessary.
$(data).find("user").each(function() {
callback({ // Changed!
id: $(this).find("id").text(),
name: $(this).find("name").text()
});
});
<...>
}
Changing those three lines with the "Changed!" comment should be enough to make it work correctly. (Though your logging of the users gotten will need to be slightly altered as they are no longer pushed into an array.)

I confess I have not read and understood every part of your source (nor checked if all the braces are closed), but FetchUsers clearly does NOT return anything (contrary to your claim) - so a call to FetchUsers() evaluates to 'undefined'. Fixing it will require some rewriting as in Javascript you cannot really return a result of asynchronous operation (like $.get) from a synchronous function (like FetchUsers()) - this would require multithreading (some kind of blocking, waiting etc).