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.
Related
Currently attempting to implement Select2 in my rails app so a user can send messages to multiple users, I adapted the remote data example code on the site for my app as follows:
$("#shareCurrentInput").select2({
placeholder: "Search for a user",
width: "350px",
multiple: true,
minimumInputLength: 3,
ajax: {
url: "search.json",
dataType: 'json',
data: function (term, page) {
return {
search: term
};
},
results: function (data, page) {
return {results: data};
}
},
formatResult: userFormatResult,
formatSelection: userFormatSelection,
escapeMarkup: function (m) { return m; }
});
function userFormatResult(user) {
var markup = "<table class='user-result'><tr>";
if (user.uid !== undefined ) {
markup += "<td class='user-image'><img src='http://graph.facebook.com/" + user.uid + "/picture?width=50&height=50'/></td>";
}
markup += "<td class='user-info'><div class='user-title'>" + user.name + "</div>";
markup += "</td></tr></table>";
return markup;
}
function userFormatSelection(user) {
return user.name;
}
This works as I intend it to in Safari, but in Firefox, I believe due to the fact that by default the browser caches input values from session to session, it causes issues when refreshing the page and attempting to select users. Is there a way to prevent Firefox from caching this in the code (i.e. without asking the user to turn off caching in their browser setting)? Or is there another reason this code isn't working in Safari?
I've tried using this code to disable autocomplete through jQuery, and there doesn't seem to be a CSS method to disable form autocomplete. There also seem to be issues with disabling autocomplete in Chrome. Is there an optimum cross-browser solution? Autocomplete is off by default in the input field in Select2, and the input is not part of a form, so this solution does not seem possible.
EDIT: As per this page, the issue is only when I refresh the page, if I press enter in the address bar then there is no issue.
Just added this code:
$('#shareCurrentInput').val('');
Seems to work even on refresh in Firefox.
If similar issue is happening with page refresh/reload using jQuery, try
document.location.reload(true);
instead of document.location.reload();
Details: https://developer.mozilla.org/en-US/docs/Web/API/Location/reload
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();
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.
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.
I have an ASP.NET MVC 3 Web Application (Razor), and a particular View with the jQuery UI AutoComplete plugin (v1.8).
Here's the setup i currently have:
$('#query').autocomplete({
source: function (request, response) {
$.ajax({
url: "/Search/FindLocations",
type: "POST",
dataType: "json",
data: { searchText: request.term },
success: function (data) {
response($.map(data, function (item) {
return { name: item.id, value: item.name, type: item.type }
}))
},
error: function (xmlHttpRequest, textStatus, errorThrown) {
// don't know what i should do here...
}
})
},
select: function (event, ui) {
$.get('/Search/RenderLocation', { id: ui.item.name }, function (data) {
$('#location-info').html(data);
});
},
delay: 300, minLength: 3
});
The AutoComplete returns locations in the world, basically identical to Google Maps auto complete.
Here are my questions:
1) What are the recommended settings for delay and minLength? Leave as default?
2) I thought about putting [OutputCache] on the Controller action, but i looks as though the plugin automatically does caching? How does this work? Does it store the results in a cookie? If so when does it expire? Is any additional caching recommended?
3) I've noticed if i type something, and whilst the AJAX request is fired off, if i type something else, the dialog shows the first result momentarily, then the second result. I can understand why, but it's confusing to the user (given the AJAX request can take 1-2 seconds) but i'm thinking about using async: false in the $.ajax options to prevent multiple requests - is this bad design/UX?
4) Can you recommend any other changes on my above settings for improving performance/usability?
1) It really depends on your usage and your data.
2) You should use [OutputCache]. If there's any caching happening on the plugin, it's only going to be for each user, if you use caching at the controller action level, it'll cache one for all users. (again, this might actually be bad depending on your usage, but usually this is good to do)
3) This questions kind of hard too because of the lack of context. If ajax requests are 1-2 seconds and there's no way to make this shorter, you really should be a pretty big delay in so that users aren't sending off many requests while typing out a long word (if they type slow).
4) sounds like you need to look at your /search/FindLocations method and see where you can do caching or pref improvements. Give us a look at your code in here and I can try to suggest more.