How to pass values into another form template?

help
1

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”}
]
});

2

Too much code to read, but you could store the value in a variable that both templates have access to.

A simple and reactive way of doing this would be to use Session.get/set. (Or ReactiveDict/ReactiveVar, or just standard js variables).

3

Why not just put the value in the url somehow? Like a query string or something.

http://localhost:3000/table/?row=select

Then just grab the query parameters at that key.

4

This function doesn’t work when it’s called from moviesTemplate.event

Template.movieForm.Helpers = {
assignform: function( a,b ) {

alert(a); // this alert is work. it show “a” value

Template.movieForm.valtitle = a ; /// this function won’t work
Template.movieForm.valdirector = b ; /// this function won’t work
}}

Template.moviesTemplate.events({
‘click tbody > tr’: function (event) {
var dataTable = $(event.target).closest(‘table’).DataTable();
var rowData = dataTable.row(event.currentTarget).data();

alert(rowData.title); // this alert is work. it show rowData.title value
Template.movieForm.Helpers.assignform(rowData.title,rowData.director);
}
});
};

5

Hi, I just new in this meteor. I’ve try the code, and found that assigning a value between template is not working. Really need help.

I’ve the function like this :

function assignVal (a,b) {
alert(a);
Template.movieForm.valtitle = a ;
Template.movieForm.valdirector = b ;
};

When I call the function outside the event it works (the alert and the assigning value to valtitle and valdirector)

assignVal(“1”,“2”);

But it doesn’t work when I call it inside an event of a different template (the alert is work but the assigning value doesn’t work)

Template.moviesTemplate.events({
‘click tbody > tr’: function (event) {
var dataTable = $(event.target).closest(‘table’).DataTable();
var rowData = dataTable.row(event.currentTarget).data();

assignVal( rowData.title , rowData.director );

}
});

6

hello…
I’ve got the solution…
just as your recommended, using pure javascript

I used : document.getElementById(“title”).value = a ;

it work