I have created 2 additional Select fields in Hosted Login page of Universal Login, called Client and Project. Both of these are populated from API calls, written in jQuery. When I select a particular value in Client field, I need to repopulate Project field options with new API call based on value selected in Client.
I am able to populate Project initially, but it’s not repopulating automatically when options associated with it are changed.
Below is the custom jQuery code:
$(document).ready(function(){
//Bind Click event when Log In is flipped to Sign Up
$('.auth0-lock-content-wrapper').click(function() {
$('#1-Project').unbind('click');
$('#1-Project').click(function() {
ClientName = $('#1-Client').val();
if (ClientName == 'Choose your Client') {
ClientName='All';
}
//Need to rebind Projects - Projectoptions variable is rebound but select list if not
ApiCallProject(URL)
});
});
});
//Bind Client Dropdown - Working
function ApiCallClient(ActionUrl) {
var data = '';
$.ajax({
async:false,
type: 'get',
url: ActionUrl,
contentType: "application/json",
dataType: 'json',
success: function (result) {
data = result;
}
})
return data;
}
//Bind Projects. Works perfectly on initial binding
function ApiCallProject(ActionUrl) {
var data = '';
$.ajax({
async:false,
type: 'get',
url: ActionUrl + "&ClientName=" + ClientName,
contentType: "application/json",
dataType: 'json',
success: function (result) {
Projectoptions = result;
}
})
}
Additional Options in Universal Login:
{
type: "select",
name: "Client",
placeholder: "Choose your Client",
options: function (cb) {
var options = ApiCallClient(URL)
cb(null,options);
},
icon: "https://i.ibb.co/Z6wKb4L/Proj-Client.png",
prefill: "",
validator: function(address) {
return {
valid: address.length >=1,
hint: "Please select Client Name"
};
}
},
{
type: "select",
name: "Project",
placeholder: "Choose your Project",
options: function (cb) {
ApiCallProject(URL)
cb(null,Projectoptions); //When Projectoptions change. I need this to be re-bound
},
icon: "https://i.ibb.co/Z6wKb4L/Proj-Client.png",
prefill: "",
validator: function(address) {
return {
valid: address.length >=1,
hint: "Please select Project Name"
};
}
