How Can I Pass Parameter When Trigger?
When my JavaScript is run it will call the getDoctorComplete
function. When the AJAX request is completed, it will set a = chelsea
. Otherwise, there will be a trigger change and will run $('#dropdown_hosp').change(...
. In the $('#dropdown_hosp').change(...
, it will call the getSpecialty
function. When the AJAX request is completed with the getSpecialty
function, I want to get the value of a
. I console.log
it, but it contains an empty string. How can I solve this problem?
var a = '';
$(document).ready(function () {
app.getHospital({
areaId: ''
});
app.getDoctorComplete({
doctorId: doctorId,
doctorel: $('#dropdown_doct')
});
$('#dropdown_hosp').change(function () {
var dropdownspecialty = $('#dropdown_spec');
app.getSpecialty({
hospitalId: $('#dropdown_hosp').val(),
apiUrl: 'api',
special: dropdownSpec
});
});
});
app = function () {
function getHospital({
areaId
}) {
// ...
$.ajax({
// ...
success: function (result) {
// ...
},
// ...
}).done(function () {
$('#dropdown_hosp').select2();
});
};
function getSpecialty({
hospitalId,
apiUrl,
special
}) {
// ...
$.ajax({
// ...
}).done(function () {
// test here
console.log(a);
});
};
function getDoctorComplete({
schdoctor_id,
doctorel
}) {
// ...
$.ajax({
// ...
success: function (result) {
// ...
},
// ...
}).done(function () {
// ...
a = 'chelsea';
b = '..';
$('#dropdown_hosp').val(b).trigger('change');
});
};
return {
getSpecialty: getSpecialty,
getDoctorComplete: getDoctorComplete
}
}();
Answer
Your problem ist, that your ajax
call is async and therefore a
is not reassigned when being logged. Here would be a solution to your problem using Promise
, to create an async function, resolve
, to mark the return
of that async function and .then()
to do something after that async function:
var a = '';
$(document).ready(function () {
app.getHospital({
areaId: ''
});
app.getDoctorComplete({
doctorId: doctorId,
doctorel: $('#dropdown_doct')
})
.then(() => { // Add the .then() callback to do something after getDoctorComplete finished
$('#dropdown_hosp').change(function () {
var dropdownspecialty = $('#dropdown_spec');
app.getSpecialty({
hospitalId: $('#dropdown_hosp').val(),
apiUrl: 'api',
special: dropdownSpec
});
});
});
});
app = function () {
function getHospital({
areaId
}) {
return new Promise((resolve, reject) => {
// ...
$.ajax({
// ...
success: function (result) {
// ...
},
// ...
}).done(function () {
$('#dropdown_hosp').select2();
resolve(); // Add resolve
});
});
};
function getSpecialty({
hospitalId,
apiUrl,
special
}) {
return new Promise((resolve, reject) => {
// ...
$.ajax({
// ...
}).done(function () {
// test here
console.log(a);
resolve(); // Add resolve
});
});
};
function getDoctorComplete({
schdoctor_id,
doctorel
}) {
return new Promise((resolve, reject) => {
// ...
$.ajax({
// ...
success: function (result) {
// ...
},
// ...
}).done(function () {
// ...
a = 'chelsea';
b = '..';
$('#dropdown_hosp').val(b).trigger('change');
resolve(); // Add resolve
});
});
};
return {
getSpecialty: getSpecialty,
getDoctorComplete: getDoctorComplete
}
}();
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM