We Keep Coding

How can ajax based Select2 pre-population be formatted?

We've found several examples of pre-populating selected option for Select2, however none of them we could find deal with formatted list and selection options. We have a JS fiddle at https://jsfiddle.net/gpsx62de/26/ that illustrates the issue. In that fiddle, you can type and L or whatever into the select search and the data is returned, the list is formatted, and if you select something, the selection is formatted.
However if you click the button in that JS Fiddle which is intended to simulate pre-population per https://select2.org/programmatic-control/add-select-clear-items#preselecting-options-in-an-remotely-sourced-ajax-select2 the data is returned (you can uncomment the console.log to see it), but the formatted selection shows undefined for the intended values. Does anyone know of a way to get the formatted values for pre-populated data to display correctly?
// Set up the Select2 control
$('#mySelect2').select2({
ajax: {
url: '/api/students'
}
});
// Fetch the preselected item, and add to the control
var studentSelect = $('#mySelect2');
$.ajax({
type: 'GET',
url: '/api/students/s/' + studentId
}).then(function (data) {
// create the option and append to Select2
var option = new Option(data.full_name, data.id, true, true); //**** DOES IT MATTER WHAT IS PASSED HERE BECAUSE WE ARE NOT DISPLAY THE OPTION TEXT?? ***
studentSelect.append(option).trigger('change');
// manually trigger the `select2:select` event
studentSelect.trigger({
type: 'select2:select',
params: {
data: data //**** THIS DOES NOT SEEM TO SUPPORT FORMATTED SELECTIONS, SO HOW CAN THIS BE DONE? ***
}
});
});

The problem is in format_selection function. The format of the object it receives depends on how it was created. When you use new Option(text, value) it receives only the properties of this Option object, not your original object containing all user info.
A workaround is to check of either possible values in the fuction:
function format_selection(obj) {
let name = obj.name || obj.element.text;
let email = obj.email || obj.element.email;
return $(`<div><b>${name}</b></div><div>(${email})</div>`);
}
For this to work you should append the de property on you Option object:
var option = new Option(data.name, data.id, true, true);
option.email = data.email;
$('#sel').append(option).trigger('change');

The problem, in https://jsfiddle.net/gpsx62de/26/ is with the
function format_selection(obj) {
// Just add this to see the obj
console.log(obj);
return $(`<div><b>${obj.text}</b></div><div>(${obj.id})</div>`);
}
The obj object just contains the Option class data, so:
id: "1",
selected: true,
text: "Leanne Graham",
title: ""
So you have to find a way to pass "data.email" to the "format_selection" method
EDIT
This could be a solution
$('#btn').on('click', function() {
$.ajax({
type: 'GET',
url: 'https://jsonplaceholder.typicode.com/users/1'
})
.then(function(data) {
console.log(data)
// create the option and append to Select2
$('#sel').append($('<option />') // Create new <option> element
.val(data.id) // Set value
.text(data.name) // Set textContent
.prop('selected', true)
.attr('data-name', data.name) // Don't know why the .data(key, value) isn't working...
.attr('data-email', data.email))
.trigger('change');
}); //then
}); //click
And
function format_selection(obj) {
return $(`<div><b>${obj.element.dataset.name}</b></div><div>(${obj.element.dataset.email})</div>`);
}
This is the fiddle https://jsfiddle.net/947jngtu/

How to add content via ajax using the popover boostrap

I tried to view different sources and also looked into the forums posting similar question, but it didnt quite help me with the issue that im facing.
I have a text input filed to which I'm adding a popover to show similar a list of names in the database. The inout field checks for validation, to see if the name entered is unique, if not it displays similar names available in the database that could be re-used.
here is the popover snippet:
$("#account_name_create").popover({
title: 'Twitter Bootstrap Popover',
content: function (process) {
this.accountCollection = new ipiadmin.collections.AccountCollection();
var newName = $("#new-account-form #account_name_create").val();
var userFilter = "accountName~'" + newName + "'";
this.accountCollection.fetch({
data: { "f": userFilter,
"sortby": null,
"type":"ipi",
"pageno":0,
"pagesize":2,
"reversesort" : true
},
cache: false,
success: function(model, response, options) {
var states = [];
map = {};
$.each(model.aDataSet, function (i, state) {
map[state.accountName] = state;
states.push(state.accountName);
});
process(states); //gives an error saying 'undefined is not a function (says process is undefined)'
},
error: function(model, response, options) {
console.log('error');
}
});
},
});
here is the html:
<input type="text" id="account_name_create" name="account_name" class="" size="40" />
I'm not sure how why it says 'process' as undefined. Also not sure if this would be the correct way of displaying the data in the popover.
Any ideas??
Thanks!

process doesn't have scope in the success function, only in the content function. If you want to call the process function from within the success function, you could define it somewhere outside of the jQuery call.

How to create dynamic javascript objects from Json?

