Routing not happening in iron-router - meteor

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'})

Related

What action to be used to move woocommerce qty box below product price - if at all possible?

The code in the woocommerce single product look like this (Astra theme):
<div class="summary entry-summary">
<h1 class="product_title entry-title">Woocommerce Product</h1><p class="price"><del><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">kr</span> 499</bdi></span></del> <ins><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">kr</span> 374</bdi></span></ins></p>
<form class="variations_form cart" action="https://www.mydomain.no/product/hoodie/" method="post">
<!-- I WANT TO MOVE IT UP HERE //-->
<table class="variations" cellspacing="0">
<tbody>
<tr>
<td class="label"><label for="pa_color">Color</label></td>
<td class="value">
<select id="pa_color" class="" name="attribute_pa_color"></select>
</td>
</tr>
<tr>
<td class="label"><label for="logo">Size</label></td>
<td class="value">
<select id="pa_color" class="" name="attribute_pa_size"></select>
</td>
</tr>
</tbody>
</table>
<div class="single_variation_wrap">
<div class="woocommerce-variation single_variation" style="display: none;"></div><div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-disabled">
<!-- I WANT TO MOVE THIS PART //-->
<div class="quantity buttons_added">
-
<label class="screen-reader-text" for="quantity_5ff4ee9846565">Woocommerce Product quantity</label>
<input type="number" id="quantity_5ff4ee9846565" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Quantity" size="4" placeholder="" inputmode="numeric">
+
</div>
<!-- EOF -- I WANT TO MOVE THIS PART //-->
<button type="submit" class="single_add_to_cart_button button alt disabled wc-variation-selection-needed">Buy Now</button>
<input type="hidden" name="add-to-cart" value="81">
<input type="hidden" name="product_id" value="81">
<input type="hidden" name="variation_id" class="variation_id" value="0">
</div>
</div>
</form>
As you can see in my HTML comments, I want to separate the quantity input including the plus and minus buttons from the add-to-cart button, and then move that entire div to the first element of the form.
Is this at all possible using functions.php or jquery, or both - without changing the theme file?
Any suggestion will be appreciated.

can't bind list to ngModel

<tbody>
<tr *ngFor="let detaile of itemlist">
<td>
<div class="d-flex align-items-center">
<div class=" d-inline-block">
{{detaile.SizeID}}
{{detaile.Size}}
{{detaile.Price}}
<select class="custom-select form-control" id="detaile.SizeID" [(ngModel)]="detaile.SizeID" (change)="selectedSizeHandler($event)" name="sizeItem1" >
{{detaile.SizeID}}
<option value="0">Choose Size</option>
<option *ngFor="let size of sizes" [value]="size.ID">{{size.Name}}</option>
</select>
<!-- <input type="text" [value]="detaile.SizeID"> -->
</div>
<div class=" d-inline-block">
<input type="number" id="detaile.SizeID" [(ngModel)]="detaile.Price" name="picee" class=" form-control" name="price11" min="0" placeholder="Price" />
</div>
</div>
</td>
</tr>
</tbody>
When trying to bind the itemList to set each dropdownlist item, it only set the last object in the ngModel to all dropdownlist

Table row disappears when the edit button is clicked

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!');
}
});

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.

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