fuelux
Extends Twitter Bootstrap with additional lightweight JavaScript controls. Easy to install, customize, update, and optimize. All functionality covered by live documentation and unit tests.
Fuel UX
fuel ux, a front-end library that extends bootstrap with additional lightweight controls.
I am having troubles with FuelUX's datagrid component. One the page of my site where I implement the datagrid component, the dropdown menus provided by bootstrap stop working.
I'm using:jQuery 1.9.0, fuelUX 2.3.0, Bootstrap 2.3.1
I am NOT using: requireJS.
I am bringing in the FuelUX css files and the loader.js file. The bootstrap menus work on every other page except for this one. The datagrid component seems to operate just fine except that it's own select menus aren't working either.
Any pointers?
Source: (StackOverflow)
I have started a project in Grails and I wanted to include Twitter Bootstrap for UI but then found out about Fuel UX. Does anyone know about any example of how I could integrate Fuel UX into the grails project ?
Thanks.
Source: (StackOverflow)
so I've implemented the treeview of Fuel UX within my website. Whenever it's loaded, I need to reselect the items I want manually. Is there a possibility to preselect certain items after each reload?
Thanks in advance!
Source: (StackOverflow)
I'm not seeing any documentation for this.
How do you manually select which panel is active in the wizard component?
I know it's in there somewhere because you can click on one of the tabs once it's been passed, and navigate back to a previous tab.
Source: (StackOverflow)
I have a problem with the Fuel UX Wizard.
When I press the next button on the fuel ux wizard, I send the category_id selected using validate_step(step) and response with a json object from php.
This first step works fine but when I try to read the result of validate_step(step) function I get an error on the console.
The problem is here:
vrspx = validate_step(step);
console.log('Validation(' + step + ')= ' + vrspx); // CONSOLE : Validation(1)= undefined
if(vrspx === 'ok'){ ....
The vrspx variable return undefinied.
I am with fuel ux and I have beginer to intermediate experience with jquery and I dont know if this is a good aproach or how to get started making ajax validations on each step of the wizard.
Hope somebody can help me.
Thanks in advance!
CODE:
HTML:
<form name="wizard" id="wizard" class="ajax" method="post" action="http://URLBASE/U_wizard/">
<!-- STEP 1 -->
<div class="step-pane active" id="step1">
<div class="padd-10 button-holder" id="categories_selector">
<br>
<label><input type="radio" id="category_id_1" name="category_id" value="1"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_2" name="category_id" value="2"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_3" name="category_id" value="3"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_4" name="category_id" value="4"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_5" name="category_id" value="5"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_6" name="category_id" value="6"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_7" name="category_id" value="7"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_8" name="category_id" value="8"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_9" name="category_id" value="9"><i class="radio"></i>...</label>
</div>
</div>
<!-- STEP 2 -->
<div class="step-pane" id="step2">This is step 2</div>
<!-- STEP 3 -->
<div class="step-pane" id="step3">This is step 3</div>
</form>
JS:
var wizard = $('#MyWizard');
function validate_step(step){
// Get form method and action url
var that = $('.ajax'),
url = that.attr('action'),
type = that.attr('method');
var data = $('form.ajax').serialize();
// Ajax
$.ajax({
url: url + step,
type: type,
data: data,
dataType: "json",
success: function (response) {
console.log(response);
if(response.status == 'ok'){
// allow change
return 'ok';
}else{
// cancel change
return 'notok';
}
}, // End success
error: function () {
console.log('AJAX Error');
return 'notok';
} // End error
}); // $.ajax
} // End validate_step
wizard.on('change', function(e, data) {
console.log('change');
// STEP 1:
var step = 1;
if(data.step===step && data.direction==='next') {
// Hide button next
vrspx = validate_step(step);
console.log('Validation(' + step + ')= ' + vrspx);
if(vrspx === 'ok'){
// allow change
console.log('allow change');
}else{
// cancel change
console.log('cancel change');
return e.preventDefault();
}
} // End validate step 1
// STEP 2:
}); // End Wizard.on.change
PHP: (The ajax post to this php)
if($_SERVER['REQUEST_METHOD'] === 'POST')
{
switch ($value) {
case $value == '1':
# Validate STEP 1:
$this->log->lwrite('## VALUE 1');
foreach ($_POST as $key => $value) {
$this->log->lwrite('## $_POST['.$key.']'.$value);
}
if (isset($_POST['category_id']))
{
$category = CB_safeSQL($_POST['category_id']);
$msg = array('msg' => 'Valid...','status' => 'ok');
$this->log->lwrite('## CATEGORY SETED TO '.$category);
unset($category);
echo json_encode($msg);
unset($msg);
die();
}
else
{
$msg = array('msg' => 'Invalid ...','status' => 'notok');
echo json_encode($msg);
unset($msg);
$this->log->lwrite('## NO category readed');
}
break;
default:
# DEFAULT
$this->log->lwrite('## DEFAULT VALUE');
break;
}
} // End POST
Source: (StackOverflow)
Is it by design that the changed event does not pass a data parameter into the function?
$('#MyWizard').on('changed', function(e, data) {
console.log(data);
});
The above shows the data as being undefined.
Update
I suppose I can get around the issue by use this:
$('#MyWizard').on('changed', function(e, data) {
var item = $('#MyWizard').wizard('selectedItem');
});
Source: (StackOverflow)
I'd like to use the Fuel UX datagrid to display some data I am retrieving from my database. The page is served from a ruby on rails server.
The javascript example code for building the data object:
var dataSource = new StaticDataSource({
columns: [{
property: 'toponymName',
label: 'Name',
sortable: true
}, {
property: 'countrycode',
label: 'Country',
sortable: true
}, {
property: 'population',
label: 'Population',
sortable: true
}, {
property: 'fcodeName',
label: 'Type',
sortable: true
}],
data: sampleData.geonames,
delay: 250
});
$('#MyGrid').datagrid({
dataSource: dataSource,
stretchHeight: true
});
$('#datagrid-reload').on('click', function () {
$('#MyGrid').datagrid('reload');
});
If I am understanding the code, I am going to be defining my columns and some attributes in the columns object inside of the dataSource variable, and the data object is being loaded by sampleData.geonames.
The sampleData is here
What can I do using the rails conventions to replace the sampleData.geonames? I tried tweaking this a few ways to load rails objects in to here.
For example, I modified my columns' property fields to correspond to some properties of my User model. I tried replacing the
data: sampleData.geonames,
to
data: <%= @users.to_json %>,
I'm a little restricted on gems and versions, currently using Rails 2.3.
Thanks for any help.
Source: (StackOverflow)
I'm using Pillbox from FuelUX for tagging records. Every pill desribed as li entity in such way:
<li class="btn btn-default pill" data-value="two-value">
<span>Item 2</span>
<span class="glyphicon glyphicon-close">
<span class="sr-only">Remove</span>
</span>
</li>
By default tags are created as bootstrap buttons of default size (.btn-default class) and this code is hardcoded inside pillbox.js file on row 42:
this.$pillHTML = '<li class="btn btn-default pill">'...
How can I change button class to .btn-xs or apply my own class for newly added pills?
solved: just added to event added.fu.pillbox code, suggested below and all newly adding pills (not only existing) immediately applying required class
$('#myPillbox1').on('added.fu.pillbox', function pillboxAddedNew(evt, item) {
$('.btn.btn-default.pill').addClass('btn-xs'); });
where #myPillbox1 is a container for pills
<div id="myPillbox1" data-initialize="pillbox" class="pillbox pills-editable">
<ul class="clearfix pill-group">
<li class="btn btn-default btn-xs pill" data-value="two-value">
<span>Item 2</span>
<span class="glyphicon glyphicon-close">
<span class="sr-only">Remove</span>
</span>
</li>
...
</ul>
</div>
Source: (StackOverflow)
I'm hoping someone might be kind enough to help me with this. I'm using the FuelUX wizard and looking to dynamically add X number of steps, where X is a number set by the user on the first screen. The extra steps get added fine, except I can't figure out how to let the wizard know it now has a different number of steps to what it started with - so if it started with 3 steps, it still wants to submit the form after step 3, regardless of how many it now has.
Calling $('#MyWizard').wizard() again doesn't seem to work. In the wizard code there's a numSteps variable but it doesn't seem to be possible to access this from outside the class. There's also this solution on an external website from Rob Schmuecker (http://www.robschmuecker.com/dynamic-steps-in-fuel-ux-wizard/) but unfortunately it doesn't work for me, and calling $('#MyWizard').data('wizard', '') as he suggests prevents the wizard from stepping forward at all.
Does anyone have any suggestions/experience with this problem? I'm new to JS, etc., so maybe this is obvious, any help would be much appreciated! The code where I'm adding the steps is below:
var added_questions = 0;
function addStep()
{
added_questions++;
$("#end-of-questions-step-marker").before("<li id='#step-marker-q" + added_questions + "' data-target='#q" + added_questions + "'><span class='chevron'></span>Q" + added_questions + "</li>");
$("#step3").before("<div class='step-pane' id='q" + added_questions + "'><fieldset id='q" + added_questions + "-fieldset' class='col-sm-12'></fieldset></div>");
$("#q" + added_questions + "-fieldset").append(getQuestionPanel(added_questions));
}
Source: (StackOverflow)
FuelUX Wizard component - how to allow user to go directly to the last step??
I'm able work with FuelUX Wizard but my need is i want first and last button with next and previous.
i am trying this example
http://bootply.com/74471
any help on this please.
Source: (StackOverflow)
In my app, the previous steps must be blocked. Step one not should be accessible after validated and submited. How to block previous steps of manual selection?
Current implementation, example:
<div class="wizard clearfix" data-initialize="wizard" id="form-wizard">
<ul class="steps">
<li data-target="#step1" data-step="1" class="active"><span class="badge badge-info">1</span>Register</li>
<li data-target="#step2" data-step="2"><span class="badge">2</span>Other</li>
</ul>
</div>
<div class="step-content text-left">
<div data-step="1" id="step1" class="step-pane active">
<form id="frmSignup1">
...
<input type="button" class="btn-next" data-target="#step2" data-wizard="next" data-last="Finish" value="Próximo">
</form>
</div>
<div data-step="2" id="step2" class="step-pane">
<form id="frmSignup2">
...
</form>
</div>
</div>
EDIT
The attr data-restrict wasn't working in version that I was using. I changed to latest fuelux version and works.
Source: (StackOverflow)
I'm trying to implement the FuelUX tree plugin and I've followed the example so far but I need a nested structure. I'm assuming the tree plugin is capable of handling nested children? is this correct?
var treeDataSource = new TreeDataSource({
data: [
{ name: 'Test Folder 1', type: 'folder', additionalParameters: { id: 'F1' },
data: [
{ name: 'Test Sub Folder 1', type: 'folder', additionalParameters: { id: 'FF1' } },
{ name: 'Test Sub Folder 2', type: 'folder', additionalParameters: { id: 'FF2' } },
{ name: 'Test Item 2 in Folder 1', type: 'item', additionalParameters: { id: 'FI2' } }
]
},
{ name: 'Test Folder 2', type: 'folder', additionalParameters: { id: 'F2' } },
{ name: 'Test Item 1', type: 'item', additionalParameters: { id: 'I1' } },
{ name: 'Test Item 2', type: 'item', additionalParameters: { id: 'I2' } }
],
delay: 400
});
So far it seems to load the top level items into the opened folders rather than the nested data items. This is what the demo on their site also does but this doesn't seem as if its the desired interaction. Can anyone confirm if this is expected behaviour?
Can anyone point me to code where they've created a nested data tree using this plugin? Is there something really obvious I am missing?
Source: (StackOverflow)
I'm new to FuelUX so I was trying to get this to work, based on the example provided:
require(['jquery','data.js', 'datasource.js', 'fuelux/all'], function ($, sampleData, StaticDataSource) {
var dataSource = new StaticDataSource({
columns: [{property:"memberid",label:"LidId",sortable:true},{property:"name",label:"Naam",sortable:true},{property:"age",label:"Leeftijd",sortable:true}],
data: sampleData.memberdata,
delay: 250
});
$('#MyGrid').datagrid({
dataSource: dataSource,
stretchHeight: true
});
});
});
With this as the data:
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(factory);
} else {
root.sampleData = factory();
}
}(this, function () {
return {
"memberdata": [{
"memberid": 103,
"name": "Laurens Natzijl",
"age": "25"
}, {
"memberid": 104,
"name": "Sandra Snoek",
"age": "25"
}, {
"memberid": 105,
"name": "Jacob Kort",
"age": "25"
}, {
"memberid": 106,
"name": "Erik Blokker",
"age": "25"
}, {
"memberid": 107,
"name": "Jacco Ruigewaard",
"age":"25"
},{ /* etc */ }]
}
}));
I've got no console errors, no missing includes. Everthing works just fine - it even looks like it's loading. Except nothing shows up in the datagrid but '0 items'.
Any suggestions? I think I did everything the example provided...
EDIT: 14:33 (Amsterdam)
There seems to be a difference when I put this in console:
My page:
require(['jquery','data.js','datasource.js', 'fuelux/all'], function ($, sampleData, StaticDataSource) {
var dataSource = new StaticDataSource({
columns: [{property:"memberid",label:"LidId",sortable:true},{property:"name",label:"Naam",sortable:true},{property:"age",label:"Leeftijd",sortable:true}],
data: sampleData.memberdata,
delay: 250
});
console.debug(dataSource);
});
1st row in console:
function localRequire(deps, callback, errback) { /* etc */ }
2nd row in console:
StaticDataSource {_formatter: undefined, _columns: Array[3], _delay: 250, _data: Array[25], columns: function…}
FuelUX Example:
require(['jquery', 'sample/data', 'sample/datasource', 'sample/datasourceTree', 'fuelux/all'], function ($, sampleData, StaticDataSource, DataSourceTree) {
var dataSource = new StaticDataSource({
columns: [{property: 'toponymName',label: 'Name',sortable: true}, {property: 'countrycode',label: 'Country',sortable: true}, {property: 'population',label: 'Population',sortable: true}, {property: 'fcodeName',label: 'Type',sortable: true}],
data: sampleData.geonames,
delay: 250
});
console.debug(dataSource);
});
1st row in console:
StaticDataSource {_formatter: undefined, _columns: Array[4], _delay: 250, _data: Array[146], columns: function…}
2nd row in console:
function (deps, callback, errback, relMap) { /* etc */ }
Maybe this will help you help me :)
Source: (StackOverflow)
I need to bind a click event to <a> tags in a FuelUX DataGrid column that are dynamically added via a custom formatter.
The formatter is working as expected, however, I'm not sure how I should go about binding the click event handler. I would prefer to do so in an unobtrusive way.
The DataGrid is supposed to have a "loaded" event hook, but there isn't an example of how to use this event. Can someone please point me to an example? Google is coming up short for me.
The only reference I can find to the event is on 163 of datagrid.js:
self.$element.trigger('loaded');
I'm assuming that means I need to define a "loaded" function on the object, but where/how? My DataGrid is:
$('#jobs').datagrid({
dataSource: dataSource,
itemsText: 'Available Positions',
itemText: 'Available Position';
});
Source: (StackOverflow)
I am trying to create a hidden column which will contain the unique "id" of the row as an attribute in say a "data-id" one. Because i can't seem to work out how to retrieve the data model behind the row. I'm using server-side datasource.
columns: [{
property: 'hiddencolumn',
label: '',
hidden: true <-- ?????
} .. .. ],
In the formatter i use some placeholder tag, could be a span
$.each(items, function(index, item) {
item.hiddencolumn = '<span data-id="' + item.id + '"</span>';
});
then i add a click handler to the row and then get the data-id column:
$('#MyGrid').on('loaded', function() {
$('#MyGrid > tbody > tr').click(function() {
console.log($(this).find('> td > span').attr('data-id'));
});
});
Is this correct? Or should I attempt to add data-id to the tr tag/row itself? The above concept works, but i just need to know how to hide the column :)
thanks
EDIT 14th Apr - here's what I did to solve this. Use data-id and hide the span in an existing column. For me, I had a "date" and "id" field in my model. I choise to tag id onto the date field.
formatter: function(items) {
$.each(items, function(index, item) {
item.date = item.date + '<span style="visibility: hidden;" data-id="' + item.id + '"/>';
});
}
Then retrieve the id like so (using jquery)
$('#MyGrid').on('loaded', function() {
$('#MyGrid > tbody > tr').click(function() {
console.log($(this).find('> td > span').attr('data-id')); // value is here
});
});
ok?
Source: (StackOverflow)