Any idea why the onRefresh event is not firing? First time through the table displays properly. But when clicking the refresh button it does not work (event does not fire). I thought this worked before, but I think a new version of bootstrap.min.js may have killed it (or perhaps it is just a coincidence). Any help would be helpful.
HTML:
<table id="stats-view-output4" data-pagination="false" data-show-refresh="true" data-search="false"
data-cache="false" data-show-toggle="false" data-show-columns="false"
data-show-header="false" data-show-footer="false">
</table>
Javascript (a button gets u to this function):
function do_trader_instruments() {
$('#stats-view-output4').bootstrapTable({
onRefresh: function (params) {
bpt_pie_chart();
},
columns: [{
field: 'TradedInstruments',
title: 'Traded Instruments'
}],
data: [{
TradedInstruments: "<div id='instrument-chart'></div>"
}]
});
bpt_pie_chart();
}
Well, I gave up and did a brut force solution. Feels like a bug of a conflict somewhere. For anyone stumbling onto this here it is:
HTML:
<div id="toolbar4">
<div class="form-inline" role="form">
<button id="refresh4" class="btn btn-default" type="submit"><span class="glyphicon glyphicon-refresh"></span></button>
</div>
</div>
<table id="stats-view-output4" data-pagination="false" data-show-refresh="false" data-search="false"
data-cache="false" data-show-toggle="false" data-show-columns="false"
data-toolbar="#toolbar4" data-toolbar-align="right"
data-show-header="true" data-show-footer="false" style="font-size:11px;">
</table>
Javascript:
$(function () {
$('#refresh4').click(function () {
bpt_pie_chart();
});
});
function do_trader_instruments() {
$('#stats-view-output4').bootstrapTable({
columns: [{
field: 'TradedInstruments',
title: 'Traded Instruments'
}],
data: [{
TradedInstruments: "<div id='instrument-chart'></div>"
}]
});
bpt_pie_chart();
}
Related
Script:
$(document).ready(function () {
$('#btnNext').click(function (e) {
e.preventDefault();
});
var options = {
beforeSend: function () {
$("#progress").show();
//clear everything
$("#bar").width('0%');
$("#message").html("");
$("#percent").html("0%");
},
uploadProgress: function (event, position, total, percentComplete) {
$("#bar").width(percentComplete + '%');
$("#percent").html(percentComplete + '%');
},
success: function () {
$("#bar").width('100%');
$("#percent").html('100%');
},
complete: function (response) {
$("#message").html("<font color='green'>" + response.responseText + "</font>");
},
error: function () {
$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
}
};
$("#form1").ajaxForm(options);
});
HTML:
<form id="form1" method="post" enctype="multipart/form-data">
<div>
<input type="file" size="60" name="myfile" />
<input type="submit" value="Ajax File Upload" />
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div>
</div>
<br />
<div id="message"></div>
</div>
I was tested with Webform (C#). It worked. But, Dotnetnuke not working. (Postback and nothing is changed). Have a different way for Dotnetnuke to get percentage of progress of page load?
-- Thank for reading--
Try removing the <form> tag around your module because DNN is already writing a form tag to the page surrounding the theme and modules. You can change the last line in your jquery logic to reference the form already loaded by DNN.
$("form:first").ajaxForm(options);
I have a master-detail scenario. I'm using paper-datatable by David Mulder for my user-list. Data is populated through firebase collection
When tapping a row, a paper-dialog pops up with the details of the selected user.
When trying to edit a field, updating at firebase stops after one keystroke.
What am I missing?
<dom-module id="user-list">
<template>
<style>
:host {
#apply(--layout-vertical);
}
#editDialog {
min-width: 500px;
}
</style>
<firebase-collection location="https://<FIREBASE_APP>.firebaseio.com/users" data="{{users}}"></firebase-collection>
<paper-dialog id="editDialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
<div>
<paper-input value="{{selectedUser.name}}" label="Name" class="flex"></paper-input>
<paper-input value="{{selectedUser.username}}" label="Username" class="flex"></paper-input>
</div>
<div class="buttons">
<paper-button dialog-confirm autofocus>Ok</paper-button>
</div>
</paper-dialog>
<paper-datatable id="datatable" selected-item="{{selectedUser}}" selectable on-row-tap="_onDetail" data="{{users}}">
<div no-results>
Loading or no more items...
</div>
<paper-datatable-column header="Name" property="name" type="String" sortable style="min-width: 160px"></paper-datatable-column>
<paper-datatable-column header="Username" property="username" type="String" sortable style="min-width: 40px"></paper-datatable-column>
</paper-datatable>
</template>
<script>
Polymer({
is: 'user-list',
behaviors: [
Polymer.NeonAnimatableBehavior
],
properties: {
type: String,
selectedUser: {
type: Object,
notify: true
},
users: {
type: Array,
notify: true
},
animationConfig: {
value: function() {
return {
'entry': {
name: 'fade-in-animation',
node: this
},
'exit': {
name: 'fade-out-animation',
node: this
}
}
}
}
},
_onDetail: function() {
var dialog = document.getElementById('editDialog');
if (dialog) {
dialog.open();
}
}
})
</script>
</dom-module>
It seems firebase-collection isn't currently meant to be used in this way, it's more of a view into a Firebase location with data that's in an array-like structure. Although with the exception that you can add/delete new items but not update existing ones. See https://elements.polymer-project.org/elements/firebase-element?active=firebase-collection.
That said, each item in the collection has a __firebaseKey__ property that you could use to directly update that item in firebase.
Currently I'm working on a project based on Meteor as back end and React as front end. I really enjoyed simplicity untill I removed insecure package and have to deal with Meteor methods. Right now I need to perform a basic insert operation and I'm just stucked!
I have a form as component (in case eventually I'd like to use this form not only for inserting items but for editing those items as well) and here's my code for this form:
AddItemForm = React.createClass({
propTypes: {
submitAction: React.PropTypes.func.isRequired
},
getDefaultProps() {
return {
submitButtonLabel: "Add Item"
};
},
render() {
return (
<div className="row">
<form onSubmit={this.submitAction} className="col s12">
<div className="row">
<div className="input-field col s6">
<input
id="name"
placeholder="What"
type="text"
/>
</div>
<div className="input-field col s6">
<input
placeholder="Amount"
id="amount"
type="text"
/>
</div>
</div>
<div className="row">
<div className="input-field col s12">
<textarea
placeholder="Description"
id="description"
className="materialize-textarea">
</textarea>
</div>
</div>
<div className="row center">
<button className="btn waves-effect waves-light" type="submit">{this.props.submitButtonLabel}</button>
</div>
</form>
</div>
);
}
});
This chunk of code is used as a form component, I have a prop submitAction which I use in let's say add view:
AddItem = React.createClass({
handleSubmit(event) {
event.preventDefault();
const
name = $('#name').val(),
amount = $('#amount').val(),
description = $('#description').val();
Items.insert(
{
name: name,
range: range,
description: description,
createdAt: new Date(),
ownerId: Meteor.userId()
},
function(error) {
if (error) {
console.log("error");
} else {
FlowRouter.go('items');
};
}
);
},
render() {
return (
<div className="row">
<h1 className="center">Add Item</h1>
<AddItemForm
submitButtonLabel="Add Event"
submitAction={this.handleSubmit}
/>
</div>
);
}
});
As you can see I directly grab values by IDs then perform insert operation which works absolutely correct, I can even get this data displayed.
So now I have to remove insecure package and rebuild the whole operation stack using methods, where I actually stucked.
As I understand all I should do is to grab same data and after that perform Meteor.call, but I don't know how to pass this data correctly into current method call. I tried considering this data right in the method's body which doesn't work (I used the same const set as in AddItem view). Correct me if I'm wrong, but I don't think this method knows something about where I took the data (or may be I don't really get Meteor's method workflow), so by this moment I ended up with this code as my insert method:
Meteor.methods({
addItem() {
Items.insert({
name: name,
amount: amount,
description: description,
createdAt: new Date(),
ownerId: Meteor.userId()
});
}
});
and this is how I changed my handleSubmit function:
handleSubmit(event) {
event.preventDefault();
const
name = $('#name').val(),
amount = $('#amount').val(),
description = $('#description').val();
Meteor.call('addItem');
},
Also I tried declaring method like this:
'addItem': function() {
Items.insert({
// same code
});
}
but it also didn't work for me.
Again, as I understand the problem isn't about data itself, as I wrote before it works just right with insecure package, the problem is how the heck should I get this data on the server first and right after that pass this to the client using methods (also console gives no even warnings and right after I submit the form, the page reloads)?
I've already seen some tutorials and articles in the web and didn't find desicion, hope to get help here.
You can add your data as parameters in your Meteor call function. You can also add a callback function to check on the success of the call.
handleSubmit(event) {
event.preventDefault();
const
name = $('#name').val(),
amount = $('#amount').val(),
description = $('#description').val();
Meteor.call('addItem', name, amount, description, function(err, res) {
if (err){
console.log(JSON.stringify(err,null,2))
}else{
console.log(res, "success!")
}
});
},
In your Meteor methods:
Meteor.methods({
addItem(name, amount, description) {
var Added = Items.insert({
name: name,
amount: amount,
description: description,
createdAt: new Date(),
ownerId: Meteor.userId()
});
return Added
}
});
I am trying to get reactive-tables to work but I am having no luck following the instructions on GitHub.
This is what I have:
In my Main.html:
{{> courseTable }}
in my course_table.html:
<template name="courseTable">
<div id="table">
{{ > reactiveTable collection=Courses}}
</div>
</template>
in courses.js:(works with autoForm)
Courses = new Meteor.Collection("courses", {
schema: {....
Is there something I am missing? From my understanding once these commands are used, the rest is done from within the package. I can't find any more information on this package anywhere.
What I have now just shows a blank screen.
Thanks in advance!
This is what I have: (I'm using Meteor framework and bootstrap-3 package)
in index.html
<template name="clientes">
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Clientes</h3>
</div>
<div class="panel-body">
{{> reactiveTable collection=tables settings=tableSettings}}
</div>
</div>
</div>
</template>
in index.js
var Clientes = new Meteor.Collection('clientes')
Template.clientes.tables = function () {
return Clientes;
}
Template.clientes.tableSettings = function () {
return {
rowsPerPage: 10,
showFilter: false,
showNavigation: 'auto',
fields: [
{ key: 'nombre', label: 'Nombre' },
{ key: 'apellido', label: 'Apellido' },
{ key: 'correoe', label: 'E-mail' }
],
useFontAwesome: true,
group: 'client'
};
}
With this I can display all the records in the collection.
I hope this help you to go any further.
Courses is the collection object. To get some courses, you need to query the courses with find:
Courses.find()
However, to make this accessible in the template, you need a helper function.
//course_table.js
Template.courseTable.helpers({
courses: function () {
return Courses.find()
}
});
Then you can can set the table collection using the helper method (I used a lowercase "courses" for the helper method for clarity):
{{> reactiveTable collection=courses}}
I'm using MVC4,Kendo tabstrip along with jQuery Tooltipster for showing validation messages.
My issue is the validation message from Tab 1 is getting overlapped on Tab 2 due to z-index. I have tried setting z-index for tooltipster-base but isn't working.
My HTML code looks like something this:
<div id="tabstrip">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div><form id="myform">
<input type="text" name="field1" />
<input type="text" name="field2" />
<br/>
<input type="submit" />
</form></div>
<div><form id="myform2">
<input type="text" name="field3" />
<input type="text" name="field4" />
<br/>
<input type="submit" />
</form></div>
</div>
Script:
$(document).ready(function () {
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.select(0);
// initialize tooltipster on text input elements
$('#myform input[type="text"]').tooltipster({
trigger: 'custom',
onlyOne: false,
position: 'right'
});
$('#myform2 input[type="text"]').tooltipster({
trigger: 'custom',
onlyOne: false,
position: 'right'
});
// initialize validate plugin on the form
$('#myform').validate({
errorPlacement: function (error, element) {
$(element).tooltipster('update', $(error).text());
$(element).tooltipster('show');
},
success: function (label, element) {
$(element).tooltipster('hide');
},
rules: {
field1: {
required: true,
email: true
},
field2: {
required: true,
minlength: 5
}
},
submitHandler: function (form) { // for demo
alert('valid form');
return false;
}
});
// initialize validate plugin on the form2
$('#myform2').validate({
errorPlacement: function (error, element) {
$(element).tooltipster('update', $(error).text());
$(element).tooltipster('show');
},
success: function (label, element) {
$(element).tooltipster('hide');
},
rules: {
field3: {
required: true,
email: true
},
field4: {
required: true,
minlength: 5
}
},
submitHandler: function (form) { // for demo
alert('valid form');
return false;
}
});
});
Please check this:
JSFiddle: http://jsfiddle.net/vishalvaishya/bCZWd/2/
Please help me for setting proper css style.
Found solution myself only. Might be helpful for someone.
Done some updation in tooltipster logic.
Added extra option (appendTo) to place tooltip over specific element only:
c = {
animation: "fade",
appendTo: "body",
arrow: true,
...
And changed parameter of tooltipster.appendTo('body') in showTooltip function like;
tooltipster.appendTo($(l.options.appendTo));
Usage:
$('#profileForm input[type="text"]').tooltipster({
trigger: 'custom',
onlyOne: false,
position: 'right',
appendTo: '#profileForm'
});
Like this you can use tooltipster on different kendo-tabs or on different divs.
See on JSFiddle:
Previous : http://jsfiddle.net/vishalvaishya/bCZWd/2/
Working : http://jsfiddle.net/vishalvaishya/bCZWd/3/