Im trying to modify grid layout so that if the user clicks a grid row, another grid row is appended to the selected grid row and displays extra information about the selected grid. Is this possbible using jQuery mobile ?
<div class="ui-grid-a">
<div class="ui-block-a"><div class="ui-bar ui-bar-b" style="height:20px">A</div>
</div>
It's not fully functional but I hope this give you an idea, Live Example: http://jsfiddle.net/F6Zdp/44/
HTML:
<div data-role="page" id="gridplus">
<div data-role="content">
<div class="ui-grid-a" id="currentgrid">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:50px">I'm a Block and text inside will wrap.</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:50px">I'm a Block and text inside will wrap.</div></div>
</div>
<br />
<input type="button" id="addcolumn" name="addcolumn" value="Add Column"/>
<input type="button" id="removecolumn" name="removecolumn" value="Remove Column"/>
</div>
</div>
JS:
var currentGrid = $('#currentgrid');
var previousGrid;
$('#addcolumn').click(function() {
grid = currentGrid.attr('class');
previousGrid = grid;
nextGrid = grid.substring(0,grid.length-1)+String.fromCharCode(grid.charCodeAt(grid.length-1)+1);
$('#currentgrid').removeClass(grid).addClass(nextGrid);
$("#currentgrid").children().each(function() {
c = $(this);
block = c.attr('class');
nextBlock = block.substring(0,block.length-1)+String.fromCharCode(block.charCodeAt(block.length-1)+1);
if($('.'+nextBlock).length) {
doNothing = true;
} else {
c.after('<div class="'+nextBlock+'"><div class="ui-bar ui-bar-e" style="height:50px">I\'m a Block and text inside will wrap.</div></div>');
}
});
});
$('#removecolumn').click(function() {
grid = currentGrid.attr('class');
$('#currentgrid').removeClass(grid).addClass(previousGrid);
$("#currentgrid").children().last().remove();
}).page();
Use collapsable content - http://jquerymobile.com/demos/1.0a4.1/docs/content/content-collapsible.html
The content can be a jQuery grid I think.
Related
I am following an example in primeng in which I can add a new row to a table. Everything "seems" to work as long as I fill out all the fields in the input option. However, I want to add the place holder value to the NGmodel if the user does not change the value of the input. I tried everything (ng-init, ngvalue, etc etc) but I can never get the ngmodel to carry the value in the place holder... and the table gets fill with the 3 filled fields but not the one where the user did not type anything.
extract of the HTML....
<div class="ui-g-12">
<div class="ui-g-4">
<label for="product_line_id">Product ID</label>
</div>
<div class="ui-g-8">
<input pInputText id="product_line_id" [ngModel]="myproduct.product_line_id" placeholder="{{ lastproductline + 1}}" />
</div>
</div>
<div class="ui-g-12">
<div class="ui-g-4">
<label for="product_line_1">Product</label>
</div>
<div class="ui-g-8">
<input pInputText id="product_line_1" [(ngModel)]="myproduct.product_line_1" autofocus />
</div>
</div>
<div class="ui-g-12">
<div class="ui-g-4">
<label for="product_line_2">Category</label>
</div>
<div class="ui-g-8">
<input pInputText id="product_line_2" [(ngModel)]="myproduct.product_line_2" />
</div>
</div>
<div class="ui-g-12">
<div class="ui-g-4">
<label for="product_line_3">Sub Category</label>
</div>
<div class="ui-g-8">
<input pInputText id="product_line_3" [(ngModel)]="myproduct.product_line_3" />
</div>
</div>
the ts file looks something like...
productlines = [];
myproduct: { [s: string]: ProductLines; } = {};
showDialogToAdd() {
this.newProductLine = true;
this.myproduct = {};
this.displayDialog = true;
}
save() {
let productlines = [...this.productlines];
productlines.push(this.myproduct);
this.finalproductchanges.push(this.myproduct)
this.productlinesClone = productlines;
this.myproduct = null;
this.displayDialog = false;
}
Any ideas will be greatly appreciated
I managed to change the code by adding the field directly in the controller.
Is there is any way to fill jQuery Mobile GridView dynamically?
Normally we have to declare gridViews children class with ui-block_a,b,c as follows,
<div class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:60px">Block C</div></div>
</div><!-- /grid-b -->
If there's any work around or plugins to achieve dynamic population for the gridview
You can add the grid dynamically. Here is an example:
Given page markup like this
<div data-role="page" id="page1">
<div id="cont" role="main" class="ui-content">
<button id="btnAdd">Add Dynamic Grid</button>
<div id="dynamicGrid"></div>
</div>
</div>
The script to add the grid on button click
$(document).on("pagecreate","#page1", function(){
$("#btnAdd").on("click", function(){
var html = '<div class="ui-grid-b">';
html += '<div class="ui-block-a"><button>A button</button></div>';
html += '<div class="ui-block-b"><input type="text" value="text 1" /></div>';
html += '<div class="ui-block-c"><input type="checkbox" data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1"></div>';
html += '</div>';
$("#dynamicGrid").empty().append(html).enhanceWithin();
});
});
NOTE: call .enhanceWithin() to have jQM initialize widgets contained in the grid.
DEMO
I am new to ember. I have two divs with a select box each. I want the second div to toggle based on the change in the first select box value.
First DIV with select box:
<div class="row row-space">
<div class="col-sm-10">
<div class="input-group input-group-sm">
<span class="input-group-addon edit_schedule_label" id="sizing-addon3">Schedule Level</span>
<div class="recurrence_box">
{{view "select" content=schedule_levels optionValuePath="content.value" optionLabelPath="content.label" selection="default_schedule_level.value" value="default_schedule_level.value" selectionBinding="default_schedule_level"}}
</div>
</div>
</div>
</div>
Second DIV:
{{#if group_level_decider }}
<div class="row row-space">
<div class="col-sm-10">
<div class="input-group input-group-sm">
<span class="input-group-addon edit_schedule_label" id="sizing-addon3">Location </span>
<div class="recurrence_box">
{{view "select" content=schedule_levels optionValuePath="content.value" optionLabelPath="content.label" selection="default_schedule_level.value" value="default_schedule_level.value" selectionBinding="default_schedule_level"}}
</div>
</div>
</div>
</div>
{{/if}}
In Controller, I am observing the change in selection binding of the first select box and setting the condition to toggle for the second div. I can see the condition variable here "group_level_decider" getting set to the correct value but it is not reflecting in the view.
Controller:
group_level_decider : false,
schedule_level_changed: function() {
var model = this.get('store');
model.set('selected_schedule_level',this.get('default_schedule_level.value'))
model.set('group_level_decider',true)
}.observes('default_schedule_level')
Please help me. Thanks!
Here is an example of filtering out cities based on a state:
App.IndexController = Ember.ArrayController.extend({
cities: function(){
var state = this.get('state');
var states = this.get('model');
var cities = [];
if(state){
cities = states.filterBy('state', state).get(0).get('cities');
}
return cities;
}.property('state'),
states: function(){
return this.get('model').mapBy('state');
}.property(),
stateObserver: function(){
this.set('city', null);
}.observes('state')
});
Then, inside your template:
States: {{view "select" prompt="Pick State..." content=states value=state}}
Cities: {{view "select" prompt="Pick City..." content=cities value=city }}
Working solution here
Im using the jQuery Mobile Filter List:
http://jquerymobile.com/test/docs/lists/lists-search-with-dividers.html
Is it possible to move the position of the input field so I can put it into a div already on my page?
Using jQuery's appendTo seems to work fine but its kind of a hacky solution. Thanks
this is what I found while searching for solution to a similar problem.
HTML code example:
<div data-role="page" id="page-id">
<div data-role="content">
<div data-role="fieldcontain">
<input type="search" name="password" id="search" value="" />
</div>
<div class="filter-div" data-filter="one">1</div>
<div class="filter-div" data-filter="two">2</div>
<div class="filter-div" data-filter="three">3</div>
<div class="filter-div" data-filter="four">4</div>
<div class="filter-div" data-filter="five">5</div>
</div>
</div>
JS code example:
$(document).delegate('#page-id', 'pageinit', function () {
var $filterDivs = $('.filter-div');
$('#search').bind('keyup change', function () {
if (this.value == '') {
$filterDivs.slideDown(500);
} else {
var regxp = new RegExp(this.value),
$show = $filterDivs.filter(function () {
return ($(this).attr('data-filter').search(regxp) > -1);
});
$filterDivs.not($show).slideUp(500);
$show.slideDown(500);
}
});
});
This way you can place your input text box anywhere on your page and it should properly filter a list of items you want.
JSFiddle DEMO: http://jsfiddle.net/cZW5r/30/
I'm trying to create a tab set using jQuery UI that has some permanent tabs as well as some special purpose tabs. The special tabs are added temporarily: when the form they contain is submitted, the tabs are removed.
I've got this working except for one thing: after a tab is removed, if it is re-added later its content isn't shown, and I can't figure out why. I've distilled it down to this jsFiddle example, code also reposted below.
HTML:
<div id="tabs">
<ul>
<li>Foo</li>
</ul>
<div id="foo">
<h2>Foo Tab</h2>
</div>
<div id="bar" class="transient" style="display: none">
<h2><button type="button" class="close" style="float: right"><span class="ui-icon ui-icon-closethick">close</span></button>Bar Tab</h2>
</div>
<div id="baz" class="transient" style="display: none">
<h2><button type="button" class="close" style="float: right"><span class="ui-icon ui-icon-closethick">close</span></button>Baz Tab</h2>
</div>
</div>
<hr>
<button onClick="openTransientTab('bar', 'Bar')">Add Bar Tab</button>
<button onClick="openTransientTab('baz', 'Baz')">Add Baz Tab</button>
JavaScript:
$('#tabs').find('div.transient').find(".close").live('click', function() {
var footer_tabs = $('#tabs');
var tab_id = $(this).closest("div.transient").attr("id");
var index = footer_tabs.tabs("option", "selected");
footer_tabs.tabs("select", -1);
footer_tabs.tabs("remove", index);
});
function openTransientTab(id, title) {
var footer_tabs = $("#tabs");
footer_tabs.tabs("select", -1);
footer_tabs.tabs("select", "#" + id);
var selected = footer_tabs.tabs("option", "selected");
if (selected < 0) {
footer_tabs.tabs("add", "#" + id, title);
footer_tabs.tabs("select", "#" + id);
}
$("#" + id).css("display", "block");
}
$(function() {
var footer_tabs = $("#tabs");
footer_tabs.tabs({
collapsible: true,
selected: -1
});
});
When you load the page, the bar and baz tabs are created, but in their style, display is set to none which is why they are not visible originally. Inside the tab, when you hit the X, it actually removes the div for bar and baz completely. When you re-click to add the bar or baz tab after it closes, it recreates the div, but you are not putting anything within it. Add something like the following to once you create the tab.
document.getElementById("bar").innerHtml = whatever you want within it here
Before:
<div id="foo" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<h2>Foo Tab</h2>
</div>
<div id="baz" class="transient" style="display: none">
<h2>
<button class="close" style="float: right" type="button">
<span class="ui-icon ui-icon-closethick">close</span>
</button>
Baz Tab
</h2>
</div>
<div id="bar" class="transient ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: block;">
<h2>
<button class="close" style="float: right" type="button">
<span class="ui-icon ui-icon-closethick">close</span>
</button>
Bar Tab
</h2>
</div>
After opening and closing both
<div id="foo" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<h2>Foo Tab</h2>
</div>
<div id="bar" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" style="display: block;"></div>
<div id="baz" class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: block;"></div>
After Collecter provided the key insight about what wasn't working, I found a nicer way to preserve the tab content for reuse. I changed my close function to the following:
$('#tabs').find('div.transient').find(".close").live('click', function() {
var footer_tabs = $('#tabs');
var tab = $(this).closest("div.transient");
var index = footer_tabs.tabs("option", "selected");
footer_tabs.tabs("select", -1);
footer_tabs.tabs("remove", index);
footer_tabs.append(tab);
});