Table row disappears when the edit button is clicked - meteor

When I click the edit button, the whole row disappears, as if it was deleted, and does not go into the editMode of the template. The row comes back if you refresh the page. I have tried commenting out code to find an issue there, but that comes back clean. I have referenced other code that does work in editMode, and there is no difference. And I have tried googling.
How can I change/add to the code to get it to engage editMode?
Created using Meteor platform.
html:
<template name="SingleContact">
{{#if editMode}}
<form class="editForm">
<td class="input-field">
<input id="full_name" name="full_name" value="{{fullname}}" type="text" class="validate" />
</td>
<td class="input-field">
<input id="email" name="email" value="{{email}}" type="email" class="validate" />
</td>
<td class="input-field">
<input id="phone" name="phone" value="{{phone}}" type="tel" class="validate" />
</td>
<td class="input-field">
<input id="phone2" name="phone2" value="{{phone2}}" type="tel" class="validate" />
</td>
{{#if customerIsEnterprise}}
<td>
<p>
{{#if clientContact}}
<input type="checkbox" id="primaryContact" name="primaryContact" checked="checked" />
{{else}}
<input type="checkbox" id="primaryContact" name="primaryContact" />
{{/if}}
<label for="primaryContact">Primary Contact?</label>
</p>
</td>
{{/if}}
<td><button type="submit" class="submit waves-effect waves-light btn">Save<i class="material-icons right">done</i></button></td>
<td><a class="edit waves-effect waves-light btn red" href="#">Cancel<i class="material-icons right">delete</i></a></td>
</form>
{{else}}
<tr>
<td>{{fullname}}</td>
<td>{{email}}</td>
<td>{{phone}}</td>
<td>{{phone2}}</td>
{{#if customerIsEnterprise}}
<td>
{{#if clientContact}}
Yes
{{else}}
No
{{/if}}
</td>
{{/if}}
<td class="button-cell"><a class="edit waves-effect waves-light btn" href="#">Edit<i class="material-icons right">mode_edit</i></a></td>
<td class="button-cell"><a class="modal-trigger waves-effect waves-light btn red" href="#contactModal{{_id}}">Delete<i class="material-icons right">delete</i></a></td>
<!-- Modal Structure -->
<div id="contactModal{{_id}}" class="modal">
<div class="modal-content">
<h4>Delete Contact?</h4>
<p>Are you sure you want to delete <strong><em>{{fullname}}</em></strong> from the system permanently?</p>
</div>
<div class="modal-footer">
Close
Confirm
</div>
</div>
</tr>
{{/if}}
</template>
js:
Template.SingleContact.onCreated(function(){
this.editMode = new ReactiveVar(false);
Blaze._allowJavascriptUrls();
});
Template.SingleContact.onRendered(function(){
$('.modal-trigger').leanModal();
});
Template.SingleContact.helpers({
editMode: function(){
return Template.instance().editMode.get();
}
});
Template.SingleContact.events({
//delete contact
'click .delete'(event){
event.preventDefault();
Meteor.call("removeContact", this._id);
sAlert.error('Contact removed successfully!');
},
//engage edit mode
'click .edit': function(event, template){
event.preventDefault();
template.editMode.set(!template.editMode.get());
},
//edit autosave function
'submit .editForm'(event, template){
event.preventDefault();
const target = event.target;
id = this._id;
const editName = target.full_name.value;
const editEmail = target.email.value;
const editPhone = target.phone.value;
const editPhone2 = target.phone2.value;
if(target.primaryContact){
let isChecked = target.primaryContact.checked;
}else{
isChecked = false;
}
Meteor.call("updateContactInfo", id,editName,editEmail,editPhone,editPhone2,isChecked);
template.editMode.set(!template.editMode.get());
sAlert.success(editName + ' updated successfully!');
}
});

Related

Handlebars if/else not working even if the statement is true

Why can't Handlebars check if the Custom Claims Admin is true it automatically goes to the else statement even though the statement for the custom claims is true. Photo of the CustomClaims attached.
{{#each listusersarray}}
<tr>
<td>{{email}}</td>
<td>{{metadata.lastSignInTime}}</td>
<td>{{#if metadata.customClaims.admin}}Admin{{else}}User{{/if}}</td>
<td>
{{!-- <input type="hidden" value="{{uid}}" id="user-uid"> --}}
{{#if disabled}}
<button class="btn btn-success " type="button" onclick="enableaccountFunction('{{uid}}')">Enable Account</button>
{{else}}
<button class="btn btn-danger " type="button" onclick="disableaccountFunction('{{uid}}')">Disable Account</button>
{{/if }}
<input type="hidden" value="{{email}}" id="admin-email">
<button class="btn btn-primary " onclick="makeadminFunction('{{uid}}')">Make Admin</button>
</td>
</tr>
{{/each}}
my bad customClaims is not under metadata thats why it is undefined its only customClaims.admin

collection.findOne() return the same value for each item of a table

I know my question is kind of stupid one but i am stuck.
I have a table of Contracts, each row have a update button ;
when i click on that button, a modalthat contain the contract edit form is shown.
All work fine but my problem that the modal show the same contract for each row.
For more description this is a screenshot
and this one for the modal
this is my template helper
Template.ContractsList.helpers({
lists: function() {
Meteor.subscribe('listsMethod');
return Contracts.find({});
},
list: function() {
return Contracts.findOne();
}
});
and this is my Template event
Template.ContractsList.events({
'click #editContract'(event) {
$("#showModal").modal("show");
console.log( Contracts.findOne({_id: this._id}) );
},
'click #hideModal'(event) {
$("#showModal").modal("hide");
},
});
and this is my Template
<template name="ContractsList">
<div class="modal fade" id="showModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">edit</h4>
</div>
<div class="modal-body">
<div class="card-body">
{{#with list}}
<div class="form-group">
<label class="select">Name</label>
<input type="text" class="form-control" aria-describedby="emailHelp" value={{name}} />
</div>
<div class="form-group">
<label >Package</label>
<div >
<select id="role" name="select" class="form-control" >
<option value="package" selected disabled hidden >{{package}}</option>
<option value="freemium">freemium</option>
<option value="bronze">bronze</option>
<option value="silver">silver</option>
<option value="gold">gold</option>
<option value="platium">platium</option>
</select>
</div>
</div>
{{/with}}
</div>
</div>
<div class="modal-footer">
<Button class="primary" >Create contact</Button>
<Button class="secondary" id="hideModal">Cancel</Button>
</div>
</div>
</div>
</div>
<div class="breadcrumb">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Package Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{{#each lists}}
<tr>
<td>
{{name}}
</td>
<td>
{{package}}
</td>
<td>
<Button class="btn btn-outline-primary" id="editContract"><img src="../../../../../img/icons/addcontact-icon.png" /></Button>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</template>
in my console log of the template event , i got the data correctly as i want
{_id: "Qu8pTSzLDLGKRNRzd", name: "ilyes", package: "bronze"} {_id:
"w7NDzerxivAjhK3dy", name: "ee", package: "freemium"}
what should i do?
In your click handler set a Session variable (or a reactiveVar) and then use it in your list helper:
Event handler:
'click #editContract'(event) {
$("#showModal").modal("show");
console.log( Contracts.findOne({_id: this._id}) );
Session.set('currentRecordId',this._id);
},
Helper:
list() {
return Contracts.findOne(Session.get('currentRecordId');
}

Booststrap form doesn't work

Please I'm trying to use bootstrap to change my website look however when I try to change the form of my login page it seems to load when i click on submit, but does nothing. Any help !!
Old code :
<form method="post" name="login" action="">
<table align="center">
<tr><td>
<table align="center">
<tr>
<td align="right"><font face="Arial,Helvetica" size="-1"><strong>Username:</strong></font></td>
<td align="left"><input type="text" name="username"></td>
</tr>
<tr>
<td align="right" width="30%"><font face="Arial,Helvetica" size="-1"><strong>Password:</strong></font></td>
<td align="left"><input type="password" name="password"></td>
</tr>
</table>
</td></tr>
<tr><td>
<center><input type="submit" name="Submit" value="Login"></center>
</td></tr>
</table>
</form>
New code :
<div class="container">
<form class="form-signin" role="form" method="post" name="login" action="">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" class="form-control" placeholder="Username" required autofocus>
<input type="password" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<!--center><input class="btn btn-lg btn-primary btn-block" type="submit" name="Submit" value="Login"></center-->
<button class="btn btn-lg btn-primary btn-block" type="submit" name="Submit" value="Login">Sign in</button>
</form>
</div> <!-- /container -->
Seems like you forgot the attribute name in the input, try this:
<div class="container">
<form class="form-signin" role="form" method="post" name="login" action="">
<h2 class="form-signin-heading">Please sign in</h2>
<input name="username" type="text" class="form-control" placeholder="Username" required autofocus>
<input name="password" type="password" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<!--center><input class="btn btn-lg btn-primary btn-block" type="submit" name="Submit" value="Login"></center-->
<button class="btn btn-lg btn-primary btn-block" type="submit" name="Submit" value="Login">Sign in</button>
</form>
</div> <!-- /container -->
<form method="post" name="login" action="">
Did you intentionally leave action blank? Without an action for it to post to, of course it's going to do nothing.

Routing not happening in iron-router

I have updated meteor project to 0.8.0 and have installed iron-router package. Did everything that is required but routing not happening. It is showing the front page i.e I am able to login into the application. But after that not able to go to any of the pages. My homepage have so many buttons as can be seen in header.html file. When I clicked on grumble link, in url it is displaying that "localhost:3000/grumble". But nothing is getting displayed on that form.
--> My router.js page is:
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function() {
this.route('issues', {path:'/'});
this.route('issues', {path:'/issues'});
this.route('closedIssues', {path:'/closedIssues'});
this.route('subscribedKeywords', {path:'/subscribedKeywords'});
//this.route('grumble');
//this.route('grumble2');
this.route('grumble', {path:'grumble'});
this.route('grumble2', {path:'grumble2'});
this.route('issuePage', {
path:'/issues/:_id',
data: function() {Session.set('currentIssueId', this.params); }
});
this.route('closedIssuePage', {
path:'/closedIssues/:_id',
data: function() { Session.set('currentClosedIssueId', this.params); }
});
});
var requireLogin = function() {
if ( Meteor.user())
this.render(this.params);
else if (Meteor.loggingIn())
this.render('loading');
else
this.render('accessDenied');
this.stop();
}
var clearErrors = function() {
clearErrors();
this.render(this.params);
this.stop();
}
Router.onBeforeAction(requireLogin, {only: 'grumble'});
Router.onBeforeAction(clearErrors);
--> Header.html file is from where grumble.html has been called meas href is present in this page to transfer the control:
<template name="header">
<header class="navbar">
<p>inside header.html</p>
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-coll
apse">
</a>
<a class="details btn" href="{{pathFor 'grumble'}}">Grumble</a>
{{#if currentUser}}
<a class="details btn" href="{{issuesPath}}">See Issues</a>
<a class="details btn" href="{{closedIssuesPath}}">Closed Issues</a>
<a class="details btn" href="{{subscribedKeywordsPath}}">Watchlist</a>
{{> notifications}}
{{/if}}
<span class="nav pull-right">
<li>{{> loginButtons}}</li> <!--should be {{> }} here in order to display login functionality-->
</span>
</div>
</header>
</template>
--> Grumble.html, the file to which control should be transferred means routing has been done for this page to get the control
<template name="grumble">
<p>inside form i.e. grumble.html</p>
<form class="main">
<fieldset>
<legend>New Grumble</legend>
<table border="0">
<tr>
<td>
<label class="control-label" for="shortdesc"><span style="color:red;">*</span> Description</label>
<input name="shortdesc" type="text" value="" placeholder="Radiator not working"/>
</td>
<td>
<label class="control-label" for="urgency">Urgency</label>
<select name="urgency" >
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
</td>
</tr>
<tr>
<td>
<label class="control-label" for="date">Date</label>
<input name="date" type="date" value="{{date}}" />
</td>
<td>
<label class="control-label" for="time">Time</label>
<input name="time" type="time" value="{{time}}" />
</td>
</tr>
<tr>
<td>
<label class="control-label" for="dept">Department/Building</label>
<input name="dept" type="text" value="" placeholder="Physiotherapy"/>
</td>
<td>
<label class="control-label" for="unit">Unit</label>
<input name="unit" type="text" value="" placeholder="Occupational Therapy"/>
</td>
</tr>
<tr>
<td>
<label class="control-label" for="room">Room</label>
<input name="room" type="text" value="" placeholder="P2"/>
</td>
<td>
<label class="control-label" for="category">Category</label>
<input name="category" type="text" value="" placeholder="Utility"/>
</td>
</tr>
<tr>
<td>
<label class="control-label" for="details">Details</label>
<textarea name="details" value="" placeholder="Broken radiator next to vending machine."></textarea>
</td>
<td>
<label class="control-label" for="anonymous">Anonymity</label>
<select name="anonymous" >
<option value="anonymous">Anonymous</option>
<option value="identifiable">Identifiable</option>
</select>
</td>
</tr>
</table>
<div class="control-group">
<div class="controls">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
</fieldset>
</form>
</template>
<template name="grumble2">
<form class="main">
<fieldset>
<legend>New Grumble</legend>
<table border="0">
<tr>
<td>
<label class="control-label" for="details"><span style="color:red;">*</span> Description</label>
<textarea name="details" value="" placeholder="Broken radiator next to vending machine."></textarea>
</td>
</tr>
</table>
<div class="control-group">
<div class="controls">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
</fieldset>
</form>
</template>
Please help me where I am wrong as have read the article : http://www.manuel-schoebel.com/blog/iron-router-tutorial. And tried to make changes but not working. Any pointers please.
I think the route this.route('issues', {path:'/issues'}); overwrites the route this.route('issues', {path:'/'}); (they have the same name!), so you have no route for /. Try changing name on one of them, and see if that makes a different.
You're missing a "/" in front of your grumble route path. It should be this.route('grumble', {path:'/grumble'})

how to make table visible using radio button?

as i am new in html, css, php so i am facing so many problems in completing a small project.So please don't mind. I've included a screen shot. Problem is that whenever i click radio button 'Yes' then only the input text fields of corresponding table should work. If i select the button 'No' then the text fields should be hidden i.e it will not take any input and i should be able to proceed without filling up the table. Thanks in advance.
.html
<body>
<form action="reg2.php" method="post">
<div id="formWrap">
<div class="row">
<div class="label1" style="color:#0000CC; text-align:center; font-size:30px">B.E. Degree Course Registration</div>
</div> <!-- end of 0th row -->
<div id="form">
<div class="row">
<div class="labelusn1">USN</div>
<div class="inputusn">
<input type="text" id="usn" required="required" class="usndetail" name="usn"/>
</div>
</div> <!-- end of 1st row -->
<h1 style="color:#FF0000; font-style:italic; margin-left:55px; font-size:18px">Courses Dropped/Withdrawn/Failed in Previous Year:</h1>
<div class="row>
<div class="inputradio1" style="margin-left:50px">
<input type="radio" id="radio" required="required" class="detailradio1" name="sex" Value="Yes" />Yes, I have course(s) dropped/withdrawn/failed in previous year<br/>
<input type="radio" id="sex" required="required" class="detailradio1" name="sex" value="No"/>No, I don't have course(s) dropped/withdrawn/failed in previous year<br/></div>
</div> <!-- end of row -->
<table width="719" border="1" align="center" style="margin-top:10px">
<tr bgcolor="#A7A7A7">
<td width="87"><div align="center" class="style1"> Course Code </div></td>
<td width="50"><div align="center" class="style2"> Credits</div></td>
<td width="87"><div align="center" class="style3"> Status(D/W/F)</div></td>
<td width="467"><div align="center" class="style4"> Remarks</div></td>
</tr>
<tr>
<td><input type="text" name="cc1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" name="c1" style="width:48px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" name="s1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" name="r1" style="width:465px;outline:none; border:hidden;margin:1px"/></td>
I left the rest part of the code...if necessary i will post
Your issue is solved, please check:
Simply add these scripts:
<!-- Importing jQuery Library -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!-- Applying Custom JS -->
<script type="text/javascript">
jQuery(document).ready(function ($) {
// Disabling Text Fields by default
$("table input[type='text']").each(function () {
$(this).attr("disabled", "disabled");
});
$(".inputradio1 input[name=sex]").change(function () {
var val = $(this).val();
if (val == "No") {
$("table input[type='text']").each(function () {
$(this).attr("disabled", "disabled");
});
} else if (val == "Yes") {
$("table input[type='text']").each(function () {
$(this).removeAttr("disabled");
});
}
});
});
</script>
Or checkout the fiddle here http://jsfiddle.net/kDG5t/2/
something like that http://jsfiddle.net/Z8jU3/1/ ?
$('.detailradio1').change(function(){
if($(this).attr('id')=='sex' && $(this).is(':checked')){
$('table').hide();
}else{
$('table').show();
}
})
In html part I am just defining the ID's of input box.
HTML:-
<body>
<form action="reg2.php" method="post">
<div id="formWrap">
<div class="row">
<div class="label1" style="color:#0000CC; text-align:center; font-size:30px">B.E. Degree Course Registration</div>
</div> <!-- end of 0th row -->
<div id="form">
<div class="row">
<div class="labelusn1">USN</div>
<div class="inputusn">
<input type="text" id="usn" required="required" class="usndetail" name="usn"/>
</div>
</div> <!-- end of 1st row -->
<h1 style="color:#FF0000; font-style:italic; margin-left:55px; font-size:18px">Courses Dropped/Withdrawn/Failed in Previous Year:</h1>
<div class="row>
<div class="inputradio1" style="margin-left:50px">
<input type="radio" id="radio" required="required" class="detailradio1" name="sex" Value="Yes" />Yes, I have course(s) dropped/withdrawn/failed in previous year<br/>
<input type="radio" id="sex" required="required" class="detailradio1" name="sex" value="No"/>No, I don't have course(s) dropped/withdrawn/failed in previous year<br/></div>
</div> <!-- end of row -->
<table width="719" border="1" align="center" style="margin-top:10px">
<tr bgcolor="#A7A7A7">
<td width="87"><div align="center" class="style1"> Course Code </div></td>
<td width="50"><div align="center" class="style2"> Credits</div></td>
<td width="87"><div align="center" class="style3"> Status(D/W/F)</div></td>
<td width="467"><div align="center" class="style4"> Remarks</div></td>
</tr>
<tr>
<td><input type="text" id="course_code" name="cc1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" id="credits" name="c1" style="width:48px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" id="status" name="s1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" id="remarks" name="r1" style="width:465px;outline:none; border:hidden;margin:1px"/></td>
and jquery for this is :-
$('#radio').click(function()
{
$('#course_code').removeAttr("disabled");
$('#credits').removeAttr("disabled");
$('#status').removeAttr("disabled");
$('#remarks').removeAttr("disabled");
});
$('#sex').click(function()
{
$('#course_code').attr("disabled","disabled");
$('#credits').attr("disabled","disabled");
$('#status').attr("disabled","disabled");
$('#remarks').attr("disabled","disabled");
});
If you want that all input box to be disabled on initial page load then you have to mention disabled="disabled" in all input box like this:-
rest all is same ....
You could use CSS if you just want the whole section hidden.
If you have the radio(s) on the same DOM level as a container element like a div for example:
div.formContainer {
display: none;
}
input[type=radio]#yes:checked ~ div.formContainer {
display: block;
}
The HTML would basically have something along the lines of:
<input type="radio" name="yesno" id="yes" /><label for="yes">Yes</label>
<input type="radio" name="yesno" id="no" /><label for="no">No</label>
<div class="formContainer">
<input type="text" id="input1" name="input1" value="Hello World!" />
</div>
This SHOULD mean that if "yes" is the current choice then the text input field should be visible and if yes is not the current choice then the field will be invisible.

Resources