I am trying to migrate from router to iron-router but having a problem with my entire page not rendering correctly. The only template that is rendering is what is produced from the "> yield". Any of the other code in my HTML, file is not rendered.
I would like everything on the page to remain static. But I want the template in yield to change based on the url. What am I missing in the configuration to make it behave that way?
HTML:
<head>
<title>carpool</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrap">
{{> page}}
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
{{> header}}
</div>
<div class="row-fluid">
<div class="span10">
<template name="mainContent">
{{> yield}}
</template>
</div>
<div class="span2">
{{#if currentUser}}
{{> leaderboard}}
{{/if}}
</div>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
{{> footer}}
</div>
</div>
</body>
<template name="page">
{{#if showAddEventDialogue}}
{{> addEvent}}
{{/if}}
{{#if showConfigLoginService}}
{{> configureLoginService}}
{{/if}}
{{#if showCalendarEventDetailsDialogue}}
{{> calendarEventDetailsDialogue}}
{{/if}}
</template>
JS:
/* Only execute if this is the client */
if (Meteor.isClient) {
// Client subscriptions
Meteor.subscribe('allCarpoolEvents');
Meteor.subscribe('allCarpoolDebts');
Meteor.subscribe('allUsers');
// Do not render the <body>
Router.configure({
autoRender: true
});
// Define Routes
Router.map(function () {
this.route('calendar', {
path:'/calendar*',
template: 'mainContent',
layoutTemplate: 'calendar'
});
this.route('list', {
path:'/list*',
template: 'mainContent',
layoutTemplate: 'list'
});
});
}
The biggest key I was missing is that iron-router replaces the <body> of your document. Moving my template out of the <body> of the HTML document makes it work. Here is the corrected code:
HTML:
<head>
<title>carpool</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
<template name="mainContent">
<div id="wrap">
{{> page}}
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
{{> header}}
</div>
<div class="row-fluid">
<div class="span10">
{{> yield}}
</div>
<div class="span2">
{{#if currentUser}}
{{> leaderboard}}
{{/if}}
</div>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
{{> footer}}
</div>
</div>
</template>
<template name="page">
{{#if showAddEventDialogue}}
{{> addEvent}}
{{/if}}
{{#if showConfigLoginService}}
{{> configureLoginService}}
{{/if}}
{{#if showCalendarEventDetailsDialogue}}
{{> calendarEventDetailsDialogue}}
{{/if}}
</template>
JS:
/* Only execute if this is the client */
if (Meteor.isClient) {
// Client subscriptions
Meteor.subscribe('allCarpoolEvents');
Meteor.subscribe('allCarpoolDebts');
Meteor.subscribe('allUsers');
Router.configure({
autoRender: true
});
// Define Routes
Router.map(function () {
this.route('calendar', {
path:'/',
template: 'calendar',
layoutTemplate: 'mainContent'
});
this.route('calendar', {
path:'/calendar*',
template: 'calendar',
layoutTemplate: 'mainContent'
});
this.route('list', {
path:'/list*',
template: 'list',
layoutTemplate: 'mainContent'
});
});
}
Related
I am quite new to Lighting Web Component. However, I have some experience with other component base frameworks.
I'm creating a button for each item and when the button is clicked for each item. It applies to all items. In other words, when one clicks 'Extend' it is meant to show a date input for that specific item but it shows too all of them. This is how my code looks like:
<template>
<template if:true={subscriptionData}>
<template for:each={subscriptionData} for:item="subscriptionItem">
<div key={subscriptionItem.Id}>
<div>
<div class="slds-grid slds-gutters slds-grid_vertical-align-center">
<div class="slds-col custom-card-title-container">
<h2 class="custom-title">{subscriptionItem.SBQQ__ProductName__c}</h2>
</div>
<div class="slds-col button-custom">
<lightning-button label="Extend" title="Non-primary action" onclick={handleShowEditEndDate} class="slds-m-right_none custom-margin"></lightning-button>
</div>
</div>
<div class="slds-grid slds-m-top_xx-small">
<div class="slds-col">
<div class="slds-grid slds-grid_vertical">
<div class="slds-col slds-m-bottom_xx-small">
<span>Start Date</span>
</div>
<div class="slds-col">
<span>{subscriptionItem.SBQQ__StartDate__c}</span>
</div>
</div>
</div>
<div class="slds-col">
<div class="slds-grid slds-grid_vertical">
<div class="slds-col slds-m-bottom_xx-small">
<span>End Date</span>
</div>
<div class="slds-col">
<span>{subscriptionItem.SBQQ__EndDate__c}</span>
</div>
</div>
</div>
<div class="slds-col">
<div class="slds-grid slds-grid_vertical">
<div class="slds-col slds-m-bottom_xx-small">
<span>Quantity</span>
</div>
<div class="slds-col">
<span>{subscriptionItem.SBQQ__Quantity__c}</span>
</div>
</div>
</div>
</div>
<template if:true={showEditField}>
<lightning-layout multiple-rows class="slds-m-top_xx-small">
<lightning-layout-item size="8">
<lightning-input
type="date"
name="endDateInput"
label="End Date"
variant="label-inline"
>
</lightning-input>
</lightning-layout-item>
</lightning-layout>
</template>
<hr class = "custom-line">
</div>
</div>
</template>
</template>
export default class ExtendCPQSubscriptionLWC extends LightningElement {
#api recordId;
#track subscriptionData;
#track columns = columns;
showEditField = false
#wire(getSubscriptionsLWC, { recordId: '$recordId'})
loadFoundSubscriptions({error, data}) {
if (data) {
console.log('OK');
console.log(data);
this.subscriptionData = data;
} else if (error) {
console.log('ERR ' + JSON.stringify(error));
}
}
I would appreciate any input thanks in advance.
You have common showEditField used to control visibility/addition of date input. My recommendation is to move that information inside subscriptionData and update the track variable. This would trigger re-render of UI and only show that field for item, for which Extend button was clicked
Does any one know how to make a conditional hide with amp-selector in email? on buttons like these? So I have 3 of these buttons next to each other, menu 1, menu 2 and menu 3. So if I click menu1, I only want the content to show that links to menu 1.. If I click menu2 I want to only show the content from menu2 and so forth.
<table>
<tr>
<th on="tap:menu1.hide;tap:menu1.toggleVisibility" class="bg-indigo-500 hover:bg-indigo-600 rounded" style="mso-padding-alt: 12px 48px;">
<a class="block text-white text-sm leading-full py-12 px-48 no-underline">Menu 1</a>
</th>
</tr>
</table>
<amp-selector id="menu1" layout="container" hidden>
<amp-selector id="hide1" layout="container" name="single_image_select" >
<ul>
<li>
<p option="1" select> MENU1 </p>
</li>
<li>
<p option="2" hidden> HEJ2 </p>
</li>
<li option="na" disabled>None of the Above</li>
</ul>
</amp-selector>
</amp-selector>
You can use actions and events in AMP Email to achieve this. See this URL for detail.
Below is a tested code for the same:
<!doctype html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp4email-boilerplate>body{visibility:hidden} </style>
<style amp-custom>
/* any custom styles go here. */
.hideme {
visibility:hidden
}
</style>
</head>
<body>
<button value="menu1" on="tap:menu1.toggleVisibility,menu2.hide,menu3.hide">menu1</button>
<button value="menu1" on="tap:menu2.toggleVisibility,menu1.hide,menu3.hide">menu2</button>
<button value="menu1" on="tap:menu3.toggleVisibility,menu1.hide,menu2.hide">menu3</button>
<div id="menu1">
<h3>
Menu1
</h3>
<amp-list
width="auto"
height="100"
layout="fixed-height"
src="https://preview.amp.dev/static/inline-examples/data/amp-list-urls.json"
>
<template type="amp-mustache">
<div class="url-entry">
{{title}}
</div>
</template>
</amp-list>
</div>
<div id="menu2" hidden>
<h3>
Menu2
</h3>
<amp-list
width="auto"
height="100"
layout="fixed-height"
src="https://preview.amp.dev/static/inline-examples/data/amp-list-urls.json"
>
<template type="amp-mustache">
<div class="url-entry">
{{title}}
</div>
</template>
</amp-list>
</div>
<div id="menu3" hidden>
<h3>
Menu3
</h3>
<amp-list
width="auto"
height="100"
layout="fixed-height"
src="https://preview.amp.dev/static/inline-examples/data/amp-list-urls.json"
>
<template type="amp-mustache">
<div class="url-entry">
{{title}}
</div>
</template>
</amp-list>
</div>
</body>
</html>
Working Example in AMP Playground
Hi I have a forgot password link on login page, but while clicking it does not redirect to the specified page.
//login.html
<div ng-controller="forgotPasswordController"><h6 class="forget-password"><a ng-click="forgetPassword()">Forgot Password ?</a></h6></div>
//app.js
.state('forgotpassword', {
url: '/forgotpassword',
templateUrl: 'templates/forgotpassword.html',
controller: 'forgotPasswordController'
})
//Controller.js
app.controller('forgotPasswordController',function($scope,$state,$location,for gotPasswordService,$ionicLoading,Flash, $http, $ionicPopup, sessionService)
{
$scope.data = {};
$scope.userDetails = sessionService.get('userDetails');
$scope.forgetPassword = function() {alert("qqq");
$state.go('forgotpassword');
//$location.path( "/forgotpassword" );
//$location.url('/forgotpassword');
}});
Please anyone can assist me what is the issue with this. I have spent lots of time for this
Thanks in advance
instead of calling the function in html page use this. it will use your angular routing.
app.js
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginController'
})
.state('forgotPassword', {
url: '/forgotPassword',
templateUrl: 'forgotpassword.html',
controller: 'forgotPasswordController'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
})
LoginController.$inject = ['$scope', '$state'];
function LoginController($scope, $state) {
$scope.Login = function () {
$state.go('login');
}
}
angular.module('starter').controller('LoginController', LoginController);
forgotPasswordController.$inject = ['$scope', '$state'];
function forgotPasswordController($scope, $state) {
}
angular.module('starter').controller('forgotPasswordController', forgotPasswordController);
forgotPassword.html
html code
<ion-view view-title="Forgot Password">
<ion-content ng-controller="forgotPasswordController">
test
</ion-content>
</ion-view>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-stable nav-title-slide-ios7"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
login.html
<ion-view view-title="login">
</ion-header-bar>
<ion-content class="has-header" ng-controller="LoginController">
<div class="hero no-header flat">
<div class="content">
<div class="app-icon"></div>
</div>
</div>
<br/>
<form name="signinForm" novalidate="" class="login" ng-submit="login(signinForm)">
<div class="col col-center">
<div class="list list-inset1">
<label class="item item-input item-select slct-spc" ng-class="{ 'has-error' : signinForm.userrole.$invalid && signinForm.$submitted, 'valid-lr' : signinForm.userrole.$valid && signinForm.$submitted}">
<span class="item item-input item-select1"> <i class="icon ion-ios-people login-icon" style="color:white"></i></span>
</label>
<div class="form-errors" ng-show="signinForm.userrole.$error && signinForm.$submitted" ng-messages="signinForm.userrole.$error">
<div class="form-error" ng-message="required">This field is required</div>
</div>
<label class="item item-input input-field" ng-class="{ 'has-error' : signinForm.username.$invalid && signinForm.$submitted, 'valid-lr' : signinForm.username.$valid && signinForm.$submitted}">
<i class="icon ion-person-stalker login-icon"></i> <input type="text" name="username" placeholder="Email/Mobile" ng-model="data.username" ng-minlength="10" ng-maxlength="40" maxlength="40" required>
</label>
<div class="form-errors" ng-show="signinForm.username.$error && signinForm.$submitted" ng-messages="signinForm.username.$error">
</div>
<label class="item item-input input-field" ng-class="{ 'has-error' : signinForm.password.$invalid && signinForm.$submitted, 'valid-lr' : signinForm.password.$valid && signinForm.$submitted}">
<i class="icon ion-locked login-icon"></i> <input type="password" name="password" placeholder="Password" ng-model="data.password" ng-minlength="1" ng-maxlength="15" required>
</label>
<div class="form-errors" ng-show="signinForm.password.$error && signinForm.$submitted" ng-messages="signinForm.password.$error">
</div>
</div>
</div>
<div class="clear"></div>
<div class="padding">
<button style="background-color:red;" class="button button-full button-assertive ink" type="submit">Login</button>
</div>
<h6 class="forget-password">Forgot Password ?</h6>
</form>
</ion-content>
</ion-view>
I need help with bootstrap datepicker
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>
The code works, however it shows date instead of time.
You need to edit the format option to show time only:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm'
});
});
</script>
</div>
</div>
$(document).ready(function(){
$("#datetimepicker").datetimepicker({
pickDate: false,
minuteStep: 15,
pickerPosition: 'bottom-right',
format: 'HH:ii p',
autoclose: true,
showMeridian: true,
startView: 1,
maxView: 1,
});
$(".datetimepicker").find('thead th').remove();
$(".datetimepicker").find('thead').append($('<th class="switch">').text('Pick Time'));
$('.switch').css('width','190px');
});
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet">
</head>
<body>
<div class="form-group">
<input class="form-control" type="text" id="datetimepicker" readonly>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
</body>
</html>
this works in my application:
$("#datetimepicker").datetimepicker({format: 'HH:mm:ss', pickDate:false });
You should try this
<div class="well">
<div id="datetimepicker3" class="input-append">
<input data-format="hh:mm:ss" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker3').datetimepicker({
pickDate: false
});
});
</script>
Add to
showSeconds:false
$('#kt_timepicker_2').timepicker({
minuteStep: 1,
format: 'HH:mm',
defaultTime: '',
showMeridian: false,
snapToStep: true,
showSeconds:false});
Download the zip file in https://www.malot.fr/bootstrap-datetimepicker/demo.php
It has the Time only picker code.
I have also copied it here
<div class="form-group">
<label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>
<div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
<input type="hidden" id="dtp_input3" value="" /><br/>
</div>
<script>
$('.form_time').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 1,
minView: 0,
maxView: 1,
forceParse: 0
});
</script>
custom forms within NetSuite require the use of field tags like NLFORM and NLCATEGORY, etc. However it's unclear to me how to incorporate these tags properly into the template of a responsive form so it works.
Here's what I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<Title>General Contact Form</Title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<style type="text/css">
h1, p {
font-family: 'Lato', sans-serif;
}
</style>
</head>
<Body>
<div class="container">
<h1>
<center>Submit a Message</center>
</h1>
<form class="form-horizontal">
<NLFORM>
<br>
<fieldset>
<legend>How Can We Help You?</legend>
<div class="form-group">
<p class="control-label col-sm-2">Type of Inquiry*</p>
<div class="col-sm-10">
<NLCATEGORY>
</div>
</div>
<div class="form-group">
<p class="control-label col-sm-2">Subject*</p>
<div class="col-sm-10"><NLTITLE> </div></div>
<div class="form-group">
<p class="control-label col-sm-2">Message*</label>
<div class="col-sm-10"><NLINCOMINGMESSAGE> </div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLFILE">File Upload</label>
<div class="col-sm-10"><NLFILE> </div></div>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<div class="form-group">
<label class="control-label col-sm-2" for="first-name">First Name*</label>
<div class="col-sm-10">
<NLFIRSTNAME></div></div>
<div class="form-group">
<label class="control-label col-sm-2" for ="NLLASTNAME">Last Name*</label>
<div class="col-sm-10"><NLLASTNAME></div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLEMAIL">E-mail*</label>
<div class="col-sm-10"><NLEMAIL> </div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLPHONE">Phone</label>
<div class="col-sm-10"><NLPHONE> </div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLCOUNTRY">Country</label>
<div class="col-sm-10"><NLCOUNTRY> </div></div>
</fieldset>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Submit"> - or -
<input type="button" value="Reset" onclick="page_reset(); return false;"></div></div>
<NLSUBSIDIARY>
<br>
<p align=center>Fields marked with an<img src="http://shopping.na2.netsuite.com/core/media/media.nl?id=35211&c=4382721&h=2eef11083f182592e0bb">are required.</p>
</form>
</Body>
</HTML>
the form fields do respond to resizing the browser window, but NetSuite is not able to properly create a record using this particular form. can anyone see what I'm doing wrong here!?
here's the form URL: http://www.boxcomponents.com/support-form
NetSuite Field Tags are controlled from within the UI; so field width is fixed and doesn't accept percentages; there are also drop-down menus which have a fixed width, which is mildly annoying. I can't seem to get the form to respond properly without removing all of NetSuite's tags.
What you'll need to do is process the form with script when it opens. Add a script tag after the </form> tag to add and remove classes from the form elements.
Also this is redundant and you'll end up with some sort of broken form:
<form class="form-horizontal">
<NLFORM>
So for instance you'd just have:
<NLFORM>
...
</form>
<script>
jQuery(function($){
$("#main_form").addClass('form-horizontal');
});
</script>