Reply to thread

Message

Hey Guys,

How can I call a sync function for ajax url GET, and wait for a result (rather than returning "undefined" or an unfilled PROMISE ?

I have tried so many things and I can't get this function to work properly.

Parent Function:
[CODE]checkValidity: function(input) {
for ( var i = 0; i < this.validityChecks.length; i++ ) {

var isInvalid = this.validityChecks[i].isInvalid(input);
if (isInvalid) {
this.addInvalidity(this.validityChecks[i].invalidityMessage);
}

var requirementElement = this.validityChecks[i].element;

if (requirementElement) {
if (isInvalid) {
requirementElement.classList.add('invalid');
requirementElement.classList.remove('valid');
} else {
requirementElement.classList.remove('invalid');
requirementElement.classList.add('valid');
}

} // end if requirementElement
} // end for
}[/CODE]

The line that calls this is the:

[CODE]this.validityChecks[i].isInvalid(input)[/CODE]

Which references this predefined block:
[CODE]var phoneValidityChecks = [
{
isInvalid: function(input) {
const regex = RegExp(/\d{10}$/);
return !regex.test(input.value);
},
invalidityMessage: 'Please enter a valid phone number',
element: document.querySelector('label[for="register_phone"] .input-requirements li:nth-child(1)')
},
{
isInvalid: function(input) {
checkPhoneExists(input.value).then(json => {
if (!Array.isArray(json['data']) || json['data'].length === 0)
return true;

var exists = json['data'][0];

return exists;
});
},
invalidityMessage: 'Please enter a unique phone number',
element: document.querySelector('label[for="register_phone"] .input-requirements li:nth-child(2)')
}
];[/CODE]

So I am trying to call this function "checkPhoneExists" which will do the following:
[CODE]async function checkPhoneExists(phone) {
$.when(checkPhoneNumberAjax(phone)).done(function(result){
return result;
});
}[/CODE]

And the Ajax Function:

[CODE]async function checkPhoneNumberAjax(phone) {
var username = 'User';
var password = 'Pass';
var url = 'http://127.0.0.1/app/api/api.php';

var postData = {
"type" : 'GET',
"action" : 'phone_exists',
"phone" : phone,
};

$.ajax({
url: url,
type: 'GET',
dataType: 'json',
data: postData,
contentType: 'application/json',
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", "Basic "+btoa(username+':'+password));
},
success: function(resultData){
return resultData;
}
});

await new Promise(resolve => setTimeout(resolve, 3000));

return true;
}[/CODE]

I have tried everything I can think of to STOP RETURNING and WAIT FOR A RESULT!

