I want to pass a value from a table by clicking its row and pass it into input/textbox from another template.
I’ve tried several times and got failed.
I also using aldeed:tabular
These are my complete sources
====================================
/client/movieForm.html
< template name=“movieForm”>
< fieldset>
< legend>Add New Movie< /legend>
< form>
< div>
< label>
Title:
< input id=“title” value="{{valtitle}}" />
< /label>
< /div>
< div>
< label>
Director:
< input id=“director” value="{{valdirector}}" />
< /label>
< /div>
< div>
< input type=“submit” value=“Add Movie” />
< /div>
< /form>
< /fieldset>
< /template>
====================================
/client/movies.html
< head>
< title>My Movie App< /title>
< /head>
< body>
< h1>Movies< /h1>
{{> moviesTemplate }}
{{> movieForm }}
< /body>
====================================
/client/moviesTemplate.html
< template name=“moviesTemplate”>
< p>
{{> tabular table=TabularTables.Movies class=“table table-striped table-bordered table-condensed”}}
< /p>
< /template>
====================================
/client/movies.js
// Declare client Movies collection
Movies = new Meteor.Collection(“movies”);
Template.movieForm.Helpers = {
assignform: function( a,b ) {
alert("I want to pass a value here: " + a + " " + b);
Template.movieForm.valtitle = a ;
Template.movieForm.valdirector = b ;
}}
// Bind moviesTemplate to Movies collection
Template.moviesTemplate.movies = function () {
return Movies.find();
};
// Handle movieForm events
Template.movieForm.events = {
‘submit’: function (e, tmpl) {
// Don’t postback
e.preventDefault();
// create the new movie
var newMovie = {
title: tmpl.find("#title").value,
director: tmpl.find("#director").value
};
// add the movie to the db
Meteor.call(
"addMovie",
newMovie,
function (err, result) {
if (err) {
alert("Could not add movie " + err.reason);
}
}
);
}
};
TabularTables = {};
Meteor.isClient && Template.registerHelper(‘TabularTables’, TabularTables);
TabularTables.Movies = new Tabular.Table({
name: “movies”,
collection: Movies,
autoWidth: true,
columns: [
{data: “title”, title: “Title”},
{data: “director”, title: “Director”}
]
});
if (Meteor.isClient) {
Template.movieForm.vartitle = function() {
return Session.get(“vartitle”)
};
Template.moviesTemplate.events({
‘click tbody > tr’: function (event) {
var dataTable = $(event.target).closest(‘table’).DataTable();
var rowData = dataTable.row(event.currentTarget).data();
Template.movieForm.Helpers.assignform(rowData.title,rowData.director);
}
});
};
====================================
/common/methods.js
Meteor.methods({
addMovie: function (newMovie) {
// Perform form validation
if (newMovie.title == “”) {
throw new Meteor.Error(413, “Missing title!”);
}
if (newMovie.director == “”) {
throw new Meteor.Error(413, “Missing director!”);
}
// Insert movie (simulate on client, do it on server)
return Movies.insert(newMovie);
}
});
====================================
/server/movies.js
// Declare server Movies collection
Movies = new Meteor.Collection(“movies”);
// Seed the movie database with a few movies
Meteor.startup(function () {
if (Movies.find().count() == 0) {
Movies.insert({ title: “Star Wars”, director: “Lucas” });
Movies.insert({ title: “Memento”, director: “Nolan” });
Movies.insert({ title: “King Kong”, director: “Jackson” });
}
});
TabularTables = {};
Meteor.isClient && Template.registerHelper(‘TabularTables’, TabularTables);
TabularTables.Movies = new Tabular.Table({
name: “movies”,
collection: Movies,
columns: [
{data: “title”, title: “Title”},
{data: “director”, title: “Director”}
]
});