I don't know how to create dynamics javascript objects:
I've tried this code but it doesnt work...
Any Idea ?
Somebody tells me " Create the element outside the Ajax Scope " ...
I want to access one of my javascript objects, that are supposed to be sorted into an array called element.
For example, element[1] is one object, element[2] is another object.
The whole array of objects is built from a json ajax call with jquery.
It works very well for the reading ... but its not possible to modify my objects in another part of my program.
It's not asynchronous problem, it seems to be an object name problem like the [] .
Thanks a lot for your precious answers ! I'll try to modify the code... It's so exciting to create objects ! My goal is that the user is able to modify several differents forms at the same time, each form is an object but i don't wanna use Php hi hi... I generate the forms using my print function.
This is the snipe of my code :
/* PHASE 1*/
$.ajax({
type: "POST",
url: "lectureBdd.php",
dataType: "json",
success: function (data) {
//CREATE JAVASCRIPTS OBJECTS
var element = 0;
var element = [];
for (var i = 0; i < data.length; i++) {
element[i] = new Element([i], data[i].nom, data[i].
type, data[i].photo, data[i].taille, data[i].prix);
// OBJECTS TO SCREEN WORKS WELL INTO THE FUNCTION BUT NOT OUTSIDE
element[i].print();
alert(element[i].prix);
}
}
});
element[2].print(); /* Impossible to modify my object*/
/* CONSTRUCTOR CLASSE "ELEMENT" */
function Element(id,txtNom,txtType,txtPhoto,txtTaille,txtPrix){
this.id=id;
this.nom=txtNom;
this.type=txtType;
this.photo=txtPhoto;
this.taille=txtTaille;
this.prix=txtPrix;
this.print=affForm;
this.modif=modifForm;
}
/* THE REST OF THE CODE FOR INFORMATION IT CREATES AUTOMATICALLY A FORM WITH THE OBJECTS VARIABLES */
function affForm(){
var nom= this.nom;
var id=this.id;
var divid = 'div'+id;
var savebutton= 'savebutton'+id;
/* DYNAMIC FORM CREATION: */
/* http://stackoverflow.com/questions/17431760/create-a-form-dynamically-with-jquery- and-submit */
$("#share").append('<form action="sharer.php" method="POST">');
$("#share").append('<div id='+divid+' style="height:100px;background-color:white" > <img src="images/'+this.photo+'" height=100px width=150px />');
$("#share").append('<input type="text" placeholder="'+nom+'" name="routename" id="rname"/>');
$("#share").append('<input type="text" placeholder="'+this.taille+'" name="routename" id="rname"/>');
$("#share").append('<input type="text" placeholder="'+this.prix+' Euros" id="prix" name="prix" class="address"/>');
$("#share").append('<input type="text" placeholder="'+id+'" id="rdescription" name="routedescription" class="address"/>');
$("#share").append('<input type="text" placeholder="tags" id="tags" name="routetags"/>');
$("#share").append('<br><input type="submit" id="'+savebutton+'" value="Save" />');
$("#share").append('</div>');
$("#share").append(divid);
$( "#"+savebutton+"").click(function() {
modifForm(id);
alert( "Handler for .click() called. savebutton"+id+"" );
});

You're creating an Array of Elements inside of your Ajax function's success callback. That isn't exposed to the outer scope, so you can't index that array later on (it isn't defined). Declare it in the scope you're calling it from.
Also, Ajax is asynchronous: your array won't have any elements until its success function runs, which can take any amount of time. You'll need to operate asynchronously, too. Have a look at jQuery's implementation of promises, which should point you in the right direction.
var element = [];
$.ajax({
type: "POST",
url: "lectureBdd.php",
dataType: "json",
success: function (data) {
for (var i=0; i < data.length; i++){
element[i] = new Element([i],data[i].nom,data[i].type,data[i].photo,data[i].taille,data[i].prix);
// OBJECTS TO SCREEN WORKS WELL INTO THE FUNCTION BUT NOT OUTSIDE
element[i].print();
alert(element[i].prix);
}}})
.done(function(){
element[2].print(); // Ajax is async; you'll need to operate async, too. Using a promise here.
});

Having issues tying together basic javascript chat page

I have the skeleton of a chat page but am having issues tying it all together. What I'm trying to do is have messages sent to the server whenever the user clicks send, and also, for the messages shown to update every 3 seconds. Any insights, tips, or general comments would be much appreciated.
Issues right now:
When I fetch, I append the <ul class="messages"></ul> but don't want to reappend messages I've already fetched.
Make sure my chatSend is working correctly but if I run chatSend, then chatFetch, I don't retrieve the message I sent.
var input1 = document.getElementById('input1'), sendbutton = document.getElementById('sendbutton');
function IsEmpty(){
if (input1.value){
sendbutton.removeAttribute('disabled');
} else {
sendbutton.setAttribute('disabled', '');
}
}
input1.onkeyup = IsEmpty;
function chatFetch(){
$.ajax({
url: "https://api.parse.com/1/classes/chats",
dataType: "json",
method: "GET",
success: function(data){
$(".messages").clear();
for(var key in data) {
for(var i in data[key]){
console.log(data[key][i])
$(".messages").append("<li>"+data[key][i].text+"</li>");
}
}
}
})
}
function chatSend(){
$.ajax({
type: "POST",
url: "https://api.parse.com/1/classes/chats",
data: JSON.stringify({text: $('input1.draft').val()}),
success:function(message){
}
})
}
chatFetch();
$("#sendbutton").on('click',chatSend());

This seems like a pretty good project for Knockout.js, especially if you want to make sure you're not re-appending messages you've already sent. Since the library was meant in no small part for that sort of thing, I think it would make sense to leverage it to its full potential. So let's say that your API already takes care of limiting how many messages have come back, searching for the right messages, etc., and focus strictly on the UI. We can start with our Javascript view model of a chat message...
function IM(msg) {
var self = this;
self.username = ko.observable();
self.message = ko.observable();
self.timestamp = ko.observable();
}
This is taking a few liberties and assuming that you get back an IM object which has the name of the user sending the message, and the content, as well as a timestamp for the message. Probably not too far fetched to hope you have access to these data elements, right? Moving on to the large view model encapsulating your IMs...
function vm() {
var self = this;
self.messages = ko.observableArray([]);
self.message = ko.observable(new IM());
self.setup = function () {
self.chatFetch();
self.message().username([user current username] || '');
};
self.chatFetch = function () {
$.getJSON("https://api.parse.com/1/classes/chats", function(results){
for(var key in data) {
// parse your incoming data to get whatever elements you
// can matching the IM view model here then assign it as
// per these examples as closely as possible
var im = new IM();
im.username(data[key][i].username || '');
im.message(data[key][i].message || '');
im.timestamp(data[key][i].message || '');
// the ([JSON data] || '') defaults the property to an
// empty strings so it fails gracefully when no data is
// available to assign to it
self.messages.push(im);
}
});
};
}
All right, so we have out Javascript models which will update the screen via bindings (more on that in a bit) and we're getting and populating data. But how do we update and send IMs? Well, remember that self.message object? We get to use it now.
function vm() {
// ... our setup and initial get code
self.chatSend = function () {
var data = {
'user': self.message().username(),
'text': self.message().message(),
'time': new Date()
};
$.post("https://api.parse.com/1/classes/chats", data, function(result) {
// do whatever you want with the results, if anything
});
// now we update our current messages and load new ones
self.chatFetch();
};
}
All right, so how do we keep track of all of this? Through the magic of bindings. Well, it's not magic, it's pretty intense Javascript inside Knockout.js that listens for changes and the updates the elements accordingly, but you don't have to worry about that. You can just worry about your HTML which should look like this...
<div id="chat">
<ul data-bind="foreach: messages">
<li>
<span data-bind="text: username"></span> :
<span data-bind="text: message"></span> [
<span data-bind="text: timestamp"></span> ]
</li>
</ul>
</div>
<div id="chatInput">
<input data-bind="value: message" type="text" placeholder="message..." />
<button data-bind="click: $root.chatSend()">Send</button>
<div>
Now for the final step to populate your bindings and keep them updated, is to call your view model and its methods...
$(document).ready(function () {
var imVM = new vm();
// perform your initial search and setup
imVM.setup();
// apply the bindings and hook it all together
ko.applyBindings(imVM.messages, $('#chat')[0]);
ko.applyBindings(imVM.message, $('#chatInput')[0]);
// and now update the form every three seconds
setInterval(function() { imVM.chatFetch(); }, 3000);
});
So this should give you a pretty decent start on a chat system in an HTML page. I'll leave the validation, styling, and prettifying as an exercise to the programmer...

multiple TinyMCE

I have recently encountered a problem while developing a page with multiple TinyMCEs.
<textarea style='width:90%;height:500px;' class='tinymce' name='message' id="mce_editor_0" placeholder='Long Message'>{if isset($message)}{$message}{/if}</textarea>
<textarea style='width:90%;height:200px;' class='tinymce' name='signature' id="mce_editor_1" placeholder='Long Message'></textarea>
$.ajax({
url: "../action/getEmailTemplate?id="+id+'&type='+type
}).done(function ( data ) {
console.log("../action/getEmailTemplate?id="+id+'&type='+type);
console.log(data);
if(type=='email'){
tinyMCE.execCommand('mce_editor_0', 'mceSetContent', false, data);
}
if(type=='sig'){
tinyMCE.execCommand('mce_editor_1', 'mceSetContent', false, data);
}
});
And this does not work. Do I misunderstand the logic behind tinyMCE.execCommand?

This won't work. You will find the correct usage description here.
There are generall commands you may call using tinyMCE and there are editor-specific commands called on an editor instance:
tinymce.get('mce_editor_1').execCommand('mceCodeEditor', false, 5);
You may also use the following to address a specific editor
tinyMCE.execInstanceCommand('mce_editor_1', command, user_interface, value, focus)