I have a table that displays a list of uploaded files. If I uploaded a file it needs to be reflected in the table. This is already happening — not, however, in real-time. I need to refresh the page to reflect the data that I need.
I tried refreshing the div in jquery but it is not working:
<div class="mjs-cell">
<div id="stipsData" data-bind="template:{name: 'rehash-customertab-stips-section', data: stipsViewModel}">
</div>
</div>
<div class="mjs-row">
<table class="table table-striped table-bordered">
<tr>
<th>Stip Name</th>
<th>Status</th>
<th>File Name</th>
</tr>
<tbody data-bind="foreach: $data">
<tr class="stips-row">
<td class="hidden stips-id" data-bind="text: StipulationTypeId"></td>
<td class="stips-text">
<a data-bind="text: StipulationType"></a>
</td>
<td class="stips-status">
<span data-bind="text: Status"></span>
</td>
<td class="stips-uploaded-file" data-bind="text: FileName"></td>
</tr>
</tbody>
</table>
</div>
Here is the code that I use for binding:
stipsViewModel = ko.computed(function () {
DealApiControllers.GetStipulations(dealId,
(response) => {
this.stipsViewModel = response.DealStipulationsDTOs;
},
(error) => {
console.error(error);
});
}, this);
For example the table shows Doc1, Doc2. If I upload Doc3 it should be reflected in the list.
Related
Page rendering is not working with iron:router please help me.Rendering is not working with code.Please find the bellow attached code.And we are users meteor add iron:router 0.9.4.And we used meteor 0.9.3.1. Page rendering is not working
<head>
</head>
<body >
<div>
{{> players}}
</div>
</body>
<template name ="editform">
<div class="container">
<div class="row" style="border-bottom: 5px solid gray;">
<h2>Profile</h2>
</div>
<div id="wrapper">
<table>
<tr>
<td>First name:</td>
<td><input type="text" name="pff_name"/></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" name="pfl_name"/></td>
</tr>
<tr>
<td>Email Address:</td>
<td><input type="email" name="pfemail"/></td>
</tr>
<tr>
<td>Phone number:</td>
<td><input type="text" name="pfname"/></td>
</tr>
<tr>
<td>Company or Organization:</td>
<td><input type="url" name="pfname"/></td>
</tr>
</table>
</div>
</div>
</template>
<template name="players">
<div>
<table class="table table-condensed table-striped table-bordered table-hover no-margin">
<tr>
<th>IP</th>
<th></th>
</tr>
{{#each scorers}}
<tr>
<td><a href="{{ pathFor 'editform' }}" >{{ ip }}</a></td>
<td></td>
</tr>
{{/each}}
</table>
</div>
</template>
This router.js
Router.route("/", function() {
this.render("route");
});
It is unclear what you are trying to achieve.
May I suggest you to start by reading the Meteor Docs for starters.
For a simple app like this one you can use a structure like this:
/client (client side code files)
/server (server side code files)
collections.js
Check out a good way of structuring your app here.
First, you don't need the <head> and <body> tags here.
Then, you can create a layout template in client folder in which you can set the players template to render, also to add header, footer, etc to your page.
layout.html
<template name="layout">
{{>players}}
</template>
Then you need a players template in client folder as well.
I'm gonna go ahead and produce an simple example here to get you going. The user input value is collected, inserted into Players collection and for each player in that collection a new table row is created in div.result using a {{players}} helper.
players.html
<template name="players">
<div class="container">
<div class="row" style="border-bottom: 5px solid gray;">
<h2>Profile</h2>
</div>
<div id="wrapper">
<table>
<tr>
<td>First name:</td>
<td><input type="text" id="pff_name" /></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" id="pfl_name" /></td>
</tr>
</table>
<button class="insert">Submit</button>
</div><br/>
<div id="result">
<table class="table table-condensed table-striped table-bordered table-hover no-margin">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
{{#each players}}
<tr>
<td>{{firstname}}</td>
<td>{{lastname}}</td>
</tr>
{{/each}}
</table>
</div>
</div>
</template>
collections.js
Create a new Meteor Collection called Players, which will store all the added documents.
Players = new Meteor.Collection("players");
players.js
Here, the players helper will return a cursor and a created Meteor method named addPlayer is called.
Template.players.helpers({
players: function() {
return Players.find();
}
});
Template.players.events({
'click .insert': function(event, template) {
var first = $('#pff_name').val();
var last = $('#pfl_name').val();
if(first !== "" && last !== "") {
Meteor.call("addPlayer", first, last);
}
$('#pff_name').val("");
$('#pfl_name').val("");
}
});
server.js
Adding the player to Players collection
Meteor.startup(function () {
Meteor.methods({
addPlayer: function(fname, lname) {
Players.insert({firstname: fname, lastname: lname});
}
})
});
routrer.js
Tell Iron Router to render the players template
Router.map(function () {
this.route('players', {
path: '/',
template: 'players',
layoutTemplate: 'layout'
})
});
EDIT:
You are using IronRouter version 0.9.4, but your route is defined for the new version.
Either update IronRouter to iron:router#1.0.0-pre3 or follow the notation I gave for this version.
Sorry to be blunt, but you really need to read this.
At the very, very top it says:
Router.route('/', function () {
this.render('Home');
});
When the user navigates to the url "/", the route above will render the template named "Home" onto the page.
You have the line this.render("route"); in your router, but no template named "route".
I'm trying to override the jquery ui tooltip class so i can apply a custom class. Using knockout to bind to a span in a cell in a row in a table. But the tooltipClass is ignored. Any idea why? Jquery-ui-1.10
<div data-bind="visible:atleastOne">
<table class="mytable">
<thead>
<tr>
<th colspan="1" class="white-back" />
<th class="border-bottom" colspan="5">Orders</th>
</tr>
<tr>
<th class="title-column border-right" />
<th class="value-column">Account</th>
<th class="value-column">Amount</th>
<th class="value-column">Day</th>
<th class="value-column">Percentage</th>
<th class="value-column">Date</th>
</tr>
</thead>
<tbody data-bind="foreach: { data: items, as: 'item' }">
<!-- ko if: $parent.hasMultiple -->
<tr>
<tdborder-right" colspan="5">
<span class="bold" data-bind="text: 'Item ' + item.Code()"></span>
</td>
<td colspan="5"></td>
</tr>
<!-- /ko -->
<!-- ko foreach: { data: item.childen, as: 'child' } -->
<tr style="display: none;">
<td data-bind="attr:{ id: 'tooltip-content-' + item.code() + '-' + child.code() }">
<div data-bind="template: 'data-template', data: $data">
</div>
</td>
</tr>
<!-- ko foreach: { data: child.readOnly.subOrders, as: 'sub' } -->
<tr class="child-row" data-bind="css: { alt: $parentContext.$index() % 2 }">
<td>
<span data-bind="visible: $index() == 0, text: item.readOnly.title, tooltip: {tooltipClass: 'test', show: true, content: '#tooltip-content-' + item.code() + '-' + child.code() }"></span>
</td>
<td>
<span data-bind="text: sub.readOnly.acc"></span>
</td>
<td class="numeric">
<span data-bind="text: sub.readOnly.amount"></span>
</td>
<td>
<span data-bind="text: sub.readOnly.day"></span>
</td>
<td class="numeric">
<span data-bind="text: sub.readOnly.percentage"></span>
</td>
<td>
<span data-bind="text: sub.readOnly.date"></span>
</td>
</tr>
<!-- /ko -->
<!-- /ko -->
</tbody>
</table>
</div>
css
.test
{
background:pink;
}
If I add this to my stylesheet, the style is overridden wherever a tooltip is used as expected.
.ui-tooltip
{
background:blue;
}
However, I need to specify a different style on different tooltips, so this won't work for me.
I tried targeting the table itself but it doesn't work:
.mytable .ui-tooltip
{
background:pink;
}
I'm making a page using bootstrap and angular. Fixed my layout thru BS and now working on angular. While trying to repeat an image via ng-repeat, I got into this cell border problem and not sure what to do.
<table class="table">
<tr>
<th colspan=2 class="text-center">Skill Level</th>
</tr>
<tr>
<th>Forehand: </th>
<td>
<img class="image star" src="img/star.png"/>
<img class="image star" src="img/star.png"/>
</td>
</tr>
<table class="table">
<tr>
<th colspan=2 class="text-center">Skill Level </th>
</tr>
<tr data-ng-repeat="skill in skillLevel">
<th>
{{ skill.skillName }}:
</th>
<td data-ng-repeat="i in makeArray(skill.value) track by $index">
<img class="image star" src="img/star.png"/>
</td>
</tr>
</table>
Got this makeArray function from a SO thread. I've tried setting min-width and max-width for the cell, yet no use. Can you help? Thanks.
$scope.skillLevel=[
{'skillName':'HTML', 'value': 1},
{'skillName':'CSS', 'value': 4},
{'skillName':'JS', 'value': 5},
{'skillName':'Bootstrap', 'value': 1}
];
$scope.makeArray=function(number) {
return new Array(number);
}
Change
<td data-ng-repeat="i in makeArray(skill.value) track by $index">
<img class="image star" src="img/star.png"/>
</td>
to
<td>
<img class="image star" src="img/star.png" data-ng-repeat="i in makeArray(skill.value) track by $index" />
</td>
The problem occured when you replicated the <td> cells instead of replicating the <img> images.
I'm using FOOTABLE to create job board. What I want to add is a checkbox option to select jobs (rows) so users can send cv to multiple jobs at once. Any idea on how to implement this in existing table?
simple example:
<table class="footable toggle-arrow" data-page-size="20" >
<thead>
<tr>
<th><!--select option id col--></th>
<th><span>Job Description</span></th>
<th><span>Area</span></th>
<th><span>Number</span></th>
<th><!--TYPE--></th>
<th><!--SEND--></th>
</tr>
</thead>
<tbody>
<tr><!---JOB-->
<td><input type="checkbox" value="id"></td>
<td>job description value</td>
<td>area value</td>
<td>job number</td>
<td data-value="4566">4566</td>
<td data-value="3"><img title="hot" src="vip.png" /></td>
<td></td>
</tr><!---END JOB-->
</tbody>
Thanks!
Here's a quick example of one way you could do this:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<a id="sendSelectedButton" href="#">Send Selected</a>
<table id="theTable">
<thead>
<tr>
<th></th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
</td>
<td>Job 1</td>
<td>send
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>Job 2</td>
<td>send
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>Job 3</td>
<td>send
</td>
</tr>
</tbody>
</table>
<script>
function sendRows(rows) {
if (rows === undefined ||
rows === null ||
rows.length === 0)
return;
//Do stuff to send rows here.
}
$(document).ready(function() {
$("#sendSelectedButton").on("click", function() {
var checkRows = $("#theTable").find("tbody tr").has("input:checked");
sendRows(checkRows);
});
$("table").on("click", "tr a", function() {
var row = $(this).parents("tr");
sendRows(row);
});
});
</script>
</body>
</html>
Here's a plunk with the same code: http://plnkr.co/edit/tK4WpCvV7vSjVFmKlJIx
I didn't add any Footable here because it doesn't seem like that Footable will affect it one way or another.
I think you'll find that things quickly get a lot more complex as your application matures. I'd suggest you look some type of data binding. I personally use Knockout.js. Even if you don't decide to use Knockout.js, I think their tutorial is pretty cool. (http://knockoutjs.com/index.html)
I have a html table and the rows come form an observable array....
<tbody data-bind="foreach: TableArray">
<tr>
<td data-bind:"text: Item1"></td>
etc....
How can I skip the first row... so I can add a static row (not a header) to the top of the table.
<tbody data-bind="foreach: TableArray">
<tr>
<td> Static Row </td>
</tr>
<tr>
<td data-bind:"text: Item1"></td>
The secret is in the containerless foreach markup. Check "Note 4" of the following link:
http://knockoutjs.com/documentation/foreach-binding.html
Here's a fiddle showing a basic example.
http://jsfiddle.net/internetH3ro/M9f4D/7/
Basic view model:
function ViewModel() {
var self = this;
self.items = [{
firstName: 'James',
lastName: 'McConnell'
},{
firstName: 'Scott',
lastName: 'Hanselman'
},{
firstName: 'Bill',
lastName: 'Gates'
}];
}
HTML markup:
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<!-- ko foreach: items -->
<tr>
<td><span data-bind="text: $data.firstName"></span></td>
<td><span data-bind="text: $data.lastName"></span></td>
</tr>
<!-- /ko -->
</table>
So you just wrap the content you want repeated in a comment, and Knockout will repeat that content for each element in your collection. Pretty nifty, I wish Angular had something like this.
One way to approach the issue would be to use Knockout's containerless binding syntax.
See Note 4 in Knockout's documentation of the foreach binding.
http://knockoutjs.com/documentation/foreach-binding.html
Javascript
var YourVM = function () {
this.allItems = ko.observableArray(["Fries", "Eggs Benedict", "Ham", "Cheese"]);
};
ko.applyBindings(new YourVM());
HTML
<table>
<thead>
<tr>
<th>Your Column</th>
</tr>
</thead>
<tbody>
<tr class="row-static">
<td>Static Row</td>
</tr> <!-- ko foreach: allItems -->
<tr>
<td data-bind="text: $data"></td>
</tr> <!-- /ko -->
</tbody>
</table>
Live example on JS Bin
http://jsbin.com/AzEwEce/1/edit
You could use an if binding to only output an extra row on the "first" pass.
Example:
<table data-bind ="foreach: rows">
<tr data-bind="if: $index() == 0" >
<td><span data-bind="text: $index"></span></td>
</tr>
<tr>
<td><span data-bind="text: text"></span></td>
</tr>
</table>