How do i get multiple jquery selectables in tabs working - jquery-ui

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

Related

Asp.net Mvc and Boostrap 4 Pagination - Show active current page

The code is doing the pagination correctly, however, I am unable to use the boostrap class that shows the active page
<div class="page-nation">
<ul class="pagination pagination-large">
<li>
#{
if (ViewBag.PageNumber> 1)
{
<a class="page-link" href="#Url.Action("Index", "Boats", new { search= ViewBag.searchData, pageNumber= ViewBag.PageNumber- 1 })">«</a>
}
else
{
<a class="page-link disabled">«</a>
}
}
</li>
#{
var currentPage= ViewBag.PageNumber;
for (var i = 1; i <= ViewBag.totalCount; i++)
{
<li #(currentPage== i ? "class= page-item active" : "")>
<a class="page-link" href="#Url.Action("Index", "Boats", new {search= ViewBag.searchData, pageNumber= i})">#i</a>
</li>
}
}
<li>
#if (ViewBag.PageNumber< ViewBag.totalCount)
{
<a class="page-link" href="#Url.Action("Index", "Boats", new { search= ViewBag.searchData, pageNumber= ViewBag.PageNumber+ 1 })">»</a>
}
else
{
<a class="page-link disabled">»</a>
}
</li>
</ul>
</div>
The part that should show the active item is this, but for some reason, this class is not working
<li #(currentPage== i ? "class= page-item active" : "")>
HTML output:
As can be seen in HTML, the class is called, but it doesn't pass anything to it...
<div class="page-nation">
<ul class="pagination pagination-large">
<li>
<a class="page-link" href="/Barcos?numeroPagina=1">«</a>
</li>
<li>
<a class="page-link" href="/Boats?pageNumber=1">1</a>
</li>
<li class="page-item" active="">
<a class="page-link" href="/Boats?pageNumber=2">2</a>
</li>
<li>
<a class="page-link disabled">»</a>
</li>
</ul>
</div>
You're not adding quotes to the class property value, adding quotes will make your HTML render properly:
<li #Html.Raw(currentPage== i ? "class=\"page-item active\"" : "")>

How to get the <li> element id lists at JQuery-UI sortable

I would like to get all 'li' elements id such as a, b, c, ... g.
How to get all 'li' element id lists?
Thank you!
JQuery-UI sortable example
<!doctype html>
<html lang="en">
<head>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
</head>
<body>
<ul id="sortable">
<li id="a" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li id="b" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li id="c" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li id="d" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li id="e" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li id="f" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li id="g" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</body>
</html>
Try the following:
$('#sortable').find('li').each(function(){
var listId = $(this).attr("id");
});

UI-Bootsrap dropdown stop working with adding ng-if on the drop-down content

I'm using ui-boostrap dropdown directive, and want to add my own ng-if to prevent showing it on some cases.
When adding this ng-if, even when it always returns "true" - the dropdown stop working (doesn't pop up). It seems the drop-down button stops receiving ng-click events (therefore not changing the isOpen state..).
HTML:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group" uib-dropdown is-open="status.isopen">
<!-- When putting this ng-if, the drop down stops working -->
<div ng-if="isAllowed()">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
</div>
<script type="text/ng-template" id="dropdown.html">
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="button-template-url">
<li role="menuitem">Action in Template</li>
<li role="menuitem">Another action in Template</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link in Template</li>
</ul>
</script>
</div>
</body>
</html>
JS:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
console.log('isOpen = ' + $scope.status.isopen);
};
$scope.isAllowed = function() {
return true;
}
});
Here is a plunker reproduce the problem:
http://plnkr.co/edit/8K9MUsDfFcjyiZvFdv5x?p=preview
Any ideas?
Take out the div with the ng-if on it and put the ng-if on the enclosing div, i.e.
<div class="btn-group" uib-dropdown is-open="status.isopen" ng-if="isAllowed()">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>

Is there an existing alphabetized list widget for jQuery Mobile?

