I am creating a jquery-ui autocomplete list within a bootstrap layout and I'm with layout issues. My problem is that the list appears transparent, does not change color when the mouse is over the item, and are not respecting height. Can someone explain to me what is wrong? you need to use CSS in this case? I wanted to avoid having to modify the bootstrap to be able to reuse the code in other projects.
important: The autocomplete is inside of a bootstrap modal.
Here is the code I have done:
$(document).on("focus","#FormAlteracaoLocalizacao",function(e) {
if ( !$(this).data("autocomplete") ) { // If the autocomplete wasn't called yet:
$(this).autocomplete({ // call it
open: function(event) {
$('.ui-autocomplete').css('height', 'auto');
var $input = $(event.target),
inputTop = $input.offset().top,
inputHeight = $input.height(),
autocompleteHeight = $('.ui-autocomplete').height(),
windowHeight = $(window).height();
if ((inputHeight + inputTop+ autocompleteHeight) > windowHeight) {
$('.ui-autocomplete').css('height', (windowHeight - inputHeight - inputTop - 20) + 'px');
}
},
source: '../asp/source.asp',
minLength: 2,
select: function( event, ui ) {
$("#FormAlteracaoLocalizacao").val(ui.item.label);
$("#FormAlteracaotxtCdLocalizacao").val(ui.item.value);
return false;
},
focus: function( event, ui ) {
$("#FormAlteracaoLocalizacao").val(ui.item.label);
$("#FormAlteracaotxtCdLocalizacao").val(ui.item.value);
return false;
},
select: function( event, ui ) {
$("#situacaoimpressora").focus();
return false;
},
change: function(event, ui) {
console.log(this.value);
if (ui.item == null) {
$("#FormAlteracaoLocalizacao").val(FormAlteracaoLocalizacao);
$("#FormAlteracaotxtCdLocalizacao").val(FormAlteracaotxtCdLocalizacao);
}
}
});
$(this).autocomplete( "option", "appendTo", ".form-horizontal" );
}
});
If you are using the jQuery-UI Autocomplete, then you'll need to use the associated jQuery-UI CSS for it in order for it to render correctly.
Just add a link to one of the built-in themes that comes with JQuery UI. Then your problems will be solved. e.g. link rel="stylesheet" href="~/lib/jqueryui/themes/cupertino/theme.min.css"
Related
When hovering over a link, I'd like to wait at least a second before showing a tooltip with dynamically loaded tooltip.
What I've created is the follow jQuery Code:
$(document).ready(function () {
$("div#galleries ul li:not(.active) a").tooltip({
items: "a",
show: { delay: 1000 },
content: 'Loading preview...',
open: function (event, ui) {
previewGallery(event, ui, $(this));
}
});
});
function previewGallery(event, ui, aLinkElement) {
event.preventDefault();
ui.tooltip.load("http://www.someurl.com/Preview.aspx #preview");
}
Which seemed to work pretty fine, you can see it here:
http://fotos.amon.cc/ (simply hover over the list of galleries)
But I didn't realize at the beginning, that the loading of preview text happens immediately when hovering over the link. So if you quickly hover over all the links, you'll set up several requests:
From the users point of view (without knowing that requests are fired) it looks already the way I want, but how to only start loading the preview, when tooltip is actually showing up?
Thanks,
Dominik
What I did in the end was to use window.setTimeout and window.clearTimeout:
var galleryToolTipTimer = null;
var previewElement = null;
$(document).ready(function () {
$("div#photos div a img").tooltip();
$("div#galleries ul li:not(.active) a")
.tooltip({ items: "a", content: 'Loading preview...', disabled: true, open: function (event, ui) { previewElement.appendTo(ui.tooltip.empty()); } })
.mouseover(function (e) {
if (galleryToolTipTimer != null) { window.clearTimeout(galleryToolTipTimer); }
var aLinkObject = $(this);
galleryToolTipTimer = window.setTimeout(function () { previewGallery(aLinkObject); }, 500);
}).mouseleave(function (e) {
window.clearTimeout(galleryToolTipTimer);
$(this).tooltip("option", { disabled: true });
});
});
function previewGallery(aLinkElement) {
previewElement = $("<div/>").load(aLinkElement.closest("div").data("galleryPreview") + "/" + aLinkElement.data("path") + " #preview", function () {
aLinkElement.tooltip("open");
});
}
Works at least the way I want.
To see it in action, simply navigate to http://fotos.amon.cc/ and hover over one of the gallery links on the left for a preview:
JQueryMobile 1.4 has deprecated the pageshow event and instead recommends using pagecontainershow; however, while I'm able to get the pagecontainershow event at a document level, I can't bind a function to a particular page.
<div id="page1" data-role="page">
...
<script>
$( "#page1" ).on( "pagecontainershow", function( event, ui ) {
console.log("page1 pagecontainershow");
} );
</script>
</div>
Demonstration: http://jsbin.com/IFolanOW/22/edit?html,console,output
I also considered using the alternative form of the jQuery "on" function where we use a selector, but that would need to be a parent of the page div, and that might include other pages, so that doesn't work.
As a workaround, I've done this, but it is very inefficient:
function registerOnPageShow(pageId, func) {
var strippedPageId = pageId.replace("#", "");
var e = "pagecontainershow." + strippedPageId;
// TODO why isn't it working to use $(pageId) instead of $(document)?
$( document ).off(e).on(e, null, {page: strippedPageId, f: func}, function(e, ui) {
if ($(":mobile-pagecontainer").pagecontainer("getActivePage")[0].id == e.data.page) {
e.data.f(e, ui);
}
});
}
You can get the page ID like this.
$(document).on('pagecontainershow', function(e, ui) {
var pageId = $('body').pagecontainer('getActivePage').prop('id');
});
There is currently no way to have a show/hide event on a specific page.
Here is what I'm using (jqmobile >1.4):
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
var activePageId = activePage[0].id;
switch (activePageId) {
case 'loginPage':
...
break;
case 'homePage':
...
break;
case 'groupPage':
...
break;
default:
}
});
$(document).on("pagecontainershow", function(event, ui) {
var pageId = $('body').pagecontainer('getActivePage').prop('id'),
showFunc = pageId+'_show';
if (typeof MobileSite[showFunc] == 'function') {
MobileSite[showFunc]();
}
});
MobileSite is contained in an external .js file with all the show() functions.
$(document).on("pagecontainerbeforeshow", function (event, ui) {
if (typeof ui.toPage == "object") {
var crrentPage = ui.toPage.attr("id")
}
});
and you must use this code before calling Index.js !!
In my application once user has entered certain value in the spinner I should change content of the view. As part of this process I need to destroy and remove spinner.
The problem is that spinner gets into the loop and increments its' value to no end.
Sample code:
spinner = $( "#spinner" ).spinner({
change: function( event, ui ) {
console.log('change');
},
spin: function( event, ui ) {
console.log( 'spin event, value = ', ui.value );
if ( ui.value == 3 ) {
spinner.spinner( "destroy" );
}
}
});
Please check the following sample: http://jsfiddle.net/XseWc/312/
Increase value 3 times: click, click, click
How can this be achieved?
Update:
Two options available here.
To use stop event instead of spin.
To trigger mouse up event before destroying spinner. With mouse up spinner will remove it handlers and destroy will work correctly.
Just prevent the default event!
spinner = $( "#spinner" ).spinner({
change: function( event, ui ) {
console.log('change');
},
spin: function( event, ui ) {
if ( ui.value == 3 ) {
//NEW
event.preventDefault();
spinner.spinner( "destroy" );
}
}
});
old fiddle
See this documentation entry. It prevents the spinner from doing the normal (default) behaviour.
EDIT
Perhaps this can be seen as a workaround but this solution works and doesn't trigger tons of errors.
$(function () {
var value;
spinner = $("#spinner").spinner({
change: function (event, ui) {
console.log('change');
},
spin: function (event, ui) {
value = ui.value;
},
stop: function (event, ui) {
if (value == 3) {
$(this).spinner("destroy");
}
}
});
});
updated fiddle
Try this instead (both hide() and remove() worked for me)
spinner = $( "#spinner" ).spinner({
change: function( event, ui ) {
console.log('change');
},
spin: function( event, ui ) {
if ( ui.value == 3 ) {
spinner.hide();
}
}
});
Will this accomplish what you're looking for?
spinner = $( "#spinner" ).spinner({
change: function( event, ui ) {
console.log('change');
},
spin: function( event, ui ) {
if ( ui.value == 3 ) {
spinner.remove();
}
}
});
I'm using jquery ui tabs with the tablesorter 2.0 plugin to obtain sort abilities on a dynamically populated html table but the sort only happens on the first tab upon page load. The other tabs do not sort or obtain the zebra striping form the tablesorter.
html:
<div id="tabs">
<ul>
<li>Ftp Only</li>
<li>Billing Only</li>
<li>Variance</li>
<li>Adj Only</li>
</ul>
</div>
I've tried:
$('#tabs').tabs({
ajaxOptions: {cache: false},
load: function()
{
$("#ReportTable").tablesorter();
}
});
Any suggestions are much appreciated.
The zebra widget only applies to visible rows, so you'll need to trigger the applyWIdgets method. And I'm going to assume you are using jQuery UI 1.10.2 and jQuery 2.0, where you can use the activate callback (demo):
$("#tabs").tabs({
activate: function (event, ui) {
var $t = ui.newPanel.find('table');
// make sure there is a table in the tab
if ($t.length) {
if ($t[0].config) {
// update zebra widget
$t.trigger('applyWidgets');
} else {
// initialize tablesorter
$t.tablesorter({
theme: 'blue',
widgets: ["zebra"]
});
}
}
}
});
Update: Oops, if the table is in the first tab, use this code (demo):
var tablesorterOptions = {
theme: 'blue',
widgets: ["zebra"]
};
$("#tabs").tabs({
create: function (event, ui) {
var $t = ui.panel.find('table');
if ($t.length) {
$t.tablesorter(tablesorterOptions);
}
},
activate: function (event, ui) {
var $t = ui.newPanel.find('table');
if ($t.length) {
if ($t[0].config) {
$t.trigger('applyWidgets');
} else {
$t.tablesorter(tablesorterOptions);
}
}
}
});
I would like this to log out the value of the input:
HTML:
<input id="spinner" />
JS:
$(function() {
$("#spinner").spinner({
change: function(event, ui) {
console.log(ui.value)
}
});
});
Fiddle: http://jsfiddle.net/u9T5s/
jsFiddle Demo
I am not sure what the appropriate hook is as far as the jquery ui API goes, but here is a simple way to do this as well:
$(function() {
$("#spinner").spinner();
$('.ui-spinner-up').click(function(){
console.log("Increased to "+$('#spinner').val());
});
$('.ui-spinner-down').click(function(){
console.log("Decreased to "+$('#spinner').val());
});
});
This this:
http://jsfiddle.net/u9T5s/1/
$(function() {
$("#spinner").spinner({
change: function(event, ui) {
console.log(this.value)
}
});
});
Use this.value instead of ui.value. This will take the current object to which the change function is attached.
Answer to comment: you implement different function one is change and one is spin.
Also change will execute one on blur after a real change happened an spin executes once up/down click is fired.
spin: function( event, ui ) {
if ( ui.value > 10 ) {
$( this ).spinner( "value", -10 );
return false;
} else if ( ui.value < -10 ) {
$( this ).spinner( "value", 10 );
return false;
}
}