Hey thanks for the reply. I am using the creatw option form the documentation for creating new items int he datbase and selecting them on the fly.
And now I have changed to using the same method for creating the pre-selected option as well including all the data but it still seems to drop information once its added.
The pre-selected option is as follows…
// [ PRE FILL CUSTOMER AND PHONE ]
<?php if ($customer):?>
//todo : preselected option does not work if change to another option and back again it looses data
BookingForm.Customer = '<?=json_encode($customer)?>';
BookingForm.Customer = JSON.parse(BookingForm.Customer);
BookingForm.Customer.text = BookingForm.Customer.name;
console.log('pre-selected customer:', BookingForm.Customer);
BookingForm.Customer = setSelect2Option(
BookingForm.Select2customer.Dom,
BookingForm.Customer.text,
BookingForm.Customer.id,
BookingForm.Customer);
<?php endif;?>
//pre-selected data console log form above outputs:
{
"id": "754",
"name": "Betty",
"email": null,
"phone": "118811881188",
"customer_note": null,
"customer_wheelchair": "1",
"created_at": "2018-09-14 10:00:47.000000",
"text": "Betty"
}
This is the code for the setSelctOption funciton that has been working for creatinng NEW options that dont previosuly exist int he database.
function setSelect2Option(select2, text, id, data = {id: id, text: text}) {
if (debugging) console.log('setSelect2Option data received:', data);
//Note: For Select2 controls that receive their data from an AJAX source, using .val() will not work. You have to create an item manually.
//see https://select2.org/programmatic-control/add-select-clear-items#preselecting-options-in-an-remotely-sourced-ajax-select2
select2 = $(select2);
// create the option and append to Select2
var option = new Option(text, id, true, true);
select2.append(option).trigger('change');
// manually trigger the `select2:select` event
select2.trigger({
type: 'select2:select',
params: {
data: data
}
});
return select2.select2('data')[0];//just in case u want the new data as is set in select2
}
//console log from inside the setSelect2 Function
{
“id”: “754”,
“name”: “Betty”,
“email”: null,
“phone”: “118811881188”,
“customer_note”: null,
“customer_wheelchair”: “1”,
“created_at”: “2018-09-14 10:00:47.000000”,
“text”: “Betty”
}
//and this is the console log form the select2 change event ( selectElement.select2(‘data’)[0] )
{
“selected”: true,
“disabled”: false,
“text”: “Betty”,
“id”: “754”,
“title”: “”,
“_resultId”: “select2-customer_id-e1-result-5ehh-754”,
“element”: {},
“wheelchair”: “0”
}
So as even tho I am passing all the data in the data that ends up being in the select2 now had no phone number and has a title feild.
//here is my on change
BookingForm.Select2customer = {
Dom: $('#booking_modal .customer.select2'),
/**
* Sets up Select2 with Ajax data
* @returns {jQuery.fn.init|jQuery|HTMLElement|*}
*/
init: function () {
this.Dom.select2({
placeholder: 'Select a Customer',
tags: true,
templateResult: function (item) {
//console.log('data from templateResult',item);
//note: searching and TAG option don't appear since they have no .html value (that comes form server results only)
//but we don't care coz we have a create customer option coming from php
return $(item.html); //return html sent via php as dom element for displaying html in the select
},
ajax: {
url: '<?=base_url()?>customers/select2',
dataType: 'json'
}
});
return this.Dom; //so we can chain from init()
},
};
//SELECT2 - Customer
BookingForm.Select2customer.init().change(function () {
let selectElement = $(this);
let item = selectElement.select2('data')[0]; //select2 returns an array with a single object inside hence [0]...
console.log('select2 selected item data',item);
//create customer
if (parseInt(item.id) < 0) {
if (BookingForm.Customer && item.id === BookingForm.Customer.id){
if (debugging) console.log('//oops triggered twice already created this guy');
} else {
$.ajax({
url: '<?php echo base_url()?>customers/insert',
type: 'POST',
data: {name: item.name}, //warning: you cant just hand over the item as select2 carries over extra prototype constructs that causes a stack overflow for some reason. Took me a hwile to realize this 😡.
success: function (response) {
if (debugging)console.log('create customer complete',response);
if (hasError(response)) {
flash(response, 'error');
}
else {
flash('New Customer was created.');
response = JSON.parse(response);//remember to convert your json strings to objects!!
if (debugging) console.log('New Customer was created: ',response);
BookingForm.Customer = setSelect2Option(selectElement, response.name, response.id, response);
BookingForm.Customer.isNew = true;
}
}
});
}
}
BookingForm.Customer = selectElement.select2('data')[0];//important: getting the item again as it may have changed with create customer
if (debugging) {
console.log('Selected Customer: ', BookingForm.Customer);
}
$("#booking_phone").val(BookingForm.Customer.phone ? BookingForm.Customer.phone : '');
$("#booking_wheelchair").prop('checked', (BookingForm.Customer.customer_wheelchair > 0))
.trigger('change');//don't forget to trigger change events!
//NTH: pre-fill the last used pickup location and drop off address as well????
// END CUSTOMER CHANGE
});
Can you see where I am going wrong? The data going in is correct but doen’t get added by select2.
.
! I’m glad you got it working.