<blockquote data-quote="JayCustom" data-source="post: 466013" data-attributes="member: 36373">Hey Guys,How can I call a sync function for ajax url GET, and wait for a result (rather than returning &quot;undefined&quot; or an unfilled PROMISE ?I have tried so many things and I can't get this function to work properly.Parent Function:[CODE]checkValidity: function(input) {&nbsp; &nbsp; &nbsp; &nbsp; for ( var i = 0; i &lt; this.validityChecks.length; i++ ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var isInvalid = this.validityChecks[i].isInvalid(input);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (isInvalid) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.addInvalidity(this.validityChecks[i].invalidityMessage);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var requirementElement = this.validityChecks[i].element;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (requirementElement) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (isInvalid) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; requirementElement.classList.add('invalid');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; requirementElement.classList.remove('valid');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; requirementElement.classList.remove('invalid');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; requirementElement.classList.add('valid');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } // end if requirementElement&nbsp; &nbsp; &nbsp; &nbsp; } // end for&nbsp; &nbsp; }[/CODE]The line that calls this is the:[CODE]this.validityChecks[i].isInvalid(input)[/CODE]Which references this predefined block:[CODE]var phoneValidityChecks = [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; isInvalid: function(input) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const regex = RegExp(/\d{10}$/);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return !regex.test(input.value);&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; invalidityMessage: 'Please enter a valid phone number',&nbsp; &nbsp; &nbsp; &nbsp; element: document.querySelector('label[for=&quot;register_phone&quot;] .input-requirements li:nth-child(1)')&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; isInvalid: function(input) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checkPhoneExists(input.value).then(json =&gt; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!Array.isArray(json['data']) || json['data'].length === 0)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var exists = json['data'][0];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return exists;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; invalidityMessage: 'Please enter a unique phone number',&nbsp; &nbsp; &nbsp; &nbsp; element: document.querySelector('label[for=&quot;register_phone&quot;] .input-requirements li:nth-child(2)')&nbsp; &nbsp; }];[/CODE]So I am trying to call this function &quot;checkPhoneExists&quot; which will do the following:[CODE]async function checkPhoneExists(phone) {&nbsp; &nbsp; $.when(checkPhoneNumberAjax(phone)).done(function(result){&nbsp; &nbsp; &nbsp; &nbsp; return result;&nbsp; &nbsp; });}[/CODE]And the Ajax Function:[CODE]async function checkPhoneNumberAjax(phone) {&nbsp; &nbsp; var username = 'User';&nbsp; &nbsp; var password = 'Pass';&nbsp; &nbsp; var url = 'http://127.0.0.1/app/api/api.php';&nbsp; &nbsp; &nbsp; &nbsp; var postData = {&nbsp; &nbsp; &nbsp; &nbsp; &quot;type&quot; : 'GET',&nbsp; &nbsp; &nbsp; &nbsp; &quot;action&quot; : 'phone_exists',&nbsp; &nbsp; &nbsp; &nbsp; &quot;phone&quot; : phone,&nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; url: url,&nbsp; &nbsp; &nbsp; &nbsp; type: 'GET',&nbsp; &nbsp; &nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; &nbsp; &nbsp; data: postData,&nbsp; &nbsp; &nbsp; &nbsp; contentType: 'application/json',&nbsp; &nbsp; &nbsp; &nbsp; beforeSend: function(xhr) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xhr.setRequestHeader(&quot;Authorization&quot;, &quot;Basic &quot;+btoa(username+':'+password));&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; success: function(resultData){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return resultData;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; await new Promise(resolve =&gt; setTimeout(resolve, 3000));&nbsp; &nbsp; &nbsp; &nbsp; return true;}[/CODE]I have tried everything I can think of to STOP RETURNING and WAIT FOR A RESULT!</blockquote>

[QUOTE="JayCustom, post: 466013, member: 36373"] Hey Guys, How can I call a sync function for ajax url GET, and wait for a result (rather than returning "undefined" or an unfilled PROMISE ? I have tried so many things and I can't get this function to work properly. Parent Function: [CODE]checkValidity: function(input) { for ( var i = 0; i < this.validityChecks.length; i++ ) { var isInvalid = this.validityChecks[i].isInvalid(input); if (isInvalid) { this.addInvalidity(this.validityChecks[i].invalidityMessage); } var requirementElement = this.validityChecks[i].element; if (requirementElement) { if (isInvalid) { requirementElement.classList.add('invalid'); requirementElement.classList.remove('valid'); } else { requirementElement.classList.remove('invalid'); requirementElement.classList.add('valid'); } } // end if requirementElement } // end for }[/CODE] The line that calls this is the: [CODE]this.validityChecks[i].isInvalid(input)[/CODE] Which references this predefined block: [CODE]var phoneValidityChecks = [ { isInvalid: function(input) { const regex = RegExp(/\d{10}$/); return !regex.test(input.value); }, invalidityMessage: 'Please enter a valid phone number', element: document.querySelector('label[for="register_phone"] .input-requirements li:nth-child(1)') }, { isInvalid: function(input) { checkPhoneExists(input.value).then(json => { if (!Array.isArray(json['data']) || json['data'].length === 0) return true; var exists = json['data'][0]; return exists; }); }, invalidityMessage: 'Please enter a unique phone number', element: document.querySelector('label[for="register_phone"] .input-requirements li:nth-child(2)') } ];[/CODE] So I am trying to call this function "checkPhoneExists" which will do the following: [CODE]async function checkPhoneExists(phone) { $.when(checkPhoneNumberAjax(phone)).done(function(result){ return result; }); }[/CODE] And the Ajax Function: [CODE]async function checkPhoneNumberAjax(phone) { var username = 'User'; var password = 'Pass'; var url = 'http://127.0.0.1/app/api/api.php'; var postData = { "type" : 'GET', "action" : 'phone_exists', "phone" : phone, }; $.ajax({ url: url, type: 'GET', dataType: 'json', data: postData, contentType: 'application/json', beforeSend: function(xhr) { xhr.setRequestHeader("Authorization", "Basic "+btoa(username+':'+password)); }, success: function(resultData){ return resultData; } }); await new Promise(resolve => setTimeout(resolve, 3000)); return true; }[/CODE] I have tried everything I can think of to STOP RETURNING and WAIT FOR A RESULT! [/QUOTE]

Reply to thread

Connect with us

Newest members