I've created a a simple page which has a jquery data-filter applied to collapsible set items (please see jsfiddle and code below). The collapsible set items are closed initially.
I want to be able to enter a word into the filter box and have the matching collapsible set items automatically opened when they are returned?
I can't find anything in the docs that will help me. Any ideas?
http://jsfiddle.net/mikewilsonuk/xpaGE/
<head>
<title>JQM latest</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.0/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content">
<h1>Collapsible set with search</h1>
<div data-role="collapsible-set" >
<div data-role="listview" data-inset="true" data-filter="true">
<div data-role="collapsible">
<h1>Numero uno</h1>
<div>some text</div>
</div>
<div data-role="collapsible">
<h1>Number two</h1>
<div>some text</div>
</div>
<div data-role="collapsible">
<h1>Numero three <div>Grade: 25% (8th of 128)</div></h1>
<div>some potato</div>
</div>
<div data-role="collapsible">
<h1>Number four</h1>
<div>some text</div>
</div>
</div>
</div>
</div>
</div>
</body>
The filterable widget has an event (filterablefilter - http://api.jquerymobile.com/filterable/#event-filter) you can handle after it is done filtering. For convenience I added an id to your div with a data-filter.
<div id="filterMe" data-role="listview" data-inset="true" data-filter="true">...
Then on pagecreate, I added the event handler:
$(document).on("pagecreate", "#page", function(){
$("#filterMe").on( "filterablefilter", function( event, ui ) {
ui.items.each(function( index ) {
$(this).collapsible("option", "collapsed", $(this).hasClass("ui-screen-hidden")).removeClass("ui-screen-hidden");
});
});
});
The returned UI object is a jQuery object whose items collection is a list of the collapsible objects the filter handled. So using the each() function, you can iterate the list and set the collapsed state based on whether the class ui-screen-hidden has been applied by the filter. After that I remove the ui-screen-hidden class so that none of the items are hidden. If you still want items hidden as well, you can just remove the .removeClass("ui-screen-hidden").
Here is a working FIDDLE
Couldn't finish it, but maybe you can see what I had in mind:
$(document).on('keyup',function(){
var searchtext = $("input[data-type='search']").val();
var $cols = $(document).find('div[data-role='collapsible']');
$.each(cols, function(){
var col = this;
if(col.find(":contains(searchtext)").length() > 0)
{
col.trigger('expand');
}
else{
col.trigger('collapse');
}
});
});
});
Problem is, that keyup fires too fast and jqm collapses filtered collapsibles after the internal fiter() event. maybe you have to set a timeout around the keyup event.
Related
I'm currently building a mobile site for iPad using jquery mobile and ASP.NET MVC 4. I have a dynamically created listview that is displaying search results. I want the user to be able to click on an item in the listview and have the text from that particular list item appear in a textbox that is also in the view.
I can get this to work in Safari on my desktop machine, but it will not work on an iPad.
For the sake of simplicity and to attempt to narrow down the problem, I hard-coded a simple little listview in my View. The results were the same. Works on desktop in Safari, but not on iPad.
Here is the very simplified VIEW code that works in Safari on desktop (Please note that _Header is a separate, partial View):
#section Header
{
<script type="text/javascript">
$('#testJs li').on('click', (function () {
var results = $.trim($(this).text());
$('#testText').val(results);
}));
</script>
#{ Html.RenderPartial("_Header"); }
}
#section Content
{
<input type="text" id="testText">
<ul id="testJs" data-role="listview" data-inset="true" data-theme="c">
<li id="task400" class="tasks">Test task 400</li>
<li id="task295" class="tasks">Test task 295</li>
</ul>
}
Please note that I have tried changing 'click' to 'tap' (see below) with no success. It still doesn't work on iPad.
<script type="text/javascript">
$('#testJs li').on('tap', (function () {
var results = $.trim($(this).text());
$('#testText').val(results);
}));
</script>
I've also tried using the following with the same results. Still doesn't work on the iPad.
<script type="text/javascript">
$('#testJs').delegate('li', 'tap', function () {
var results = $.trim($(this).text());
$('#testText').val(results);
});
</script>
I do wonder if this has something to do with our use of layout pages. We have slightly different layout pages, depending on if the site is being rendered on a mobile device or not.
Mobile Layout View:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/mobileCss", "~/Content/css")
<script type="text/javascript">
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
#if (IsSectionDefined("Header")) {
#RenderSection("Header", false) }
else { <h1>#ViewBag.Title</h1> }
</div>
<div data-role="content">
#RenderSection("Content")
</div>
</div>
</body>
</html>
Desktop Layout View:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/mobilecss", "~/Content/css")
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
#if (IsSectionDefined("Header")) {
#RenderSection("Header") }
else { <h1>#ViewBag.Title</h1> }
</div>
<div data-role="content">
#RenderSection("Content")
</div>
</div>
</body>
</html>
I've been stuck on this for a few days, so any help would be appreciated. Everything I try works on my desktop, but not on an iPad - which is where I actually need it to function.
Thanks!
Did you try using bind on your testJs li? I'd bind a tapHandler like below:
<script>
$(function(){
$( "#testJs li" ).bind( "tap", tHandler );
function tHandler( event ){
var results = $.trim($(this).text());
$("#testText").val(results);
}
});
</script>
or with on like this should work:
$('#testJs').on('tap', 'li', function (event) {
var results = $.trim($(this).text());
$("#testText").val(results);
console.log('this should work')
}
Also used double quotes on top example but that shouldn't make a difference I don't think. If it doesn't then make sure you .js references are correct, and use firebug in firefox to debug for any straggling errors.
I am creating a collapsible set dynamically. Like below
div = '<div data-role="collapsible" data-inset="false" data-iconpos="right" data-collapsible="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"><h3>'+
row1["name"]+'<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" data-iconpos="right">'+count+'</span></h3></div>';
Now i need to add a button to the each collapsible set and upon clicking on the button i need to get the collapsible element content but collapsible list should not expand.
How can i do that?
Thanks:)
Example
Working example: http://jsfiddle.net/Gajotres/z3hsb/
Description
What you need to understand here is how to use:
e.stopPropagation();
e.stopImmediatePropagation();
Your current problem is that click event is propagating through button and hitting collapsible, which in turn opens/closes it. It can be prevented with if functions stopPropagation() and stopImmediatePropagation() are used.
Code
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<div id="List" data-role="collapsible-set" data-theme="b" data-content-theme="d">
<div id='ListItem' data-role='collapsible' data-content-theme='b' data-collapsed='true'>
<h3><p>Title</p>
<div id="button-set">
<input type='button' data-theme='b' value='Settings' data-mini='true' data-inline='true' data-icon='gear' data-icon-pos='top' id="show-content"/>
</div>
</h3>
<p>CONTENT</p>
</div>
</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Javascript:
$(document).on('pagebeforeshow', '#index', function(){
$('#show-content').on('click', function(e) {
alert($('#ListItem').find('h3 p').text());
e.stopPropagation();
e.stopImmediatePropagation();
});
});
CSS:
#button-set {
float:right;
margin-top: -20px;
}
I'm just starting out in jQM development and have hit a bit of a brick wall.
In short, I have a javascript file and two pages. In the main page (index.html) I'm populating a listview dynamically, and registering the tap event for each and every item for this listview. The on tap event, in return, calls the changepage method to an external page (details.html). This works fine 100% of the time.
In the javascript file, I'm registering for events on pagebeforeshow for the details.html page. This works okay first time out, but any subsequent calls are not triggering the pagebeforeshow event at all. Having had a closer look i can see that the pagechange is being called, pagebeforechange event is being fired okay, but the pagebeforeshow is only fired for that particular item only (untill a complete refresh).
I have set up a sample for you to be able to look at. I would seriously appreciate any feedback given. For all I know - I may be using the wrong events!?
The closest post I could find on SO was Pagebeforeshow not fired on second time change Page event however it doesn't particularly deal with listviews so I'm not sure if it's related or not.
Thanks,
Matt
Index.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="jquery.custom.js" type="text/javascript"></script>
</head>
<body>
<!-- All Stock Search -->
<div id="idxPage" data-role="page" style="height:50px;" data-title="Main Menu">
<div data-role="header" class="sixteen columns">
Home
<h1>
Test
</h1>
</div>
<div data-role="content" style="text-align:center;">
<ul id="ListItems" data-role="listview" data-inset="true" data-filter="true">
</ul>
</div><!-- /content -->
<footer>
<div data-role="footer" data-id="connfooter" class="ui-footer ui-bar-a" role="contentinfo">
<h4 style="text-align: left;" class="ui-title" tabindex="0" role="heading" aria-level="1">
</h4>
</div>
</footer>
</div>
</body>
details.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="jquery.custom.js" type="text/javascript"></script>
</head>
<body>
<!-- All Stock Search -->
<div id="detailsPage" data-role="page" style="height:50px;" data-title="Main Menu">
<div data-role="header" class="sixteen columns">
Home
<h1>
Test
</h1>
</div>
<div data-role="content" style="text-align:center;">
<b>Page placeholder</b>
</div><!-- /content -->
<footer>
<div data-role="footer" data-id="connfooter" class="ui-footer ui-bar-a" role="contentinfo">
<h4 style="text-align: left;" class="ui-title" tabindex="0" role="heading" aria-level="1">
</h4>
</div>
</footer>
</div>
</body>
jquery.custom.js (JS Library)
$(document).on("pagebeforechange", function (event, data) {
alert('changing page...');
});
$(document).on('pageinit', function () {
$("#detailsPage").off();
$("#detailsPage").on("pagebeforeshow", function(event){
alert('about to show page...');
});
$("#ListItems").off();
$("#ListItems").on("listviewbeforefilter", function (e, data) {
var $ul = $(this),
$input = $(data.input),
value = $input.val(),
html = "";
$ul.html("");
if (value && value.length > 2) {
$ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
$ul.listview("refresh");
var max = 200;
var limit = 0;
var itemslist = [
{"id":1, "desc":"item1"},
{"id":2, "desc":"item2"},
{"id":3, "desc":"testitm1"},
{"id":4, "desc":"testitm2"}
];
$.each(itemslist, function (i, val) {
if (limit < max) {
if (val.desc.toString().toLowerCase().indexOf(value.toLowerCase()) != -1) {
$ul.append('<li id="' + val.id + '" ><a style="text-align:left" data-icon="arrow-r" data-iconpos="right" >' + val.desc + '</a></li>');
$('#' + val.id).off();
$('#' + val.id).on('tap', function (event) {
var elementId = $(this).attr('id');
$.mobile.changePage("details.html?Id="+elementId, { data: { "Id": elementId} });
});
limit++;
}
}
});
$ul.listview("refresh");
$ul.trigger("updatelayout");
}
});
});
You are incorrectly binding page event.
Instead of this:
$("#detailsPage").off();
$("#detailsPage").on("pagebeforeshow", function(event){
alert('about to show page...');
});
Use this:
$(document).on("pagebeforeshow", "#detailsPage",function(event){
alert('about to show page...');
});
Remember, jQuery Mobile page events must always be added with event delegation.
Also your don't need to use off() with page events, they do not suffer from multiple event binding problem. If you have more question feel free to ask in comments.
Stripped down code shows that I can change an attribute, in this case data-split-icon, but cannot get a refresh. Console.log show it has changed, so does the element view in chrome developer tools.
http://jsfiddle.net/mckennatim/MQ9rj/ 'Get' button simulates a programmatically created list. 'Change' button simulates changing an attribute.
Refresh, listview, trigger, create, pagecreate I try all combinations. Nothing works
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
</head>
<body>
<div id="thelists" data-role="page">
<div data-role="header">
<a href="#" data-icon="back" id="get" data-role="button" >get</a>
<h2>TestPage</h2>
change
</div><!-- /header -->
<div data-role="content">
<ul id="list" class="current" data-split-icon="gear" data-role="listview" data-filter="false"></ul>
</div><!-- /content -->
</div><!-- /page -->
<script>
$('#get').click(function() {
for (i=1; i<6; i++){
$('#list').append('<li><a>list</a><a class="orig">items</a></li>');
}
$('#list').listview('refresh');
return false;
});
$('#change').click(function() {
console.log($('ul').attr('data-split-icon'));
$('#list').attr('data-split-icon', 'info'); //jqmData doesn't work either
console.log($('ul').attr('data-split-icon'));
//$('#list').listview();
//$('#list').listview('refresh');
$('#thelists').trigger('create');
$('#thelists').trigger('pagecreate');
$('#list').listview();
$('#list').listview('refresh');
return false;
});
</script>
</body>
</html>
Looks like jQM also adds some markup on the children span tags, try something like this
http://jsfiddle.net/phillpafford/MQ9rj/18/
JS
$('#change').click(function() {
console.log($('ul').attr('data-split-icon'));
$('#list').attr('data-split-icon', 'info'); //jqmData doesn't work either
console.log($('ul').attr('data-split-icon'));
$("[data-icon=gear]").each(function() {
var $this = $(this);
$this.attr('data-icon','info');
$this.children().children().removeClass('ui-icon-gear').addClass('ui-icon-info');
});
$('#list').listview('refresh',true);
return false;
});
I am trying to add undo/redo functionality in Jquery tabs. I am able to store and restore li/divs for added/removed tab.
Issue is when I re-add tab to the form, though it is added properly as li and div for that particular tab are present and can be seen. But if I click on that tab 'tabsselect' event is not getting fired. Li and div for tab look in order. But I am not able to figure what is missing.
In my website I am dynamically adding and removing tabs and it is working fine but just readding of once removed tab isnt working
Here is the code for adding tab
var $tabs = $("#tabs").tabs({
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span id='id1' class='ui-icon ui-icon-close'>Remove Tab</span></li>",
add: function (event, ui) {
var tab_content = $tab_content_input.val(); // || "Tab " + tab_counter + " content.";
}
});
Here is the removal code
$("#tabs span.ui-icon-close").live("click", function () {
if (imode == 1) {
var index = $("li", $tabs).index($(this).parent());
if ($tabs.tabs("length") > 1) {
$tabs.tabs("remove", index);
}
}
});
Nothing fancy really. Looking for answers.
Thanks
Try This code out this will give you a nice example to manipulate data in tabs using jquery.
JavaScript
$(document).ready(function(){
var $tabs = $('#tabs').tabs();
var $a = $('<a />').appendTo('body').attr('href','#').html('add new tab').click(function(){
var n = parseInt($tabs.tabs( "length" ),10)+1;
$('body').append('<div id="tabs-'+n+'">content for the tab # '+ n +'</div>');
$tabs.tabs("add",'#tabs-'+n,'Tab #'+n);
return false;
});
$('<a/>').html('<br><br>remove tab').attr('href','#').click(function(){
$tabs.tabs('remove',$tabs.tabs('length')-1);
return false;
}).appendTo('body');
});
HTML
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Tab 1 content</p>
</div>
<div id="tabs-2">
<p>Tab 2 content</p>
</div>
<div id="tabs-3">
<p>Tab 3 content</p>
</div>
</div>
</body>
</html>
*
Just use the id's of the selected tabs and manipulate data in them. this will allow to add and remove tabs on your page
*
Tab Select Function
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
ui.options // options used to intialize this widget
ui.tab // anchor element of the selected (clicked) tab
ui.panel // element, that contains the contents of the selected (clicked) tab
ui.index // zero-based index of the selected (clicked) tab
});
Use ui.index to get the index of the selected tab and then add then manipulate the selected tab .