I know I'm doing something wrong with the jQuery UI selectable code but I can't figure out exactly what. Also, how can I condense the two parts of the jQuery UI selectable code into one function?
Thank you!
HTML:
<ul id="monthPicker">
<li class="month ui-selectable">January</li>
<li class="month ui-selectable">February</li>
<li class="month ui-selectable">March</li>
<li class="month ui-selectable">April</li>
<li class="month ui-selectable">May</li>
<li class="month ui-selectable">June</li>
<li class="month ui-selectable">July</li>
<li class="month ui-selectable">August</li>
<li class="month ui-selectable">September</li>
<li class="month ui-selectable">October</li>
<li class="month ui-selectable">November</li>
<li class="month ui-selectable">December</li>
</ul>
jQuery:
$(document).ready(function() {
//works
$('.month').bind('click', function() {
$(this).toggleClass('picked');
});
//doesn't work
$('.month').selectable({
selected: function(event, ui) {
if($(this).hasClass('picked')){
$(this).removeClass('picked');
}
else{
$(this).addClass('picked');
}
}
});
//doesn't work
$('.month').selectable({
unselected:function(event, ui) {
if($(this).hasClass('picked')){
$(this).removeClass('picked');
}
else{
$(this).addClass('picked');
}
}
});
});
You should be calling selectable on the parent element, not the children:
$('#monthPicker').selectable();
The selected items are then given the class ui-selected when the user selects them.
If you want to style the list items (<li> elements), they are given the class ui-selectee.
Related
I have an Owl Carousel inside a tabpanel like this:
<div role="tabpanel" class="tab-pane fade" id="tabAcessorios">
<div id="acessoriosCompativeis8x" class="featured-carousel brand-dot">
//itens here
</div>
</div>
When i click the link to display the tab, the carousel is broken:
I tried to trigger the refresh like this:
$("#acessoriosCompativeis8x").trigger("refresh.owl.carousel");
But it didn't work. What am i missing here?
Here's the nav definition:
<ul class="nav nav-tabs nav-stacked" role="tablist">
<li role="presentation" class="active">FOCO/PRÉ-PAGO</li>
<li role="presentation">INDIVIDUAL</li>
<li role="presentation">FAMÍLIA</li>
<li role="presentation">CONTROLE</li>
#if (Model.AcessoriosCompativeis != null)
{
<li role="presentation">Acessórios Compatíveis</li>
}
</ul>
And here's the carousel definition:
$('#acessoriosCompativeis8x').owlCarousel({
items: 2,
lazyLoad: true,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 5000
});
I managed to solve the issue by destroying and re-creating the carousel when the panel appears:
$('#linkAcessorios').on('shown.bs.tab', function (e) {
var owl = $('#owl-example').owlCarousel(opcoes);
owl.trigger('destroy.owl.carousel');
owl.html(owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');
owl.owlCarousel(options);
});
I'm looking to select an item and I want to use this throughout a process, so the selected item needs to be stored somehow. My Next button should make it so I still have the selected item id in step2.php. I was thinking of using a POST or GET, but I was wondering if there are other possibilities using jquery/js, how should I do this?
And if it's not possible with jquery, how would I do it in php? The only option I see is using GET.
$(function() {
$("#selectable").selectable({
selected: function(event, ui) {
$(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected");
}
});
});
<ol id="selectable">
<li class="ui-widget-content" id="1">Item 1</li>
<li class="ui-widget-content" id="2">Item 2</li>
<li class="ui-widget-content" id="3">Item 3</li>
<li class="ui-widget-content" id="4">Item 4</li>
<li class="ui-widget-content" id="5">Item 5</li>
<li class="ui-widget-content" id="6">Item 6</li>
<li class="ui-widget-content" id="7">Item 7</li>
</ol>
Next
I have created a jsFiddle
Thank you for any help.
could you store the ID in script and pass down in a querystring using the anchor click event?
Something similar to the following maybe..
$('anc_id').click( function() {
//code to move to step 2...
//something like....
var step2 = 'step2-php?id=' + _ID_ ;
....
return false;
});
note: you need to modify the function above to suit your needs.
regards
I want to disable a specific element of a selectable list.
I am able to disable the whole list, but when I try with specific element, it doesn't work.
$('#disableButton').click(function(){
$('#selectable li#b ').selectable('disable');
});
http://jsfiddle.net/Komlan/RYWaZ/1/
Here is my code
//reset seats
function resetSelect(){
var options = { filter: "li.selectable" };
$( "#selectable").selectable(options);
}
//Ajax get taken seats
$('input[name="choice"]').change(function(){
resetSelect();
var sc_id = $('input:radio[name=choice]:checked').val();
$.ajax({
url: 'seatings.php',
data:{ sc_id:sc_id},
type: "POST",
dataType:'text',
success: function(data){
var id = data.split(",");
for (var i=0;i<id.length -1;i++){
alert(id[i]);
var string = "#"+id[i];
$(string).css("color","red");
$('#selectable li'+string).removeClass("selectable ui-selected");
}
var options = { filter: "li.selectable" };
$( "#selectable" ).selectable('destroy').selectable(options);
}
});
});
In summary, I'm getting a series of id and disable them one after the other, every time there is a change on my radio button group.
There is no straight way to do this (AFAIK), but here's a little hack you can use (and remember, it's just a hack and maybe not the best):
Add the css class "selectable" (or whatever you want):
<ol id="selectable">
<li class="ui-widget-content selectable" id="ok"> 1</li>
<li class="ui-widget-content selectable"> 2</li>
<li class="ui-widget-content selectable"> 3</li>
<li class="ui-widget-content selectable"> 4</li>
<li class="ui-widget-content selectable"> 5</li>
<li class="ui-widget-content selectable"> 6</li>
<li class="ui-widget-content selectable"> 7</li>
</ol>
And then use a filter on that css class:
// Create a filter to only make <li> with the specified css class, selectable.
var options = { filter: "li.selectable" };
$( "#selectable" ).selectable(options);
$('#lol').click(function(){
console.log('dsfds');
// Remove/add (toggle) the class used in the filter on the <li> you want to remove the selectable.
// (Also remove the ui-selected in case it's selected.)
$('#selectable li#ok').toggleClass("selectable").removeClass("ui-selected");
// Now destroy the selectable and re-create it with the filter again.
// We removed the css class from a <li> used in the filter, so it won't be selectable again.
$( "#selectable" ).selectable('destroy').selectable(options);
});
Updated: http://jsfiddle.net/RYWaZ/7/
References:
Selectable filter
.toggleClass()
Actually you can achieve this now.
You've got to add the class you want to your item, for example "unselectable", and use this css trick in your filter option : item:not(.unselectable)
Html :
<ul id="selectable">
<li class="unselectable"> 1</li>
<li> 2</li>
<li> 3</li>
</ul>
Jquery :
$( "#selectable" ).selectable({
filter:"li:not(.unselectable)"
});
You'll be able to select all the li children of #selectable, excepted the li which has the .unselectable class. Then you just have to toggle this class when it is necessary.
I have two tabs made with jquery which contains seperate selectables.
The tab that opens by default, the selectable works fine.
When going to the other tab, selecting using the lasso won't work.
Problems started when added the stop event to the selectable.
HTML:
<div id="tabs">
<ul>
<li>Div 1 (0)</li>
<li>Div 2 (0)</li>
</ul>
<div id="div1">
<ul class="selectable" id="sel1">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
<li class="ui-state-default">13</li>
<li class="ui-state-default">14</li>
<li class="ui-state-default">15</li>
</ul>
</div>
<div id="div2">
<ul class="selectable" id="sel2">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
<li class="ui-state-default">13</li>
<li class="ui-state-default">14</li>
<li class="ui-state-default">15</li>
</ul>
</div>
JS:
$(function() {
$("#sel1").selectable( {
autoRefresh: false,
stop: function() {
var count = 0;
$( '.ui-selected', this).each(function() {
count++;
});
$('#tab1').html('Div 1 (' + count + ')');
}
});
$("#sel2").selectable( {
autoRefresh: false,
stop: function() {
var count = 0;
$( '.ui-selected', this).each(function() {
count++;
});
$('#tab2').html('Div 2 (' + count + ')');
}
});
$("#tabs").tabs();
});
See example: http://jsfiddle.net/3pKQf/8/
use:
autoRefresh: true,
on the second one
My question is similar, but different from jquery-hover-menu-when-hovering-over-child-menu-disappears.
I originally had the hover event on the li.item, which was a little quirky, but did what i needed it to do. I switched the hover to the span so that the event would fire on the text block, rather than the list block, which expands the full width of the list.
The effect I'm trying to achieve is when hovering over ul.sub. I'd like it to continue with the animation in queue from span.text's hover, which is displaying it, but also keep it open.
What is happening is that the mouse is leaving the span, so the li.item is firing its mouseout portion of the trigger.
jsFiddle Page
HTML
<ul id="main">
<li class="head">Title Bar</li>
<li class="item odd">
<span class="text">A</span>
<ul class="sub">
<li>1</li>
<li>2</li>
</ul>
</li>
<li class="item even">
<span class="text">B</span>
<ul class="sub">
<li>3</li>
<li>4</li>
</ul>
</li>
<li class="item odd">
<span class="text">C</span>
<ul class="sub">
<li>5</li>
<li>6</li>
</ul>
</li>
<li class="item even">
<span class="text">D</span>
<ul class="sub">
<li>7</li>
<li>8</li>
</ul>
</li>
</ul>
CSS
/* colors used are not for production; they are
used only to enhance the example's visual distinction */
#main{width:10em;}
.head,.item{border:1px solid black;padding:.5em;}
.head{font-weight:bold; background:#336; color:#fff; cursor:pointer;}
.item{background:#f90;}
.sub{display:none;}
.sub li{padding-left:1em;}
.text,.sub{cursor:pointer;}
JavaScript
$(document).ready(function(){
// specific here because of other divs/list items
$('#main li.item span.text').hover(function(){
$(this).siblings().stop(true,true).toggle('slow');
});
$('li.head').hover(function(){
$(this).parent().find('ul.sub').stop(true,true).toggle('slow');
});
});
Edit:
I think something along these lines is what I need, however the animation is refired when going from the sub to the span.
$(document).ready(function(){
// specific here because of other divs/list items
$('#main li.item span.text').hover(
function(){$(this).siblings().stop(false,true).show('slow');}
,function(){$(this).siblings().stop(true,true).hide('slow');}
);
$('#main li.item ul.sub').hover(
function(){$(this).stop(false,true).show();}
,function(){$(this).stop(false,true).hide('slow');}
);
$('li.head').hover(function(){
$(this).parent().find('ul.sub').stop(true,true).toggle('slow');
});
});
Split the hover behavior into its two constituents, mouseenter and mouseleave. Also split toggle() into show() and hide(). Bind mouseenter to the span.text and mouseleave to the li.item:
$(document).ready(function() {
// specific here because of other divs/list items
$('#main li.item span.text').mouseenter(function() {
$(this).siblings().stop(true, true).show('slow');
});
$('#main li.item').mouseleave(function() {
$(this).children("ul").stop(true, true).hide('slow');
});
$('li.head').hover(function() {
$(this).parent().find('ul.sub').stop(true, true).toggle('slow');
});
});
That way, the hover is not triggered by whitespace, which is what you want.