I'm using jQuery UI Autocomplete search and open events. But the open event is only called when the request is successful and there are elements. There does not seem to be an event when the response is successful but empty.
I display and hide a spinner logo when triggering the request, like this :
search: function() {
$('.spinner').show();
},
open: function() {
$('.spinner').hide();
}
This works well when there are elements in the server response but if the server response is empty the spinner stays forever...
Thanks for your answers.
PS : I'm not alone : remove spinner from jquery ui autocomplete if nothing found ;)
As of jQuery UI v1.9 you can do something like the following:
$('#field').autocomplete({
source: source_url,
search: function(event, ui) {
$('#spinner').show();
},
response: function(event, ui) {
$('#spinner').hide();
}
});
This is a known open enhancement for future versions of jQuery UI...
http://bugs.jqueryui.com/ticket/6777
Will have to wait and/or use a workaround (like sending a special response from the server and handle this case in the open event).
If you're stuck on an older version of jQuery ui, the right answer is to use the class ui-autocomplete-loading, which gets added and removed while the request/response is in flight.
Related
I didn't find an answer to my question anywhere and I know nothing about javascript, so I can't figure it out myself.
If I have jQuery mobile website built so that every single page is in separate html file (single page template). May I use standard asynchronous Google Analytics code with it, or do I have to make modifications similar to those used in multi page template?
Would be very thankful if someone could answer this question.
Yes, you can use the standard Google Analytics code. You will however, need to "push" certain page views to Google Analytics because of the way jQuery Mobile handles page navigation.
For example, if you have a Contact form on your site at contact.html that, once submitted, goes to a process.php page, and then after completing, the user arrives at thank-you.html, you will need to call some JavaScript to "push" the pageview to Google Analytics.
For example, if your jQuery Mobile page element (data-role="page") has id="thank-you", then I'd use this:
<script type="text/javascript">
$(document).delegate('#thank-you', 'pageshow', function () {
//Your code for each thank you page load here
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
_gaq.push(['_trackPageview', '/thank-you.html']);
});
</script>
UPDATE:
I would put this in your script.js file which is included in the head after you load jQuery and jQuery Mobile. This fires on each data-role="page" pageshow event, and is currently working on my live projects just fine.
$('[data-role=page]').live('pageshow', function (event, ui) {
try {
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
hash = location.hash;
if (hash) {
_gaq.push(['_trackPageview', hash.substr(1)]);
} else {
_gaq.push(['_trackPageview']);
}
} catch(err) {
}
});
I've used sortable/portlet jquery ui plugin on my website. I load some boxes after the page is loaded via ajax. but they don't look like the boxes appears at the page load time. I know the problem loading via ajax and bind issue. But how can I solve it?
You're ajax call has a success method which you can use to bind to elements that have been dynamically added.
For example you could do
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
$(".column").sortable({ connectWith: ".column", cursor: 'crosshair' });
}
});
I have a list of files and in the end of each li-element I got a button, which looks like
<div class="settingsBtn"></div>
In the dialog I got a form. A want to submit some data and then close dialog. To be honest I think I'm missing something simple, the submit works but I don't want to load any html data on the php side, I just want to close the dialog.
I accomplished this but enable ajaxform plugin and I handle it manually:
$(document).delegate("#myDialog", "pageinit", function() {
$('#myForm').submit(function() {
$(this).ajaxSubmit({
success: function() {
$('.ui-dialog').dialog('close');
}
});
return false;
});
});
But it seems like a wrong solution. I don't have an ajax loader picture, and the jquery mobile framework has everything for ajax handling, but I didn't find how to close the dialog =(
I'd appreciate any help, thanks.
I am using JQuery UI plugin blockUI to block UI for every ajax request. It works like a charm, however, I don't want to block the UI (Or at least not show the "Please wait" message) when I am making ajax calls to fetch autocomplete suggest items. How do I do that? I am using jquery autocomplete plugin for autocomplete functionality.
Is there a way I can tell the block UI plug-in to not block UI for autocomplete?
$('#myWidget').autocomplete({
source: function(data, callback) {
$.ajax({
global: false, // <-- this is the key!
url: 'http:...',
dataType: 'json',
data: data,
success: callback
});
}
});
Hm, looks to be a missing feature in jquery :)
You could use a global flag to indicate if it is a autocomplete call and wrap it in a general autcompletefunction
var isAutoComplete = false;
function autoComplete(autocomplete){
isAutoComplete = true;
if($(autocomplete).isfunction())
autocomplete();
}
$(document).ajaxStart(function(){if(!isAutoComplete)$.blockUI();}).ajaxStop(function(){isAutoComplete = false;$.unblockUI();});
It's not a nice solution but it should work...
try using a decorator
$.blockUI = function() {
if (condition_you_dont_want_to_block) {
return;
}
return $.blockUI.apply(this, arguments);
}
or you can write your own block function that is smarter
function my_blockUI() {
if (condition_you_dont_want_to_block) {
return;
}
$.blockUI();
}
$(document).ajaxStart(my_blockUI).ajaxStop($.unblockUI);
You can set blockUI to work for all functions on the page by adding to a global jQuery event handler. To make sure it doesn't get called on autocomplete ajax calls we have to determine if the call is an autocomplete call or not. The problem is that these global functions don't have that much information available to them. However ajaxSend does get some information. It gets the settings object used to make the ajax call. the settings object has the data string being sent. Therefore what you can do is append to every data string in every ajax request on your page something like:
¬autocomplete=notautocomplete
For example:
$.ajax({data:"bar=1&foo=2¬autocomplete=notautocomplete"})
Then we can put this code in your document ready section before anything else:
$(document).ajaxSend(
function (event, xhr, ajaxOptions){
if(ajaxOptions.data.indexOf("notautocomplete") !== -1){
$.blockUI;
}
});
$(document).ajaxStop($.unblockUI);
Of course the other better idea would be to look for something unique in the auto complete requests, like the url, but that depends on which autocomplete plug-in you are using and how you are using it.
using a modal block (block UI) means blocking any inputs from user, I'd suggest plain old throbber to show 'Please wait..' and to block ( set attributes readonly="readonly" ) ur input controls till the ajax request is complete.
The above UI seems to be self conflicting!
In my ASP .NET MVC application i have a link that refreshes "the preview data box" after each click. I've done this using this code:
<%= Ajax.ActionLink("delete", "DeleteItem", new AjaxOptions(){UpdateTargetId="casePreview"}) %>
Now I would like to change the behaviour in such a way that the preview data box is refreshed each time link's onmouseover event is raised.
What's the simplest way to do it?
Use jQuery to fire the click event of the link
$(selector).mouseover(function () {
$(this).click();
});
EDIT: A simplified version of what I described in my comment. Essentially, the mouseover event handler should use some AJAX to retrieve updated information, when the request is complete the UpdateUI function fires and does its work. This particular script would also cause an alert to appear when the element is clicked.
$(selector).mouseover(function() {
$.ajax({
type: "GET",
url: "/my/path/to/someplace",
complete: UpdateUI});
}).click(function() {
alert("tada");
});
function UpdateUI(XMLHttpRequest, textStatus) {
//Update Your UI
}
Unfortunately there is no way to do this using the AjaxHelpers only: you'll have to use javascript directly. For example, you can use jQuery and "register" to the onmouseover event, and than use the Ajax method to call for the refresh of the "preview data box"
You should call jaquery method on onmouseover() event.