I followed the example provide in the docs, and applied it to a select multiple but some things don't work as expected.
Instead of getting the actual values I get Undefined, Undefined
Here is the JSFiddle code with the problem
Am I missing a step?
This part of the example provided here doesn't work for me. The console.log shows the correct data but select2 shows undefined in the select
jQuery.each(data, function(index, item) {
console.log(item);
var option = new Option((item.name + ' (' + item.code + ')'), item.id, true, true);
preRequisites.append(option).trigger('change');
});
preRequisites.trigger({
type: 'select2:select',
params: {
data: data
}
});
Thank you
the code needed this part item.text ||
templateSelection: function(item) {
return item.text || (item.name + ' (' + item.code + ')');
},
Related
Refer to https://select2.github.io/examples.html, text "Searching" is shown when the remote data is loading. However, I don't know why "undefined" is shown in my case.
This is the css file.
<div class="col-sm-9">
<select class="js-data-example-ajax form-control" style="width:100%;">
<option value="select2/select2" selected="selected">select2/select2</option>
</select>
</div>
And the setting of ajax call
$(".js-data-example-ajax").select2({
ajax: {
url: "/search/products",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, page) {
return {
results: data.items
};
},
cache: true
},
minimumInputLength: 1,
templateResult: formatProduct,
templateSelection: formatProductSelection
});
Result:
function formatRepo (repo) {
if (repo.loading) return repo.text;
var markup = '<div class="clearfix">' +
'<div class="col-sm-1">' +
'<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' +
'</div>' +
'<div clas="col-sm-10">' +
'<div class="clearfix">' +
'<div class="col-sm-6">' + repo.full_name + '</div>' +
'<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
'<div class="col-sm-2"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
'</div>';
if (repo.description) {
markup += '<div>' + repo.description + '</div>';
}
markup += '</div></div>';
return markup;
}
function formatRepoSelection (repo) {
return repo.full_name || repo.text;
}
$ajax.select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
complete code which loads repositories in select 2 you can alter this code according to your requirements
my select box with multiple select
<select id="to_users" name="to_users" class="form-control js-data-example-ajax" multiple="multiple">
</select>
you can format results
processResults: function(data, page) {
// parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to
// alter the remote JSON data
return {
results: $.map(data, function(obj) {
return { id: obj.user_id, text: obj.name };
})
//results: data
};
},
if you are formatting results to select2 behaviour then disable code
/* escapeMarkup: function(markup) {
return markup;
}, // let our custom formatter work
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page*/
Please try
function formatRepo(repo) {
if (repo.value == undefined) {
repo.value = 'Loading...'
}
var markup = '<div class="clearfix">' + repo.value + '</div>'
return markup;
}
There is a possible workaround for the above issue. Feel free to make comments.
Here is the code I've written before, let say the return JSON is {"items":[{"id":1,"name":"Product1"},{"id":2,"name":"Product2"}]}
var formatProduct = function(data){
return '<div>'+(data.name)+'</div>';
}
I've modified the code as follow and the 'Searching...' text shows again:
var formatProduct = function(data){
return '<div>'+(data.name || data.text)+'</div>';
}
In select2.js, line 798, when the data is remotely loading
this.template(data, option);
this.template directs to select2.js line 1058
Results.prototype.template = function (result, container) {
var template = this.options.get('templateResult');
container.innerHTML = template(result);
};
// result is an object indicating whether the data is loading.
// {disabled: true, loading: true, text: "Searching…"}
the template here takes the custom parameter 'templateResult' and generate the text, therefore, the custom function must contain data.text, otherwise it returns underfined.
In my case it was the formatProduct function (it has a different name in my code, but it's the same thing).
Let's say you call formatProduct for templateResult:
templateResult: formatProduct
In this case you have to check what formatProduct returns, like:
function formatProduct(product) {
return product.name || product.text;
}
In my case I was returning always product.name and the "Searching" text was under product.text, so I had to check to display it when no product was being found yet.
I am using select2 select box to populate and show some server data. Most of it works fine as I am able to get the results and populate the combo box. But when I type in the search box, the selection doesn't narrow down the the closest match.
I found the problem was because the backend URL doesn't support searching based on the string provided, while select2 keeps making multiple search request to backend, based on user entered text. The legacy backend code returns results in one shot, which is populated into the combobox the first time.
My question is, how do I get the the select box to focus to the closest matching result, without making multiple Ajax calls. I want the search to happen in the results which are already fetched.
Thanx to anyone helping me out on this.
My ajax call is like below, if this helps...
select2: {
placeholder: 'Select Next Plan Id',
allowClear: true,
id: function (item) {
return item.id;
},
ajax: {
type: 'GET',
dataType: "jsonp",
url: "http://172.16.7.248:8480/app/gui?action=1&type=11",
data: function (term, page) {
return { search: term };
},
results: function (data, page) {
return { results: data.aaData };
},
success : function(data, status, xhr) {
var html = "<option value=''>None</option>";
$.each(data.aaData, function(i, item) {
html += "<option data=" + JSON.stringify(item.id) + " value=" + item.id + "'>" + item.id + "</option>";
});
$('#nextplanid').html(html);
self.prop('data-loaded', 'true');
},
error : function(data, status, xhr) {
}
},
formatResult: function (item) {
return item.id;
},
formatSelection: function (item) {
return item.id;
},
initSelection: function (element, callback) {
return $.get('/getText', { query: element.val() }, function (data) {
callback(data);
});
}
},
I am a new to JSON, I am trying to make the menu that can click and display the data.
All the objects are return from the Controller of my asp.net mvc project.
This is my code :
<script language="javascript" type="text/javascript">
function ViewProduct() {
var searchVal = $("#txtsearch").val();
$.getJSON(url, function (data) {
var mainMenu = $("#content ul#navmenu-v");
$.each(data, function (index, dataOption) {
var new_li = $("<li class='level1' id='select_list'><a href='javascript:void(0);' id='" + dataOption.ID + "' class ='selectedcategory'>" + dataOption.Name + "</a>");
mainMenu.append(new_li);
$('a#' + dataOption.ID).click(function () {
var urlGetProByDep = '<%: Url.Content("~/") %>' + "Products/GetProductsByDepList";
t = dataOption.ID;
var data = {};
if (searchVal != "") {
data.depID = t;
data.Q = searchVal;
} else {
data.depID = t;
}
$(".brand_id").empty();
$.getJSON("ProductListing/Index", data, function (product) {
$(".brand_id").empty();
$.getJSON("ProductListing/Index", data, function (product) {
$.each(product.ja, function (index, value) {
$(".brand_id").html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
});
});
});
});
}
$(document).ready(function () {
ViewProduct();
});
The other block of menu code works very well , just have a problem with this block of my code above :
$.getJSON("ProductListing/Index", data, function (product) {
$(".brand_id").empty();
$.getJSON("ProductListing/Index", data, function (product) {
$.each(product.ja, function (index, value) {
$(".brand_id").html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
});
});
});
It is the block that I take the the object of JSON to display the in my view, but when I click on the menu , It shows only the element at the last of JSON object.
This is my JSON :
{"ja":
[
{"Name":"ABC1","PictureName1":"my image name1","ID":1},
{"Name":"ABC2","PictureName2":"my image name2","ID":2}
]}
Each menu is the department of each product. And if I do not loop the product data in the menu block, I cannot take the ID of the department to query to get the product in each department.
Any idea or question are welcome, Thanks you for taking your time.
You seem to have a copy&paste-error in your code, you will do 2 request to exactly the same url after each other - not even using the results of the first request. I guess you only wanted something like
$(".brand_id").empty();
$.getJSON("ProductListing/Index", data, function (product) {
$.each(product.ja, function (index, value) {
$(".brand_id").html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
});
});
But your problem is the .html() method. You are looping over your products, and in each turn you set the html of each .brand_id-element to a new value. So the result you see is what you have set to all elements in the last iteration. What you would need to do is set the HTML of each element on its own, each with a different content.
Yet, instead of emptying the list items and readding new contents to them (maybe the number of your products changes each query request), I'd rather remove all items and append new ones:
$(".brand_id").remove();
$.getJSON("ProductListing/Index", data, function (product) {
var $parent = $("#parent"); // the parent node of the product list
$.each(product.ja, function (index, value) {
$parent.append('<li class="brand_id">' + value.Name + '<br />' + value.PictureName + '<br />' + value.ID + '</li>');
});
});
(edit) ...or, if brand_id really is an id:
var $parent = $("#brand_id").empty();
$.getJSON("ProductListing/Index", data, function (product) {
$.each(product.ja, function (index, value) {
$parent.append('<div>' + value.Name + '<br />' + value.PictureName + '<br />' + value.ID + '</div>');
});
});
You are subscribing to the .click event of the anchor inside a $.each call. But since you have captured the dataOption variable you are using to prepare the AJAX request in a closure, it is obvious that by the time you click on the link, this dataOption variable is already pointing to the last element of the array you are looping over. So you could pass the argument to the click callback like this:
<script type="text/javascript">
function ViewProduct() {
// TODO: There's some url variable used here which is nowhere defined => define it
$.getJSON(url, function (data) {
var mainMenu = $("#content ul#navmenu-v");
$.each(data, function (index, dataOption) {
$(mainMenu).append(
$('<li/>', {
'class': 'level1',
// TODO: find an unique id or you get broken HTML
'id': 'select_list',
'html': $('<a/>', {
'href': '#',
'id': dataOption.ID,
'class': 'selectedcategory',
'text': dataOption.Name,
'click': function(arg) {
return menuClick(arg);
}({ dataOption: dataOption })
})
})
);
});
});
}
function menuClick(arg) {
var urlGetProByDep = '<%= Url.Action("GetProductsByDepList", "Products") %>';
var t = arg.dataOption.ID;
var data = { };
var searchVal = $('#txtsearch').val();
if (searchVal != '') {
data.depID = t;
data.Q = searchVal;
} else {
data.depID = t;
}
$('.brand_id').empty();
var url = '<%= Url.Action("Index", "ProductListing") %>';
// TODO: Are those 2 nested AJAX calls really necessary here?
$.getJSON(url, data, function (product) {
$('.brand_id').empty();
$.getJSON(url, data, function (product) {
$.each(product.ja, function (index, value) {
$('.brand_id').html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
});
});
});
}
$(document).ready(ViewProduct);
</script>
Also notice that I have moved the searchVal declaration inside the click callback in order to account for changes of its value between the time the page is loaded and the user actually clicking on the link.
Anyone know why the following does not work?
$.each( data.d, function( index, item ) {
// creates the tabs with custom ids
$( "#tabs" ).tabs( "add", "page.aspx?id=" + item.id, item.name )
.find('>ul>li:last')
.attr('id', 'tab_' + item.id);
// creates the buttons
$( "#buttons" ).append( "<input type='button' id='buttona" + item.id + "' value='" + item.name + "'>" );
// link buttons with tabs
$( "#buttona" + item.id ).live('click', function() {
$( "#tabs" ).tabs( "select" , "#tab_" + item.id );
});
});
I am trying to assign id's to the tabs, then select the tabs using their id's.
The above does nothing when a button is clicked and it returns no errors at all.
It works fine when using the index as shown below, but I need to use an id for various reasons:
$.each( data.d, function( index, item ) {
// creates the tabs
$( "#tabs" ).tabs( "add", "page.aspx?id=" + item.id, item.name );
// creates the buttons
$( "#buttons" ).append( "<input type='button' id='button" + index + "' value='" + item.name + "-" + index + "'>" );
// link buttons with tabs
$( "#button" + index ).live('click', function() {
$( "#tabs" ).tabs( "select" , index );
});
});
You can use the index() method to get the index of the tab from the id of its header:
$("#button" + item.id).live("click", function() {
$("#tabs").tabs("select", $("#tab_" + item.id).index());
});
Since index() is called without arguments in the code above, it will return the index of the element relative to its siblings, i.e. the other tab headers.
you can switch the tabs with the id of the tab:
var $tabs = $("#tabs").tabs();
$("button").click(function() {
$tabs.tabs( "select", "#tabs-6" );
});
It seems to me that .index() returns an index from 1 so that if I have 3 tabs and want to select the third one, I should return :
$("#button" + item.id).live("click", function() {
$("#tabs").tabs("select", $("#tab_" + item.id).index()-1);
});
I'm trying to get an autocomplete field firing in my asp.net mvc website. Basically the user types in their location and i go out to my db and pre-populate with country and postcodes that match.
The problem im having is that when the view load an error throws saying "Microsoft JScript runtime error: Exception thrown and not caught". It is throwing in the jquery.Ui.widget.js file at the following line:
throw "cannot call methods on " + name + " prior to initialization; " +
"attempted to call method '" + options + "'";
Following is my script:
<script type="text/javascript" language="javascript">
$(function () {
$.ajaxSetup({ type: "POST" });
$('#Location').autocomplete('<%= Url.Action("Find") %>', {
dataType: 'json',
parse: function (data) {
var rows = new Array();
for (var i = 0; i < data.length; i++) {
rows[i] = { data: data[i], value: data[i].PlaceName, result: data[i].PlaceName, id: data[i].LocationID };
}
return rows;
},
formatItem: function (row) {
return row.PlaceName;
},
delay: 300,
autofill: true,
selectFirst: true,
highlight: false
}).result(function (event, row) {
$("input[id$='LocationID']").val(row.LocationID);
});
});
</script>
I've made sure all the needed jquery files are attached but still cant get it to fire. Ive got the simple default functionality of the autocomplete control to fire (showing a prepopulated list), but as soon as i try to pull from a Json datatype it gives me grief.
Any ideas?
You can check out my answer to Ben here, hopefully it will help you too.