I need help for i had develop the modal dialogbox using meteorJs it is not working when ever click the add client button open a dialog box but it is not working please check where i did a mistake, here is my code below.
template:
<template name="shedule">
<button class="btn btn-success addClients">Add Client</button>
</template>
Js code:
Session.setDefault('showclientDialog', false);
template.shedule.events({
'button #addClient':function(e,t){
console.log("You pressed Add Client button");
e.preventDefault();
Session.set('showclientDialog' , true);
}
});
template.shedule.showclientDialog = function(){
return Session.get('showclientDialog');
}
I believe this should work for you:
template:
added an if block to check the session variable
<template name="shedule">
<button class="btn btn-success addClients">Add Client</button>
{{#if showclientDialog}}
<div class="clientDialogue">Client Dialoge</div>
{{/if}}
</template>
Js code:
fixed the event map to check for correct selector
Session.setDefault('showclientDialog', false);
Template.shedule.events({
'click .addClients':function(e,t){
console.log("You pressed Add Client button");
e.preventDefault();
Session.set('showclientDialog' , true);
}
});
Template.shedule.showclientDialog = function(){
return Session.get('showclientDialog');
}
Related
I want to show a button in my template which is shown or not dependent on a session value being true or false. However when I want to set the session to false in events it does not happen:
<template name="Home">
{{#if reload}}
<a class="btn btn-primary fontScale reloadBtn" href="#" id="reload"><i class="fa fa-refresh fa-lg"></i> Reload</a>
{{/if}
</template>
Template.Home.helpers({
reload: function(){
.........
(imgCount1 > imgCount) ? Session.set('more',true):Session.set('more', false);
return Session.get('more');
}
});
Template.Home.events({
......
"click #reload": function(){
Session.set('more', false);
}
});
How can I set the session variable back to false after the button had been clicked?
I guess your helper is keeping the session variable to true. When you click the button, you are setting the session variable, but not the image count.
If that's the case, just put some logging in both the click event and on the helper, and you might see one overwriting the value from the other.
I am new to Meteor this is how I kept the button in html file.
<input type="button" class="number" value="1">
<input type="button" class="number" value="2">
<input type="button" class="number" value="3">
How to get the value of these buttons in the js file.
Any one help me.
Thanks in advance.
Get the value using an event:
'click .number': function(event, template) {
console.log(event.currentTarget.value);
}
Or plain Jquery:
$($('.number')[0]).val()
$($('.number')[1]).val()
$($('.number')[2]).val()
well to determine which buttons get clicked you can simply use event handlers for your template. And its very important to know that the buttons are identified through their class names. Therefor you have to choose unique classnames.
For example if you have the buttons inside a template called template1 you just do the following:
//in your .html inside your template1
<button class="button1">Button1</button>
<button class="button2">Button2</button>
<button class="button3">Button3</button>
and the corresponding JS:
//in your clientside JS
Template.template1.events({
"click.button1": function () {
//exec code when button1 clicked
//[...]
},
"click.button2": function () {
//exec code when button2 clicked
//[...]
},
"click.button3": function () {
//exec code when button3 clicked
//[...]
}
});
if your buttons aren't in an template, but just inside your just use the area as template. for example Template.body.events will handle events in your body.
Can be done like below:
Template.TemplateName.events({
'click .number': function (event,template) {
return event.target.value;
}
});
One template have button and another template have contains one text field.When ever button clicked that text filed append to the button template at the same time not remove the previous text fields that means the button clicked in 4 times 4 text fields add to the button template.
See the following code :
HTML Code :
<head>
<title>hello</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
<template name="hello">
Add Text Fields here :
<button>add another text box</button>
</template>
<template name="home">
<input type="text" id="name" />
</template>
JS Code :
if (Meteor.isClient) {
Template.hello.events({
'click button': function () {
//Here to write append logic
}
});
}
I didn't get any idea about this.So please suggest me what to do for this?
Use a client side only collection. Clicking adds a new record. Then in home template you loop on this. new Meteor.Collection(null) the null will tell it that it is local only and won't actually create the collection in the MongoDB.
if (Meteor.isClient) {
var buttonClicks = new Meteor.Collection(null),
clickCounter = 0;
Template.hello.events({
'click button': function () {
buttonClicks.insert({click: clickCounter++});
}
});
Template.home.helpers({
clicks: function () {
return buttonClicks.find({});
}
});
}
<template name="home">
{{#each clicks}}
<input type="text" id="name_{{click}}" />
{{/each}}
</template>
Instead of selecting an item first and then using a button to perform some action on the selected item I would prefer for the user to perform one click.
It seems to work but I have concerns that the event on the button must occur after the event on the carpool_event. This just doesn't seem right. Is there a better way to handle this? Thanks!
in my HTML
<template name="carpool_list">
<h1>Carpool</h1>
{{#each carpool_events}}
<ul>
{{> carpool_event}}
</ul>
{{else}}
No events yet.
{{/each}}
</template>
<template name="carpool_event">
<div class="carpool_event">
<span class="localDate">{{localDate}}</span>
<span class="owner">{{owner}}</span>
{{#if currentUser}}
<span><input type="button" class="takeEvent" value="Take Event"/></span>
{{/if}}
</div>
</template>
corresponding js
Template.carpool_event.events({
'click': function () {
Session.set("selected_carpool_event", this._id);
}
});
Template.carpool_list.events({
/**
* Take Event Handler
*/
'click .takeEvent': function () {
console.log("Take event:"+Session.get("selected_carpool_event"));
}
});
You could try this:
Template.carpool_event.events({
"click": function () {
Session.set("selected_carpool_event", this._id);
if($(event.target).attr("class") == "takeEvent" && Meteor.userId) {
console.log("Take event:"+this._id);
}
}
});
or if you want both clicks for some other reason or you can avoid having capturing the first click you could target the button directly, this._id should work on the button too (you can assign a handler to the same template carpool_event for a button anywhere inside the template)
Template.carpool_event.events({
/**
* Take Event Handler
*/
"click .takeEvent": function () {
Session.set("selected_carpool_event", this._id);
if(Meteor.userId) {
console.log("Take event:"+this._id);
}
}
});
I'm trying to reuse some control elements in my Meteor app. I'd like the following two templates to toggle visibility and submission of different forms.
<template name='addControl'>
<img class='add' src='/images/icon-plus.png' />
</template>
<template name='okCancelControl'>
<img class='submit' src='/images/icon-submit.png' />
<img class='cancel' src='/images/icon-cancel.png' />
</template>
I'll call these templates in another:
<template name='insectForm'>
{{#if editing}}
<!-- form elements -->
{{> okCancelControl}}
{{else}}
{{> addControl}}
{{/if}}
</template>
editing is a Session boolean.
What's a good way to wire up the controls to show, hide and "submit" the form?
The main problem is finding the addInsect template (where the data is) from the control templates (where the "submit" event fires). Here's what I did:
First, the controls:
<template name='addControl'>
<section class='controls'>
<span class="add icon-plus"></span>
</section>
</template>
<template name='okCancelControl'>
<section class='controls'>
<span class="submit icon-publish"></span>
<span class="cancel icon-cancel"></span>
</section>
</template>
Now the javascripts. They simply invoke a callback when clicked.
Template.addControl.events({
'click .add': function(event, template) {
if (this.add != null) {
this.add(event, template);
}
}
});
Template.okCancelControl.events({
'click .cancel': function(event, template) {
if (this.cancel != null) {
this.cancel(event, template);
}
},
'click .submit': function(event, template) {
if (this.submit != null) {
this.submit(event, template);
}
}
});
I then connected the callbacks using handlebars' #with block helper.
<template name='addInsect'>
{{#with controlCallbacks}}
{{#if addingInsect}}
<section class='form'>
{{> insectErrors}}
<label for='scientificName'>Scientific Name <input type='text' id='scientificName' /></label>
<label for='commonName'>Common Name <input type='text' id='commonName' /></label>
{{> okCancelControl}}
</section>
{{else}}
{{> addControl}}
{{/if}}
{{/with}}
</template>
And the corresponding javascript that creates the callbacks relevant to this form.
Session.set('addingInsect', false);
Template.addInsect.controlCallbacks = {
add: function() {
Session.set('addingInsect', true);
Session.set('addInsectErrors', null);
},
cancel: function() {
Session.set('addingInsect', false);
Session.set('addInsectErrors', null);
},
submit: function() {
var attrs, errors;
attrs = {
commonName: DomUtils.find(document, 'input#commonName').value,
scientificName: DomUtils.find(document, 'input#scientificName').value
};
errors = Insects.validate(attrs);
Session.set('addInsectErrors', errors);
if (errors == null) {
Session.set('addingInsect', false);
Meteor.call('newInsect', attrs);
}
}
};
Template.addInsect.addingInsect = function() {
Session.get('addingInsect');
};
Template.addInsect.events = {
'keyup #scientificName, keyup #commonName': function(event, template) {
if (event.which === 13) {
this.submit();
}
}
};
In the submit callback I had to use DomUtils.find rather than template.find because template is an instance of okCancelControl, not addInsect.
You can use Session for this. You Just need a template helper that returns a boolean flag that indicates whether you are editing the form fields. And manipulate the DOM based on the Session value set by this template helper.
Assume you have one text input, now when you are entering text in it, set the Session flag as true. This will trigger the helper to return true flag, Based on that, one of your two templates will be rendered in the DOM.
The isEditing is the helper that triggers whenever you change the Session value.
This helper function is the main part here, it returns true/false based on the session value you have set.
Template.insectForm.isEditing = function(){
if(Session.get('isEditing')){
return true;
}
else{
return false;
}
}
Remember to set the Session to false at the start-up as:
$(document).ready(function(){
Session.set('isEditing', false);
})
This will render the default add template in the html, Now when you click on ADD, you need to display another template, for that, set Session to true as:
'click .add' : function(){
Session.set('isEditing', true);
}
Accordingly when you click on CANCEL, set the session to false, this will make the isEditing to return false and the default add template will be displayed.
So your complete html will look something like this:
<template name='insectForm'>
{{#if isEditing}}
<!-- form elements -->
<input type="text" id="text" value="">
{{> okCancelControl}}
{{else}}
{{> addControl}}
{{/if}}
</template>
<template name='addControl'>
<img class='add' src='/images/icon-plus.png' />
</template>
<template name='okCancelControl'>
<img class='submit' src='/images/icon-submit.png' />
<img class='cancel' src='/images/icon-cancel.png' />
</template>
[UPDATE]
To get the instance of the template, you'll need to pass the additional parameter in the event handler that represents the template.
So update your event handler as:
Template.insectForm.events = {
'click .submit' : function(event, template){
//your event handling code
}
}
The parameter template is the instance of the template from which the event originates.
Note that, although the event fires form the image that is inside the okCancelControl template, the parameter will still contain the instance of the insectForm template. This is because we are calling the event handler as Template.insectForm.events = {} .
Also see this answer for template instances.