I have this select2:
$('#order_address_select').select2({
placeholder: "Sratr typing...",
ajax: {
url: 'mysite/myurl',
dataType: 'json',
},
tags: true,
});
And then I am trying to add options dynamically
var newOption = new Option('myoption',1,false,false);
$('#order_address_select').append(newOption).trigger('change');
$('#order_address_select').select2('open');
new option appends in my <select></select> tag, but nothing appears in dropdown list. How do I resolve this?
Related
Sure this must be something stupid I'm doing but I'm having a real issue populating a select element and setting the selected value using Knockout to consistently work. I have a ASP.NET view which has a number of select options and I need to set the selected values with data from the server.
Sometimes these bind correctly but more often than not the selectedValue is not selected - is it the order I'm doing things in?
When using ko.mapping to setting observable properties I can't get this to work at all so have been setting individual observables values but even this doesn't work all the time.
<select data-bind="options: possibleValues, optionsText: 'Value', optionsValue: 'Id',value: selectedValue, optionsCaption: 'Select Value...'">
function ViewModel() {
var self = this;
self.selectedValue = ko.observable();
self.possibleValues = ko.observableArray();
function GetValues() {
$.ajax({
url:"http:/abc.com/api/GetValues",
dataType: "json",
type: "GET",
data: {},
success: function(data) {
$.each(data.values, function(i,option){
self.possibleValues.push(option);
});
}
}
function GetInitialValue() {
$.ajax({
url:"http:/abc.com/api/GetValue",
dataType: "json",
type: "GET",
data: {},
success: function(data) {
*using ko.mapping doesn't work at all?*
self.selectedValue1(data1.Id)
self.selectedValue2(data2.Id)
self.selectedValue3(data3.Id)
}
});
}
}
ko.applyBindings(new ViewModel());
I am using select2 4.0.0 for this project. A lot of the other comments and thoughts on this issue seem be for previous versions of select2, so I decided to post a new question.
I have a select2 on a page that can both create entries in the database and edit entries in the database. The select2 is populated dynamically by ajax after the user types a few letters and they can select a value. This works fine for creating entries when they need to select one.
On the same page, they can click existing entries to display further information and edit the entry in the same form. This also needs to update the select2 element with the correct selection text and update the select element that is backing the select2. Since this is normally done through ajax, the markup doesn't exist normally.
I've tried reading the documentation for select2, but I find it a bit disorganized. Does select2 provide any feature for accomplishing this? Do I need to create and update all the markup manually? I had looked at a dataAdapter, but I'm not sure if that is what I need or not.
HTML:
<select class="form-control" name="entry" id="select_field" data-url="/entry/search"></select>
Code for the select2 element:
$("#select_field").select2({
placeholder: "Search",
minimumInputLength: 2,
allowClear: true,
ajax: {
cache: true,
delay: 250,
method: 'POST',
url: $("#select_field").data('url'),
processResults: function (data, page) {
return {
results: data,
};
},
},
escapeMarkup: function (markup) { return markup; },
templateSelection: function (record) {
if (!record.id) { return record.text; }
return record.title;
},
templateResult: function (record) {
if (record.loading) { return record.text; }
var markup = $("<div>").text(record.title);
return markup.html();
},
});
How set in the drop-down list item selected by the user?
Scenario:
1. User not enter all required values in form
2. Click sent.
3. Page is refresh and value in dropdown list is not selected. How select the value?
I have working script which retrieve data for the list.
$('#userid').select2({
placeholder : " --- select ---",
minimumInputLength: 2,
ajax: {
url: "index.php?modul=getusers",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: function (term, page) {
return {
q: term,
page_limit: 10
};
},
results: function (data, page) {
return { results: data };
}
},
allowClear: true,
formatSelection: function(data) {
return data.text;
}
});
Standard data in ajax call:
{"text":"sample text", "id":"1"}
Input:
<input type="text" value="<? echo $_POST['userid']; ?>" class="input" id="userid" name="userid">
I tried to add the following code, but it doesn't work
initSelection: function(element, callback) {
var id=$(element).val();
if (id!=="") {
$.ajax("index.php?modul=getusersfriend&q="+id, {
dataType: "json"
}).done(function(data) { callback(data); });
}
},
Make sure that you have a properly formatted JSON Object being returned in your call back in initSelection. The discussion for that has been addressed here already.
But so far looks good. You may want to bind the change event of the select or the submit event of the form to serialize its value before the form is submitted.
You can store its value on your server (yucky) or just serialize the form object and get the value to pass to initSelection when the select2 is loaded.
Which is what would happen here:
var id=$(element).val();
Here is a simple example of serializing your form.
PS: Don't really see what bootstrap has to do with anything.
This jquery ui dialog is filled with html and form values from an ajax call (works). I want to close or submit it and then reopen and reuse it just the same. I can close and reopen fine but it has the old values still there and then the new ones are added. It keeps adding the html values after each close and reopen. There are many questions about this on SO but I don't see a clear answer. I have tried close, empty, destroy but the combination isn't working the way I need it. Any ideas?
$("#StoreForm").dialog({
autoOpen:false,
width:500,
height:900,
modal:true,
buttons: {
OK: function() {
$('#StoreForm').dialog('close');
$(this).dialog('hide');
$(this).dialog('empty');
},
'Save': function() {
$(this).dialog('empty');
}
}
});
//additional code to click and open the dialog
$(".sel").unbind('click');
$(".sel").on("click", function(e){
e.preventDefault();
$("#StoreForm").dialog('open');
var valueSelected = $(this).closest('tr').children('td.item').text();
$.ajax({
url: 'query/categories.cfc',
dataType: 'json',
cache: false,
data: {method: 'getProductInfo',
queryFormat: 'column',
returnFormat: 'JSON',
productID: valueSelected
},
success: function(response, status, options){
$("#PROD_SUPER_ID").val(response.DATA.PROD_SUPER_ID[0]);
$("#color").val(response.DATA.COLOR_ATTRIB);
$("#SIZE_ATTRIB").val(response.DATA.SIZE_ATTRIB);
$("#price").val(response.DATA.PRICE);
var w = [];
w.push("<p>", response.DATA.ICON[0], "</p>", "<p>",
response.DATA.FULL_DESCRIPTION [0], "</p>")
$("#StoreForm").prepend(w.join(""));
What I found was you can close the dialog and empty the html and it will clear this type of dialog set-up. For reopening I nested the 2nd ajax call in the success response of the initial one..
//set up dialog with options
$("#StoreForm").dialog({
autoOpen: false,
width: 500,
height: 500,
modal: true,
buttons: {
Cancel: function(){
$('#StoreForm').dialog('close');
$('#StoreForm').html("");
},
//pop-up individual items
"Add to Cart": function(){
$.ajax({
url: $("#storeCart").attr('action'),
data: $("#storeCart").serializeArray(),
type: 'POST',
success: function(response){
var name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
allFields = $( [] ).add( name ).add( email ).add( password ),
tips = $( ".validateTips" );
if you have any questions please respond. Thanks
I am using Jquery ui tabs with asp.net webforms and I'm loading the content with ajax. I actually have two problems
I don't know how to load the content for the first tab load. Right now I use the tabsselect to load content via ajax.
$('#contentHolder').bind( "tabsselect", function(event, ui) {
// run ajax request
});
The build in spinner control only seems to work when I use actual paths for the href. But since I have to use pagemethods I need to use an id instead.
One
Two
Three
// ajax request to pagemethod
$.ajax...
Updated Code
// tab initializaztion
var $tabs = $('#followersTable').tabs({ spinner: 'Loading...' });
$tabs.bind("tabsselect", function(event, ui) {
//LoadTabContent(ui.index);
var request = {
'controlName': 'FollowersTab'
};
$(this).tabs({
ajaxOptions: {
type: "POST",
url: "ajax/Followers.aspx/LoadTabContent",
data: $.toJSON(request),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$(container).html(data.d);
},
error: function () {
}
}
})
});
For your first question:
$("your-tabs-selector-here").tabs( "load" , 0 ); this will force your tab first tab to be loaded via ajax.
If I didn't get it wrong; you could use [WebMethod] for your page methods and you can combine your page methods with UI Tabs ajaxOptions. You can play with ajaxOptions for return type and/or method name ..etc
$( "your-tabs-selector-here" ).tabs({
ajaxOptions: {
type: "POST",
url: "Default.aspx/PageMethodName",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json"
}
});