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".
Related
i am trying to get the Bootstrap Tooltip to work within a vue v-for loop.
i am using vue 3 and bootstrap 5.20
my code:
<script>
....
$(document).ready(function(){
$('[data-bs-toggle="tooltip"]').tooltip();
});
export default {
.....
}
</script>
<template>
<div id="listForm" style="">
<table class="table table-striped table-bordered">
<thead >
<tr>
.....
</tr>
</thead>
<tbody>
<tr v-for="userEntry in userEntrys">
<td class="text-center">{{ userEntry.date }}</td>
<td class="text-center">{{ userEntry.place }}</td>
<td class="text-center">{{ userEntry.hours }}</td>
<td class="text-center"><a data-bs-toggle="tooltip" data-bs-placement="left" data-bs-container="body" :title="userEntry.hash">Log</a></td>
</tr>
</tbody>
</table>
</div>
</template>
i tried the tooltip outside of the v-for loop and it worked fine..
everytime i change something on the file and the vue live view in the browser updates, the tooltip within the loop works too.. but if i refresh the browser it never works again.
i hope someone can help me.
best regards Tom!
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.
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>
I am trying to find a way to revert a jQuery UI dialog's dialog() call.
What I am doing in my app first is calling dialog on a div as such:
$('#dialog').dialog({
...options
});
Then once the user presses the close button, I would like the div tag and its content to reappear again at the same place it was before calling dialog() but not in the jQuery dialog.
I've tried this :
$('#dialog').dialog('close');
$('#dialog').show();
but it doesn't work. It seems that the #dialog's content is emptied when dialog('destroy') is called.
Any ideas?
Thanks,
Jimmy
Perhaps what you can do is to duplicate #dialog to an new div, and dialog() that one, leaving the original untouched.
In fact it was a bit more difficult than a straight html() or append() since in my div I had a jQuery datatables component + a bunch of other custom events. So I first had to deeply clone its children with all the events then call fadeIn() fadeOut() in the right place. So here I go:
The HTML (the #dialog children get cloned Inside the #dialog2 div):
<div id="main">
<div id='dialog'>
<input id='input1' type="text"></input>
<input id='input2' type="text"></input>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center"> 4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div id='dialog2' style='display:block;'>
</div>
<button id="open">Detach Me</button>
The JavaScript:
<script type="text/javascript">
$(document).ready(function(){
$("#dialog").children().clone(true, true).appendTo($("#dialog2"));
$('#dialog2').hide();
$('#open').click(function(){
$('#dialog2').fadeOut();
$("#dialog").dialog({
width: 1000,
height:800,
close : function(){
$('#dialog2').fadeIn();
return true;
}
});
});
this.datatable = $('table').dataTable({
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).on('click', function(){
$(this).addClass('selected', true);
});
}
});
});
</script>