I am looking to create this common (on iPhone) list type using jQuery Mobile:
The key feature is the alphabet running down the right side that will scroll to the closest matching item.
Does something like this already exist or do I need to roll my own? I was unable to find it in the demos, although List dividers gets me part way there.
Well it's a work in progress, but I think it can be done. example:
http://jsfiddle.net/qXT9Z/32/
CSS
#list-navigation {
color:#696969;
position:absolute;
right:0px;
top:0px;
z-index:200;
}
JS
$('.scrollToSelected').bind('click', function() {
var view = $(this).attr('id');
var list = view.split('-');
var elem = $("#"+list[1]);
// not sure if this is offset or position
var position = elem.position();
var offset = elem.offset();
//alert('left: '+position.left + ", top: " + position.top);
//alert('left: '+offset.left + ", top: " + offset.top);
$.mobile.silentScroll(position.top);
//$.mobile.silentScroll(offset.top);
});
$('.showDetails').bind('click', function() {
$.mobile.changePage( "#details", { transition: "slideup"} );
});
HTML
<div data-role="page" id="list">
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider" id="a">A</li>
<li class="showDetails">
Adam Kinkaid
</li>
<li class="showDetails">Alex Wickerham</li>
<li class="showDetails">Avery Johnson</li>
<li data-role="list-divider" id="b">B</li>
<li class="showDetails">Bob Cabot</li>
<li data-role="list-divider" id="c">C</li>
<li class="showDetails">Caleb Booth</li>
<li class="showDetails">Christopher Adams</li>
<li class="showDetails">Culver James</li>
<li data-role="list-divider" id="d">D</li>
<li class="showDetails">David Walsh</li>
<li class="showDetails">Drake Alfred</li>
<li data-role="list-divider" id="e">E</li>
<li class="showDetails">Elizabeth Bacon</li>
<li class="showDetails">Emery Parker</li>
<li class="showDetails">Enid Voldon</li>
<li data-role="list-divider" id="f">F</li>
<li class="showDetails">Francis Wall</li>
<li data-role="list-divider" id="g">G</li>
<li class="showDetails">Graham Smith</li>
<li class="showDetails">Greta Peete</li>
<li data-role="list-divider" id="h">H</li>
<li class="showDetails">Harvey Walls</li>
<li data-role="list-divider" id="m">M</li>
<li class="showDetails">Mike Farnsworth</li>
<li class="showDetails">Murray Vanderbuilt</li>
<li data-role="list-divider" id="n">N</li>
<li class="showDetails">Nathan Williams</li>
<li data-role="list-divider" id="p">P</li>
<li class="showDetails">Paul Baker</li>
<li class="showDetails">Pete Mason</li>
<li data-role="list-divider" id="r">R</li>
<li class="showDetails">Rod Tarker</li>
<li data-role="list-divider" id="s">S</li>
<li class="showDetails">Sawyer Wakefield</li>
</ul>
<ul data-role="none" id="list-navigation">
<li>
<p id="list-1" class="scrollToSelected"><strong>1</strong></p>
<p id="list-2" class="scrollToSelected"><strong>2</strong></p>
<p id="list-3" class="scrollToSelected"><strong>3</strong></p>
<p id="list-a" class="scrollToSelected"><strong>A</strong></p>
<p id="list-b" class="scrollToSelected"><strong>B</strong></p>
<p id="list-c" class="scrollToSelected"><strong>C</strong></p>
<p id="list-d" class="scrollToSelected"><strong>D</strong></p>
<p id="list-e" class="scrollToSelected"><strong>E</strong></p>
<p id="list-f" class="scrollToSelected"><strong>F</strong></p>
<p id="list-g" class="scrollToSelected"><strong>G</strong></p>
<p id="list-h" class="scrollToSelected"><strong>H</strong></p>
<p id="list-i" class="scrollToSelected"><strong>I</strong></p>
<p id="list-j" class="scrollToSelected"><strong>J</strong></p>
<p id="list-k" class="scrollToSelected"><strong>K</strong></p>
<p id="list-l" class="scrollToSelected"><strong>L</strong></p>
<p id="list-m" class="scrollToSelected"><strong>M</strong></p>
<p id="list-n" class="scrollToSelected"><strong>N</strong></p>
<p id="list-o" class="scrollToSelected"><strong>O</strong></p>
<p id="list-p" class="scrollToSelected"><strong>P</strong></p>
<p id="list-q" class="scrollToSelected"><strong>Q</strong></p>
<p id="list-r" class="scrollToSelected"><strong>R</strong></p>
<p id="list-s" class="scrollToSelected"><strong>S</strong></p>
<p id="list-t" class="scrollToSelected"><strong>T</strong></p>
<p id="list-u" class="scrollToSelected"><strong>U</strong></p>
<p id="list-v" class="scrollToSelected"><strong>V</strong></p>
<p id="list-w" class="scrollToSelected"><strong>W</strong></p>
<p id="list-x" class="scrollToSelected"><strong>X</strong></p>
<p id="list-y" class="scrollToSelected"><strong>Y</strong></p>
<p id="list-z" class="scrollToSelected"><strong>Z</strong></p>
</li>
</ul>
</div>
</div>
<div data-role="page" id="details">
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">Details</li>
<li>List</li>
</ul>
<br />
<p>
Here are the details you were looking for
</p>
</div>
</div>

