I am using jQuery UI's autocomplete with a remote data file. It works but it's slow. My JSONP is over a meg of 'value' junk characters and I'd like to minimize that. Here is the format:
[{"value": "Aaronsburg, PA"},
{"value": "Abanda, AL"},
{"value": "Abbeville, AL"}]
How do I get jQuery UI's Autocomplete to accept a remote data file of the form:
{["Aaronsburg, PA", "Abanda, AL", "Abbeville, AL"]}
or
["Aaronsburg, PA", "Abanda, AL", "Abbeville, AL"]
?
jQuery UI Autocomplete can take any format of data. You have complete control the rendering of the list but in this case I think it might just work.
This demo (albeit with a local source) seems to work as expected.
If you need more control you can tailor the renderItem function to suit any data format:
var searches = [{
label:'first',
desc:'foo foo',
},
{
label:'second',
desc:'bar bar',
},
{
label:'third',
desc:'baz baz',
}];
$(function() {
$('input').autocomplete({
dataType: 'json',
source: searches
})
.data('autocomplete')._renderItem = function(ul, item) {
return $('<li></li>')
.data('item.autocomplete', item)
.append(item.desc)
.appendTo(ul);
};
});
Or there is an example on the jQuery site using remote JSONP as a source and customizes the label and value needed to populate the list.
Well, the only way I can think of to do this is by using php with fopen and fread, then format the data.
Related
From the index page, a user clicks a navigation link, the data attribute is passed via ajax, the data is retrieved from the server but the content is not being updated on the new page.
Been stuck for hours, really appreciate any help!
js
$('a.navLink').on('click', function() {
var cat = $(this).data("cat");
console.log(cat);
$.ajax({
url: 'scripts/categoryGet.php',
type: 'POST',
dataType: "json",
data: {'cat': cat},
success: function(data) {
var title = data[0][0],
description = data[0][1];
console.log(title);
$('#categoryTitle').html(title);
$('#categoryTitle').trigger("refresh");
$('#categoryDescription').html(description);
$('#categoryDescription').trigger("refresh");
}
});
});
Im getting the correct responses back on both console logs, so I know the works, but neither divs categoryTitle or categoryDescription are being updated. I've tried .trigger('refresh'), .trigger('updatelayout') but no luck!
This was not intended to be an answer (but I can't comment yet.. (weird SO rules)
You should specify in the question description that the above code IS working, that your problem occurs WHEN your playing back and forth on that page/code aka, using the JQM ajax navigation.
From what I understood in the above comment, you're probably "stacking" the ajax function every time you return to the page, thus getting weird results, if nothing at all.
Is your example code wrapped into something ? If not, (assuming you use JQM v1.4) you should consider wrapping it into $( 'body' ).on( 'pagecontainercreate', function( event, ui ) {... which I'm trying to figure out myself how to best play with..
Simple solution to prevent stacking the ajax definition would be to create/use a control var, here is a way to do so:
var navLinkCatchClick = {
loaded: false,
launchAjax: function(){
if ( !this.loaded ){
this.ajaxCall();
}
},
ajaxCall: function(){
// paste you example code here..
this.loaded = true;
}
}
navLinkCatchClick.launchAjax();
How to configure the Kendo UI grid, so it would issue requests only for specific (displayed) fields?
In my instance, a Kendo UI grid is bound to a OData service. The service exposes a table with many (200+) fields. The app allows users to configure displayed field set of the Grid, set initial filters and sort parameters. The app configures the Grid, which then goes off and queries OData service.
The grid kendo.Data.DataSource is defined as:
var gridDataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: "#Url.Content(dynDataSource.Url)",
contentType: "application/json; charset=utf-8",
type: "GET",
dataType: "json"
}
},
pageSize: #Model.MaxPageSize,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
filter: ...
}
Here's a sample request issued by the Grid (captured by Firebug):
http://localhost:22411/Data/Comp?%24inlinecount=allpages&%24top=1000&%24filter=DistrictCode+eq+%27460800%27
This returns all the fields of the table, which is a problem. The fields need to be limited by selecting only the required fields, the request for which would look like:
http://localhost:22411/Data/Comp?%24inlinecount=allpages&%24top=1000&%24filter=DistrictCode+eq+%27460800%27&%24select=DistrictCode,DistrictName,DistrictNumber
Again, how to configure the grid for this to happen?
I realize the source is available for Kendo UI, but I'm currently still on a trial version which doesn't include the source.
I think I've got a workable solution for this myself. I used an idea from this blog post:
http://community.dynamics.com/product/crm/crmtechnical/b/zhongchenzhoustipstricksandportaldevelopment/archive/2012/05/20/how-to-use-kendo-ui-datasource-kendo-ui-grid-with-dynamics-crm-2011-rest-endpoint.aspx
I attach an event handler the ajaxSend event, watch for my OData Service URL, and once such a request is detected, append the select column list to the URL. Here's the code:
$(document).ajaxSend(function (e, jqxhr, settings) {
if (settings.url.toLowerCase().indexOf("#Url.Content(dynDataSource.Url)".toLowerCase()) >= 0) {
settings.url += "&%24select=#requestColumnList";
}
});
Hope this helps. Still, if someone has got a better solution, I'd like to hear it.
I've also posted this question to Telerik forums: http://www.kendoui.com/forums/framework/data-source/configure-the-kendo-ui-datasource-so-it-would-issue-requests-only-for-specific-displayed-fields.aspx#2131604
I ran into a similar issue and implemented an approach that constructs an array of included columns in the transport's read data callback:
dataSource.transport.read.data = function(options) {
var data = {};
data["$select"] = columns.map(function(c) {
return c.field;
});
return data;
}
If you are using column menu and have hidden columns, you can also filter based on which columns are visible and force a grid refresh as columns are enabled.
columnShow: function (e) {
e.sender.dataSource.read();
}
I am using Jquery ui Autocomplete.But it show error autocomplete showing self.element.propAttr error.
this is my ajax code
$.ajax({
url: "persons.xml",
dataType: "xml",
success: function( xmlResponse ) {
var data = $( "person", xmlResponse ).map(function() {
return {
value: $( "name", this ).text()
};
}).get();
$( "#birds" ).autocomplete({
source: data,
minLength: 0
});
}
});
I am using xml for response but that doesnot seem to be the problem it seems some function in javascript is deprecated.
Can anyone give me any solutions for this?
Add this lines in front of your statement:
jQuery.fn.extend({
propAttr: $.fn.prop || $.fn.attr
});
I was facing this problem when refactoring my javascript and found that the problem was I removed jquery.ui.core.js, and instead was using only jquery-ui-1.9.1.custom.min.js.
I created this file using the Download Builder at the Jquery UI website with everything checked. Correct me If I am wrong but jquery-ui-1.9.1.custom.min.js should have contained all the javascript necessary to run all the jquery ui addins (in this case autocomplete was failing).
Adding the reference back to jquery.ui.core.js fixed the bug.
Before you say it, I know, IE6 is dead and it smells like it's dead. However my client has a closed network, all their machines are run only IE6, so that 100% of my user base :/
I'm using jQuery UI and the autocomplete widget, it performs well in Firefox however on IE6, even for a small list of items (here 5, returned by json with an item and a description) it's locking up the browser when I mouse over them. Applying the css seems like it may be the cause.
$( "#searchTest" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "index.pl",
dataType: "json",
data: {
term: request.term
},
success: function( data ) {
response( $.map( data.items, function( item ) {
return {
label: item.id + ' - ' + item.label,
value: item.id
}
}));
}
});
},
minLength: 2
});
I can even kind of replicate the problems in IE6 using the online demos, albeit to a much lesser extent, it's just slow it doesn't hang up the browser.
If anyone can make any suggestions for improving performance in IE6 I'd be very happy to hear them. I'm using the default style sheet from the Themeroller. Thanks
Doh! I was using a plugin to add round corners to IE6: http://dillerdesign.com/experiment/DD_roundies/
I commented this out and it's working way better! The plugin in question is now EOL (my bad for not checking this). The client will have to live with a functional system, but no round corners till they change browser versions.
I'm trying to build an array structured like
[
[num,
[num, num num]],
[num,
[num, num]],
]
but I get [num,num,num,num,num,num,num] =(
code here: http://jsfiddle.net/WRppV/4/
the problem is that I'm trying to send the var 'x' as data in an AJAX update function that jQueryUI uses for sortable. And it needs to be the array structure above. =\
I'm using the http://jqueryui.com/demos/sortable/#connect-lists kind of sorting.
So, normally I would just to $j(list selector).sortable('serialize')
but because I have two lists I tried this $j(selector1,selector2).sortable('serialize') which is what you do for sorting two lists as in the example. But when the ajax request is made, it only sends the updated list. Which would be fine if I had tons of processing power. but I need the list, and which list it belongs to.
Whats really interesting is that my server says the war is getting sent as
"content"=>"215,207"
but that doesn't even include the section_id
I should be getting something similar to
["141", ["203", "206", "204", "205"],
"142", ["215", "207"]]
(numbers and structure from chrome when I run the script from the link on my webpage)
my sortable js:
$j("<%= #sortable_contents %>").sortable({
connectWith: '.section-content',
axis: 'y',
zIndex: 1003,
cursor: 'crosshair',
update: function(){
d = $j("#sort_sections > li").map(function(index, element){
return [element.id.replace(/[a-z]+_/,""), [
$j(element).find("li.content").map(function(subindex, subelement){
return subelement.id.replace(/[a-z]+_/,"");
}).get()]];
}).get();
alert(d)
$j.ajax({
type: 'post',
data: {'content': d},//$j("<%= #sortable_contents %>").sortable('serialize'),//
dataType: 'script',
complete: function(request){
$j('#sort_contents').effect('highlight');
},
url: '/contents/sort_contents'})
}
});
This is nested. Don't listen to alert, try console.log instead.
In chrome, this gets logged out as this: