I am using jQuery-ui autocomplete version v1.12.1. How do I add loading GIF ? I am trying to retrive data using jQuery only ... There is NO AJAX call.
jQuery(document).ready(function(){
var product_data = <?php echo $product_implode; ?>;
if(product_data != ''){
jQuery( "#search_box" ).autocomplete({
appendTo: "#project-description",
minLength: 1,
source: product_data,
open: function(e, ui) {
jQuery('#project-description').addClass('autocomplete-content');
},
close: function(e, ui){
jQuery('#project-description').removeClass('autocomplete-content');
}
});
}
});
Here is my code for autocomplete. And I am using datatables version 1.10.16 to display data. I want to show loader image until search data is not displayed.
JQuery autocomplete adds the ui-autocomplete-loading class at the time of loading content.
Add the following line to css:
.ui-autocomplete-loading { background:url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/images/ui-anim_basic_16x16.gif) no-repeat right center }
Edit:
As said by #Twisty, if you have your all data at client side, then it will not get enough time to display loading gif while displaying autocomplete.
So you can add following script with css above mentioned. See Demo
setTimeout(function(){
//logic of fetching data.
}, 1500);
Hope, this may help you to solve your problem.
Related
I have issue with collapsible jQuery mobile.
I'm using Multipage template, where all the pages are in the same document, separated with the div named page. I have two Collapsible, one on each page. I made an animation to the top of the page, my code is above:
$(document).on("pagecreate",function(event, ui){
// alert("pagecreate event fired - the page has been initialized, the DOM has been loaded and jQuery Mobile has finished enhancing the page.");
$("[data-role='collapsible']").collapsible({
collapse: function( event, ui ) {
$(this).children().next().slideUp(300);
},
expand: function( event, ui ) {
$(this).children().next().hide();
$(this).children().next().slideDown(300);
$("body, html").animate({
scrollTop: $(".ui-collapsible-heading-toggle").offset().top
}, 'slow');
}
});
$('.ui-collapsible-heading-toggle').click(function(){
$("body, html").animate({
scrollTop: $(".ui-collapsible-heading-toggle").offset().top
}, 'slow');
});
In the first collapsible animation works, but in the second, only the animations slideUp and slideDown work, with offset nothing happens.
Why??
Thanks for help!
I'm having trouble changing the position of a jQuery-ui dialog box.
What I'm doing is loading an image into the dialog box within the open event. Because of the unknown height of the image, the dialog box is no longer centred in the window. So I also reposition it after loading the image, but the repositioning seems to be ignored.
But, if I add an alert before the repositioning, it works fine, so clearly some sort of timimg issue is in play here.
Is there any work around for this?
The relevant bit of my code is:
$( "#dialog-message" ).dialog({
open: function(e, ui){
$("#theImage").attr("src","aRandomImage.jpg");
alert(1); // causes the next line to work properly
$(this).dialog("option", "position", {my: "center", at: "center", of: window});
},
...
You have to wait for the image to load before repositionning:
$( "#dialog-message" ).dialog({
open: function(e, ui){
var $img = $("#theImage"), mydialog = $(this);
$img.bind('load',function(){ // bind load event
mydialog.dialog("option", "position", {my: "center", at: "center", of: window});
});
$img.attr("src","aRandomImage.jpg"); // start loading
}
see :
http://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/
for IE8 chached images load event fixing.
is it possible to disable single headers in jquery ui 1.9? I had a quation runing about this, while i was using 1.8 and there it wasnt possible. I fond a way, but its really hard coded. It opens the tab and if the user doesnt have permitions to it , the tab closes. So is there any better way now?
best regrads.
I found a way and i thought ill share it hopefully it will help some one else a lot. :)
$(function() {
var icons = {
header: "h3",
activeHeader: "ui-icon-circle-arrow-s"
};
$( "#prod_accordion" ).accordion({
active:<?php echo $db_obj->getValue('status') ? 'acc_'.$tab_status : 'acc_0'; ?>,
icons: icons,
autoHeight: false,
beforeActivate: function(event, ui) {
var newIndex = $(ui.newHeader).index('h3');
if (jQuery.inArray(newIndex , accordion_array) == -1) {
event.preventDefault();
}
}
});
});
the accrodion_array is an array with indexes like (1,2,3,4) and i check if the index of the clicked accordion lets say 5 is in the array. If not then perventDefault() and the accordion header wont open.
if u add ui.addClass('ui-state-disabled'); to the accordion headers that are not in the array the user will now what accordion he cant open. :)
I have implemented a drag & drop feature using JQuery UI - my current code is provided below:
My JavaScript function receives JSON array from PHP and then uses a loop to create the draggable elements:
<script type="text/javascript">
function init() {
var items = <?php echo $result_j;?>; //items is an one dimensional array
for ( var i=0; i<<?php echo $total_rows_j;?>; i++ ) {
$('<div>' + items[i] + '</div>').data( 'item_name', items[i] ).attr( 'class', 'snk_button' ).appendTo( '#drag' );
}
With the 'items' array I have created several div elements (above code) which I then turn into draggable elements (code below).
$(".snk_button").draggable( {
containment: '#drag_section',//Div #drag_section contains the Div #drag
stack: '#drag div',
cursor: 'move',
revert: true
} )
Below is my droppable code:
$( "#dropp" ).droppable(
drop: handleDrop
});
function handleDrop( event, ui ) {
ui.draggable.draggable( 'option', 'revert', false );
} // End function handleDrop
So far, everything is fine with the draggable items attaching themselves to the droppable div.
Now, I want to tweak this behavior a little:
I want the draggable items to arrange themselves 'automatically' in the droppable div (called '#dropp' in this example), starting from the top left (they will be floating left). Currently this is not happening even though the '#dropp' div has the 'float:left' property set. So, what should I do to have the draggable items arrange themselves when dropped on '#dropp'?
When I take out a draggable item out of the droppable div ('#dropp') I want it return to the div that originally contained the draggable items ('#drag' in this example).
Can you please help implement these 2 behaviors?
After trying this on my own and some R&D for nearly 5-6hrs, I have been able to solve both my problems.
For benefit of others who might be facing the same issues, below is the additional code that is required to implement the behaviors described above:
$( "#dropp" ).droppable({
accept: '#drag div',
drop: function(event, ui)
{
$("div#dropp").append (ui.draggable);
$(ui.draggable).css ({ position:"relative", top:"0px", left:"0px" })
.addClass("moved");
} // End function for handling drop on '#dropp'
}); //End $( "#dropp" ).droppable
This has been added new:
$( "#drag" ).droppable({
accept : ".moved",
drop : function (event, ui)
{
$("div#drag").append (ui.draggable);
$(ui.draggable).css ({ position:"relative", top:"0px", left:"0px" });
} // End function for handling drop on '#drag'
}); // End $( "#drag" ).droppable
That's all is required to implement the behaviors described above. Hope somebody finds the information useful :-)
i want to style the autofill control scrollbar.
max and delay properties is not working in the jquery auto fill control.
i want to show alternate background colors in the menu item.
iam using jquery 1.4.4 and jquery-ui-1.8.7, jquery-ui-themes-1.8.7
do you have solution for this problem.
$('#zipcode').autocomplete({
minLength: 4,
max: 2,
delay: 10,
source: data.d,
focus: function (event, ui) {
$('#zipcode').val(ui.item.Zip);
return false;
},
select: function (event, ui) {
$('#zipcode').val(ui.item.Zip);
$('#state').val(ui.item.Abbreviation);
$('#city').val(ui.item.Name);
return false;
}
});
Here's how I implemented alternate background color:
$('#myautocomplete').autocomplete({
source: ...,
...
open: function (event, ui) {
$("li.ui-menu-item:odd").each(function () {
rdaJq(this).addClass("autocomplete-item-alternate");
});
}
});
Where "autocomplete-item-alternate" is a css class I defined in a stylesheet.
As far as I am aware, the jQuery UI Autocomplete plugin does not support a max option -
jQuery UI Autocomplete Documentation
Adding alternate background colors can be done by modifying the refresh method of ui.widget
var items = this.element.children("li:even:not(.ui-menu-item):has(a)")
.addClass("ui-menu-item even")
.attr("role", "menuitem");