What is the best way using jquery functions to store 4 variables from an array and accessible by another paage

Hi everyone I am trying to design a seat picker/checkout process for a site. The layout corresponds to the layout of a bus.
The structure of my final code would be like this:
$(document).ready(function(){
$('#search').submit(function()
{
//get date, location value from search inputs and send via ajax to a php script for query
//search.php queries MySQL database
//each result is put in seperate div that displays bus info and appended to a #main div
//when user clicks on RSVP button a seat picker(unordered list of seats) pops up in modal box
//When user selects seat and clicks confirm button, the client info and INDIVIDUAL bus info are stored in a guest list database
}
});
What is the best way to go about storing the specific bus info such as time,date,location, seat selected relevant to the one the user selects?
$(document).ready(function() {
$('#search1').submit(function(){
$.ajax({
type: "POST",
cache: "true",
url: "search.php",
dataType:"json",
data: datastring,
success: function(data){
for ($i = 0, $j = data.bus.length; $i < $j; $i++) {
var html = '<div id="' + data.bus[$i].number + '">';
html += '<div id="bus_num">' + '<b>BUS #</b>' + data.bus[$i].number + '</div>';
html += '<div id="bus_graphic"></div>';
html += '<div id="capacity">' + '<h1>Capacity</h1>' + data.bus[$i].capacity + '</div>';
html += '<div id="time">' + '<h1>Departure</h1>' + data.bus[$i].time + '</div>';
html += '<div id="seats">' + '<h1>Open Seats</h1>' + data.bus[$i].seats + '</div>';
html += '<div id="price">$' + price + '</div>';
html += '<a class="rsvp" href="#rsvp">RSVP</a>';
html += '</div>';
$('#main').append(html);
}
$("a.rsvp").button();
$(".rsvp").colorbox({width:"700px", inline:true, href:"#rsvp"});
}
});
return false;
});
});
seat selector that pops up in modal box:
<ul id="airplane">
<li class="seat_01 A">01A</li>
<li class="seat_01 B">01B</li>
<li class="seat_01 C">01C</li>
<li class="seat_01 D">01D</li>
<li class="seat_02 A">02A</li>
<li class="seat_02 B">02B</li>
<li class="seat_02 C">02C</li>
<li class="seat_02 D">02D</li>
<li class="seat_03 A">03A</li>
<li class="seat_03 B">03B</li>
<li class="seat_03 C">03C</li>
<li class="seat_03 D">03D</li>
<li class="seat_04 A">04A</li>
<li class="seat_04 B">04B</li>
<li class="seat_04 C">04C</li>
<li class="seat_04 D">04D</li>
<li class="seat_05 A">05A</li>
<li class="seat_05 B">05B</li>
<li class="seat_05 C">05C</li>
<li class="seat_05 D">05D</li>
<li class="seat_06 A">06A</li>
<li class="seat_06 B">06B</li>
<li class="seat_06 C">06C</li>
<li class="seat_06 D">06D</li>
<li class="seat_07 A">07A</li>
<li class="seat_07 B">07B</li>
<li class="seat_07 C">07C</li>
<li class="seat_07 D">07D</li>
<li class="seat_08 A">08A</li>
<li class="seat_08 B">08B</li>
<li class="seat_08 C">08C</li>
<li class="seat_08 D">08D</li>
<li class="seat_09 A">09A</li>
<li class="seat_09 B">09B</li>
<li class="seat_09 C">09C</li>
<li class="seat_09 D">09D</li>
<li class="seat_10 A">10A</li>
<li class="seat_10 B">10B</li>
<li class="seat_10 C">10C</li>
<li class="seat_10 D">10D</li>
<li class="seat_11 A">11A</li>
<li class="seat_11 B">11B</li>
<li class="seat_11 C">11C</li>
<li class="seat_11 D">11D</li>
<li class="seat_12 A">12A</li>
<li class="seat_12 B">12B</li>
<li class="seat_12 C">12C</li>
<li class="seat_12 D">12D</li>
<li class="seat_13 A">13A</li>
<li class="seat_13 B">13B</li>
<li class="seat_13 C">13C</li>
<li class="seat_13 D">13D</li>
<li class="seat_14 A">14A</li>
<li class="seat_14 B">14B</li>
<li class="seat_14 C">14C</li>
<li class="seat_14 D">14D</li>
<li class="seat_15 A">15A</li>
<li class="seat_15 B">15B</li>
<li class="seat_15 C">15C</li>
<li class="seat_15 D">15D</li>
<li class="seat_16 A">16A</li>
<li class="seat_16 B">16B</li>
<li class="seat_16 C">16C</li>
<li class="seat_16 D">16D</li>
<li class="seat_17 A">17A</li>
<li class="seat_17 B">17B</li>
<li class="seat_17 C">17C</li>
<li class="seat_17 D">17D</li>
<li class="seat_18 A">18A</li>
<li class="seat_18 B">18B</li>
<li class="seat_18 C">18C</li>
<li class="seat_18 D">18D</li>
<li class="seat_19 A">19A</li>
<li class="seat_19 B">19B</li>
<li class="seat_19 C">19C</li>
<li class="seat_19 D">19D</li>
<li class="seat_20 A">20A</li>
<li class="seat_20 B">20B</li>
<li class="seat_20 C">20C</li>
<li class="seat_20 D">20D</li>
<li class="seat_21 A">21A</li>
<li class="seat_21 B">21B</li>
<li class="seat_21 C">21C</li>
<li class="seat_21 D">21D</li>
<li class="seat_22 A">22A</li>
<li class="seat_22 B">22B</li>
<li class="seat_22 C">22C</li>
<li class="seat_22 D">22D</li>
<li class="seat_23 A">23A</li>
<li class="seat_23 B">23B</li>
<li class="seat_23 C">23C</li>
<li class="seat_23 D">23D</li>
<li class="seat_24 A">24A</li>
<li class="seat_24 B">24B</li>
<li class="seat_24 C">24C</li>
<li class="seat_24 D">24D</li>
<li class="seat_25 A">25A</li>
<li class="seat_25 B">25B</li>
<li class="seat_25 C">25C</li>
<li class="seat_25 D">25D</li>
</ul>
<!-- end #airplane -->
<p>
<input type="submit" value="BOOK" class="button" id="book" />
</p>
If you want them to be available on other pages, I recommend storing them in a database.
If you're new to databases, give this tutorial a try: Tizag's MySQL

Resources