I need to filter by zip code to show or not the following block:
<div class="form-group col-lg-12">
<div class="row">
<div class='col-sm-4'>
<div class="form-group">
<label class="control-label" for="delivery_date">Delivery Date</label>
<div class='input-group date'>
<input type='text' class="form-control" id='delivery_date' readonly="True"/>
<span class="input-group-addon" id='delivery_date_icon'>
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<t t-if="website and not website.is_customer_order_delivery_comment_feature">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<label class="control-label" for="delivery_comment">Delivery Comment</label><br/>
<textarea class="form-control" id="delivery_comment" placeholder="Write a comment..."></textarea>
</div>
</div>
</div>
</t>
</div>
I've tried putting a t-if in the first div with different variants of "partner_shipping_id.zip < 36001" but can't get it to work...
Full code:
<odoo>
<template id="customer_order_delivery_date_assets_frontend" inherit_id="website.assets_frontend">
<xpath expr="." position="inside">
<script type="text/javascript" src="/website_customer_order_delivery_date/static/src/js/website_customer_order_delivery_date.js"></script>
</xpath>
</template>
<template id="website_sale_customer_order_delivery_date" inherit_id="website_sale.payment">
<xpath expr="//div[#id='payment_method']" position="before">
<t t-if="website and not website.is_customer_order_delivery_date_feature">
<div class="mb64 row">
<div class="form-group col-lg-12">
<div class="row">
<div class='col-sm-4'>
<div class="form-group">
<label class="control-label" for="delivery_date">Delivery Date</label>
<div class='input-group date'>
<input type='text' class="form-control" id='delivery_date' readonly="True"/>
<span class="input-group-addon" id='delivery_date_icon'>
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<t t-if="website and not website.is_customer_order_delivery_comment_feature">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<label class="control-label" for="delivery_comment">Delivery Comment</label><br/>
<textarea class="form-control" id="delivery_comment" placeholder="Write a comment..."></textarea>
</div>
</div>
</div>
</t>
</div>
</div>
</t>
</xpath>
</template>
</odoo>
I have tried many combinations like this:
Related
Im having an issue with Netlify forms. I have created a multistep form with HTML and Javascript to show and hide the separate sections in the form. All the steps are in separate <div>'s and are all inside the <form>
The issue that I'm having is that in the Netlify UI where you can see the form data, all fields are showing up, but on the email notification only half the fields are being emailed.
<form
action="/"
class="form-page p-lg-5"
name="HelloVet Form"
method="POST"
data-netlify="true"
>
<input type="hidden" name="HelloVet Form" value="HelloVet Form" />
<!-- Pet 1 information form -->
<div class="p-2 p-md-5 step step1 active">
<h2 class="border-bottom">Client Information</h2>
<div class="row pt-2">
<div class="col">
<label for="FirstName" class="form-label">Name:</label>
<input
name="FirstName"
type="text"
class="form-control"
id="FirstName"
placeholder="Jane Doe"
name="FirstName"
/>
<label for="emailAddress" class="form-label">Email address</label>
<input
type="email"
class="form-control"
id="emailAddress"
placeholder="name#example.com"
name="email"
/>
<label for="street-address" class="form-label">Street:</label>
<input
type="text"
class="form-control"
id="street-address"
placeholder="123 Main Street"
name="street-address"
/>
<label for="state" class="form-label">State:</label>
<input
type="text"
class="form-control"
id="state"
placeholder="State"
name="state"
/>
</div>
<div class="col">
<label for="petReferredBy">Referred by:</label>
<select
class="form-select"
id="petReferredBy"
name="petReferredBy"
required
>
<option selected>Select One</option>
<option value="facebook">Facebook</option>
<option value="google">Google</option>
<option value="nextdoor">NextDoor</option>
<option value="internet">Internet Search</option>
<option value="instagram">Instagram</option>
<option value="grommer">Mobile Groomer</option>
<option value="instagram">Previous Client</option>
<option value="friend">Referred by Friend</option>
<option value="vet">Vet Hospital</option>
<option value="yelp">Yelp</option>
</select>
<label for="phoneNumber" class="form-label">Phone</label>
<input
type="tel"
class="form-control"
id="phoneNumber"
placeholder="(555) 555-1234"
name="phoneNumber"
/>
<label for="city" class="form-label">City:</label>
<input
type="text"
class="form-control"
id="city"
placeholder="City"
name="city"
/>
<label for="zip" class="form-label">Zip:</label>
<input
type="text"
class="form-control"
id="zip"
placeholder="Zip"
name="zip"
/>
</div>
</div>
<!-- Pet 1 information form -->
<div class="mt-5" id="pet1-info">
<h2 class="border-bottom">Pet information</h2>
<div class="row pt-2">
<div class="col">
<label for="petName">Pets Name:</label>
<input
type="text"
class="form-control"
id="petName"
placeholder="Pets Name"
name="petName"
/>
</div>
<div class="col">
<label for="breed">Breed:</label>
<input
type="text"
class="form-control"
id="breed"
placeholder="Breed"
name="breed"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="species">Species:</label>
<select class="form-select" id="species" name="species">
<option selected>Select One</option>
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
</select>
</div>
<div class="col">
<label for="gender">Gender:</label>
<select class="form-select" id="gender" name="gender">
<option selected>Select One</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="col">
<label for="spay">Neutered/Spayed:</label>
<select class="form-select" id="spay" name="spay">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="weight" class="form-label">Weight:</label>
<input
type="number"
class="form-control"
id="weight"
name="weight"
placeholder="Weight"
/>
</div>
<div class="col">
<label for="age" class="form-label">Age:</label>
<input
type="number"
class="form-control"
id="age"
name="age"
placeholder="Age"
/>
</div>
<div class="col">
<label for="birthday" class="form-label">Birthday:</label>
<input
class="form-control"
type="date"
id="birthday"
name="birthday"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="pastVet">Past Vet Clinics and/or Doctors:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="pastVet"
name="pastVet"
style="height: 100px"
></textarea>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="medRecords">Can we request records?:</label>
<select class="form-select" id="medRecords" name="medRecords">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="formFile" class="form-label"
>Pet Records - Upload:</label
>
<input
class="form-control"
type="file"
name="formFile"
id="formFile"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="reason">Reason for At-Home Care:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="reason"
name="reason"
style="height: 100px"
></textarea>
</div>
</div>
<!-- Pet 1 Additional information -->
<div class="mt-5" id="">
<h2 class="border-bottom">Additional information</h2>
<p>Temperament:</p>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="isFriendly"
id="isFriendly"
value="Checked"
/>
<label class="form-check-label" for="isFriendly">
Friendly
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willBite"
id="willBite"
value="Checked"
/>
<label class="form-check-label" for="willBite">
Will bite
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willHide"
id="willHide"
value="Checked"
/>
<label class="form-check-label" for="willHide">
Will Hide
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="needsMuzzle"
id="needsMuzzle"
value="Checked"
/>
<label class="form-check-label" for="needsMuzzle">
Needs a Muzzle
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="aggressive"
id="aggressive"
value="Checked"
/>
<label class="form-check-label" for="aggressive">
Aggressive
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="sedation"
id="sedation"
value="Checked"
/>
<label class="form-check-label" for="sedation">
Sedation
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="extraHands"
id="extraHands"
value="Checked"
/>
<label class="form-check-label" for="extraHands">
Extra hands
</label>
</div>
<div class="col"></div>
</div>
<div class="row pt-4">
<div class="col">
<label for="petPhoto" class="form-label"
>Photo - upload:</label
>
<input
class="form-control"
type="file"
id="petPhoto"
name="petPhoto"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="share">Additional information: </label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="share"
name="share"
style="height: 100px"
></textarea>
</div>
</div>
</div>
</div>
<div class="row p-3">
<p class="btn btn-primary full-width btn-add-pet">Add Pet</p>
</div>
</div>
<!-- Pet 2 information form -->
<div class="p-2 p-md-5 step step2">
<div class="mt-5" id="pet1-info">
<h2 class="border-bottom">Pet information</h2>
<div class="row pt-2">
<div class="col">
<label for="petName2">Pets Name:</label>
<input
name="petName2"
type="text"
class="form-control"
id="petName2"
placeholder="Pets Name"
/>
</div>
<div class="col">
<label for="breed2">Breed:</label>
<input
name="breed2"
type="text"
class="form-control"
id="breed2"
placeholder="Breed"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="species2">Species:</label>
<select class="form-select" name="species2" id="species2">
<option selected>Select One</option>
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
</select>
</div>
<div class="col">
<label for="gender2">Gender:</label>
<select class="form-select" name="gender2" id="gender2">
<option selected>Select One</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="col">
<label for="spay2">Neutered/Spayed:</label>
<select class="form-select" name="spay2" id="spay2">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="weight2" class="form-label">Weight:</label>
<input
type="number"
class="form-control"
id="weight2"
name="weight2"
placeholder="Weight"
/>
</div>
<div class="col">
<label for="age2" class="form-label">Age:</label>
<input
type="number"
class="form-control"
id="age2"
name="age2"
placeholder="Age"
/>
</div>
<div class="col">
<label for="birthday2" class="form-label">Birthday:</label>
<input
class="form-control"
type="date"
id="birthday2"
name="birthday2"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="pastVet2">Past Vet Clinics and/or Doctors:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="pastVet2"
name="pastVet2"
style="height: 100px"
></textarea>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="medRecords2">Can we request records?:</label>
<select class="form-select" id="medRecords2" name="medRecords2">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="formFile2" class="form-label"
>Pet Records - Upload:</label
>
<input
class="form-control"
type="file"
name="formFile2"
id="formFile2"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="reason2">Reason for At-Home Care:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="reason2"
name="reason2"
style="height: 100px"
></textarea>
</div>
</div>
<!-- Pet 1 Additional information -->
<div class="mt-5" id="">
<h2 class="border-bottom">Additional information</h2>
<p>Temperament:</p>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="isFriendly2"
id="isFriendly2"
value="Checked"
/>
<label class="form-check-label" for="isFriendly2">
Friendly
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willBite2"
id="willBite2"
value="Checked"
/>
<label class="form-check-label" for="willBite2">
Will bite
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willHide2"
id="willHide2"
value="Checked"
/>
<label class="form-check-label" for="willHide2">
Will Hide
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="needsMuzzle2"
id="needsMuzzle2"
value="Checked"
/>
<label class="form-check-label" for="needsMuzzle2">
Needs a Muzzle
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="aggressive2"
id="aggressive2"
value="Checked"
/>
<label class="form-check-label" for="aggressive2">
Aggressive
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="sedation2"
id="sedation2"
value="Checked"
/>
<label class="form-check-label" for="sedation2">
Sedation
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="extraHands2"
id="extraHands2"
value="Checked"
/>
<label class="form-check-label" for="extraHands2">
Extra hands
</label>
</div>
<div class="col"></div>
</div>
<div class="row pt-4">
<div class="col">
<label for="petPhoto2" class="form-label"
>Photo - upload:</label
>
<input
class="form-control"
type="file"
id="petPhoto2"
name="petPhoto2"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="share2">Additional information: </label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="share2"
name="share2"
style="height: 100px"
></textarea>
</div>
</div>
</div>
</div>
<div class="row p-3">
<p class="btn btn-primary full-width btn-prev-pet">Previous Pet</p>
<p class="btn btn-primary full-width btn-add-pet">Next Pet</p>
</div>
</div>
<!-- Pet 3 information form -->
<!-- Pet 4 information form -->
<!-- submit button -->
<div class="row p-md-5">
<div class="col">
<div class="row p-3">
<button
type="submit"
class="btn btn-primary full-width"
id="btn-submit"
>
Submit
</button>
</div>
</div>
</div>
</form>
const steps = Array.from(document.querySelectorAll('form .step'))
const addPetBtn = document.querySelectorAll('form .btn-add-pet')
const prevPetBtn = document.querySelectorAll('form .btn-prev-pet')
const form = document.getElementsByClassName('form-page ')
addPetBtn.forEach((button) => {
button.addEventListener('click', (e) => {
changeStep('next')
scrollTo(0, 0)
})
})
prevPetBtn.forEach((button) => {
button.addEventListener('click', () => {
changeStep('prev')
scrollTo(0, 0)
})
})
function changeStep(btn) {
let index = 0
const active = document.querySelector('form .step.active')
index = steps.indexOf(active)
steps[index].classList.remove('active')
if (btn === 'next') {
index++
} else if (btn == 'prev') {
index--
}
steps[index].classList.add('active')
scrollTo(0, 0)
}
<div class="row" style="margin: auto; max-width: 850;">
<h1 style="text-align: center">User Registration</h1>
<!-- <div class="well well-sm"><strong><span class="glyphicon glyphicon-asterisk" style="color: red"></span>Required Field</strong></div>-->
<form role="form" action="/users/addUser" method="POST">
<div class="form-group">
<div class="span6">
<div class="col-lg-4">
<div class="form-group">
<label for="InputEmail">Username</label>
<div class="input-group">
<input type="text" style="width: 180%" class="form-control" id="username" name="username" placeholder="username" required>
<!--
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
-->
</div>
</div>
</div>
</div>
<div class="span6">
<div class="col-lg-4">
<div class="form-group">
<label for="InputEmail">Password</label>
<div class="input-group">
<input type="password" style="width: 180%" class="form-control" id="password" name="password" placeholder="password" required>
<!--
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
-->
</div>
</div>
</div>
</div>
<!--
<div class="form-group">
<label for="InputMessage">Enter Message</label>
<div class="input-group">
<textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info float-xs-right">-->
<div class="col-lg-5 push-md-1">
<div class="col-md-12">
<% if(isRegistered) { %>
<div class="alert alert-success">
<strong><span class="glyphicon glyphicon-ok"></span> <%= msg %>.</strong>
</div>
<% } else { %>
<div class="alert alert-danger">
<span class="glyphicon glyphicon-remove"></span><strong> <%= msg %> </strong>
</div>
<% } %>
</div>
</div>
<br>
<br>
<br>
<hr>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info float-xs-right">
</form>
</div>
As shown above, if i use "If-else " statement with EJS, my form disappears and if i remove it, my form appears on the browser again.
What i'm trying is to have a registration page where if the user already exists, an alert message to be displayed on the corner side of the browser saying, 'user already exists'. By the way this alert message is coming from my db (Oracle 11g).
in my code, i have a view called "show.ejs" which shows client details. the proble; now is that if i update client details (image, associated docs, ...) the content remains the same and changes only if i refresh the page ( by F5 ) .
this my update and show actions in ClientController :
findOne : function(req,res){
Client.findOne({
id : req.param('id')
})
.populate('docs')
.populate('sites')
.exec(function(err,client){
if(err) throw err;
if(client) {
return res.view('client/show', {
client : client
});
} else {
return res.redirect('/client');
}
})
},
update : function(req,res){
var name = req.param('name'),
id = req.param('id'),
town = req.param('town'),
adress = req.param('adress'),
postalCode = req.param('postalCode'),
telephone = req.param('telephone'),
email = req.param('email'),
fax = req.param('fax'),
responsable = req.param('responsable'),
website = req.param('website'),
activity = req.param('activity');
Client.findOne({id : id}).exec(function(err,client) {
if(err) console.log(err);
client.name = name;
client.town = town;
client.adress = adress;
client.telephone = telephone;
client.fax = fax;
client.website = website;
client.email=email;
client.responsable=responsable;
client.postalCode=postalCode;
client.activity = activity;
client.save();
req.file('logo').upload({
dirname: require('path')
.resolve(sails.config.appPath+'/assets/uploads/clients/logos/')
}, function (err, logo) {
if (err) throw err;
if(typeof logo !== 'undefined' && logo.length > 0 ) {
require('fs').unlink('./assets/uploads/clients/logos/'+client.logo, function(err){
if(err) console.log(err)
client.logo = require('path').basename(logo[0].fd);
client.save();
})
}
return res.redirect('/client/'+client.id );
});
})
}
and this is how i setup the view :
<div class="row">
<div class="col-md-12">
<!-- BEGIN PROFILE SIDEBAR -->
<div class="profile-sidebar" style="background-color: #f5f5f5;">
<!-- PORTLET MAIN -->
<div class="portlet light profile-sidebar-portlet " style="background-color: #f5f5f5;">
<!-- SIDEBAR USERPIC -->
<div class="profile-userpic">
<img src="/uploads/clients/logos/<%= client.logo %>" class="img-responsive img-circle" alt="image client"> </div>
<!-- END SIDEBAR USERPIC -->
<!-- SIDEBAR USER TITLE -->
<div class="profile-usertitle ">
<div class="profile-usertitle-name"><%= client.name %></div>
<div class="profile-usertitle-job"> Client </div>
</div>
</div>
<!-- END PORTLET MAIN -->
<!-- PORTLET MAIN -->
<div class="portlet light " style="background-color: #f5f5f5;">
<!-- STAT -->
<div class="row list-separated profile-stat">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="uppercase profile-stat-title"> <%= 44 %> </div>
<div class="uppercase profile-stat-text"> Sites </div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="uppercase profile-stat-title"><%= 49 %> </div>
<div class="uppercase profile-stat-text"> Documents </div>
</div>
</div>
<!-- END STAT -->
<div>
<div class="margin-top-20 profile-desc-link">
<i class="fa fa-map-marker"></i>
<span class="profile-desc-text" ><%= client.adress %></span>
</div>
<div class="margin-top-20 profile-desc-link">
<i class="fa fa-envelope"></i>
<%= client.email %>
</div>
<div class="margin-top-20 profile-desc-link">
<i class="fa fa-globe"></i>
<%= client.website %>
</div>
</div>
</div>
<!-- END PORTLET MAIN -->
</div>
<!-- END BEGIN PROFILE SIDEBAR -->
<!-- BEGIN PROFILE CONTENT -->
<div class="profile-content">
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="portlet-title tabbable-line">
<div class="caption caption-md">
<i class="icon-globe theme-font hide"></i>
<span class="caption-subject font-blue-madison bold uppercase">Client N° <strong> <%= client.id %></strong></span>
</div>
<ul class="nav nav-tabs">
<li class="active">
informations
</li>
<li>
Documents
</li>
<li>
Sites
</li>
</ul>
</div>
<div class="portlet-body">
<div class="tab-content">
<!-- PERSONAL INFO TAB -->
<div class="tab-pane active" id="tab_1_1">
<form class="form-horizontal" role="form" action="edit">
<div class="form-actions">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-offset-10 col-md-2">
<input type="text" hidden name="id" value="<%=client.id%>">
<button type="submit" class="btn green">
<i class="fa fa-pencil"></i> Modifier</button>
</div>
</div>
</div>
</div>
</div>
<div class="form-body">
<h3 class="form-section">Informations Personneles </h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">ID :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.id %> </p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Nom :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.name %> </p></strong> </strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Responsable :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"><%= client.responsable %></p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Email :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.email %> </p></strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Téléphone :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.telephone %> </p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Fax :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.fax %> </p></strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<h3 class="form-section">Adresse</h3>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-3">#</label>
<div class="col-md-9">
<strong> <p class="form-control-static"> <%= client.adress %> </p></strong>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Ville:</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.town %> </p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Code postal:</label>
<div class="col-md-6">
<strong> <p class="form-control-static"> <%= client.postalCode %></p></strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
</div>
</form>
</div>
<!-- END PERSONAL INFO TAB -->
<!-- CHANGE AVATAR TAB -->
<div class="tab-pane" id="tab_1_2">
<div class="form-actions">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-offset-9 col-md-3">
<button type="submit" class="btn green" data-toggle="modal" href="#basic">
<i class="fa fa-plus"></i> Ajouter un doc </button>
</div>
</div>
</div>
</div>
</div>
<!--- doc model -->
<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Ajouter un Document</h4>
</div>
<div class="modal-body">
<form action="/client/addDocument" method="POST" enctype="multipart/form-data">
<input type="text" hidden name="id" value="<%= client.id %>">
<div class="form-group" style="padding-bottom: 22px;">
<label class="col-md-3 control-label">Titre</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-info-circle"></i>
</span>
<input type="text" class="form-control input-circle-right" placeholder="titre du document" name="title"> </div>
</div>
</div>
<br>
<div class="form-group" style="padding-bottom: 22px;">
<label class="col-md-3 control-label">Description</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-info-circle"></i>
</span>
<textarea type="text" class="form-control input-circle-right" name="description" placeholder="description du document"> </textarea>
</div>
</div>
</div>
<div class="form-group" style="padding-bottom: 22px; padding-top: 40px;">
<label class="col-md-3 control-label">Document</label>
<div class="col-md-9">
<div class="input-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<span class="btn green btn-file">
<span class="fileinput-new"> Selectionner Fichier </span>
<span class="fileinput-exists"> Changer </span>
<input type="file" name="fichier"> </span>
<span class="fileinput-filename"> </span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn green">Enregistrer</button>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- fin doc model -->
<br>
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption font-green">
<i class=" fa fa-file font-green"></i>
<span class="caption-subject bold uppercase" style="margin-right : 11px;">Liste des Documents</span>
</div>
</div>
<div class="portlet-body">
<table class="table table-striped table-bordered table-hover dt-responsive" width="100%" id="sample_1">
<thead>
<tr>
<th class="all">#</th>
<th class="min-tablet">Titre</th>
<th class="desktop">Description</th>
<th class="all" style="width : 66px">Action.</th>
</tr>
</thead>
<tbody>
<% _.each(client.docs, function (doc) { %>
<tr>
<td ><%=doc.id%></td>
<td ><%= doc.title %></td>
<td ><%= doc.description %></td>
<center> <td>
<a href="#" title="telecharger" class="btn btn-circle btn-icon-only green" ><i class="fa fa-download" ></i></a>
<a href="#" title="Supprimer" class="btn btn-circle btn-icon-only purple-sharp" data-toggle="confirmation" data-placement="left" data-btn-ok-label="Continuer" data-btn-ok-icon="icon-like" data-btn-ok-class="btn-success" data-btn-cancel-label="Annuler!"
data-btn-cancel-icon="icon-close" data-btn-cancel-class="btn-danger"><i class="fa fa-trash-o"></i></a>
</td></center>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
Actually following your code, the problems reside in
client.save()
which is an asynchronous function.
the problem is you are changing the client and you are not waiting for the changes to be saved to upload the logo and reload the data.
here's the official doc, which is stating that model.save has a callback to it.
client.save(function(){
/*your code */
})
The view, with those EJS functions is doing what is expected to do. You see, you are not providing some way to magically change data on-the-fly. Instead what EJS and your controller is doing is this: Get all data needed - with findOne -> Put that data on the view - with EJS and <% %> markers -> Render and serve a static HTML document - res.view.
If you need data to change on the fly you need a more powerful framework on the frontend, like Vuejs or Angular... EJS is meant to assembly a static page with dynamic data ONCE. Take a look at the docs
In my express app I have a separate file for middlewares. I used express.static to make the resources available to the app. Code from middlewares.js...
app.use(express.static('public'));
app.use(express.static('node_modules/vue/dist'));
app.use(express.static('node_modules/bootstrap/dist/css'));
app.use(express.static('node_modules/bootstrap/dist/js'));
app.use(express.static('node_modules/multiple.js'));
app.use(express.static('node_modules/chart.js/dist'));
It works fine for all the routes. However, when I try to define a parameterized route, and render a template this way, it fails to load up the resources. Express fails to find CSS/JS/Image files from those statics. What am I missing here? Here is my code for the route..
app.get('/invoices/:id', app.authenticated, (req, res) => {
Invoices.find({_id: req.params.id}, (err, invoice) => {
if (err) {
res.json({error: err});
}
res.render('invoicesCreate');
});
});
Updated: The View file
{{#section 'classes'}}has-navigation page-dashboard{{/section}}
{{#section 'body-classes'}}-fluid{{/section}}
<div class="row" id="invoicer">
<div class="col-xs-12 col-md-6">
Fill your details and get live preview in the right side
<form class="" action="/invoices" method="post" enctype="multipart/form-data">
<div class="">
<div class="invoiceform-logo-container">
<input type="file" name="profilelogo" id="fileinput" accept="image/*" v-on:change="updateImage()">
<img v-bind:src="logo" alt="" />
</div>
<div class="invoiceform-number"></div>
<div class="invoiceform-currency"></div>
</div>
<div class="divider"></div>
<div class="">
Your Name / Company Name
<textarea name="company_name" rows="8" cols="40" v-model="from"></textarea>
Client Name / Company Name
<textarea name="client_name" rows="8" cols="40" v-model="to"></textarea>
\{{date_title}}
<input type="date" name="start_date" v-model="date">
\{{due_date_title}}
<input type="date" name="end_date" v-model="due_date" v-bind:min="date">
\{{balance_title}} \{{balance}}
<div class="input-group">
<span class="input-group-addon">$</span>
<input name="end_date" type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="invoiceform-itemlist" v-on:focusout="checkToRemove()">
<div class="">
\{{item_header}}
\{{quantity_header}}
\{{unit_cost_header}}
\{{amount_header}}
</div>
<div class="" v-for="item in items">
<input type="text" name="items[1][item_name]" v-model="item.head">
<input type="number" name="items[1][item_quantity]" v-model="item.quantity" min="0" v-on:blur="updateAmount($index)">
<input type="number" name="items[1][item_rate]" v-model="item.rate" min="0" v-on:blur="updateAmount($index)">
<input type="number" name="items[1][item_amount]" v-model="item.amount">
</div>
<button type="button" name="button">Add Item</button>
</div>
<div class="divider"></div>
<div class="">
\{{subtotal_title}} \{{subtotal}}
\{{tax_title}}
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button" v-model="tax">
<span class="input-group-addon">
<input type="radio" name="" aria-label="Checkbox for following text input"> %
</span>
<span class="input-group-addon">
<input type="radio" name="" aria-label="Checkbox for following text input"> F
</span>
</div>
<div id="discount" v-if="fields.discount">
Discount <input type="number" name="" v-model="discounts">
</div>
<div id="shipping" v-if="fields.shipping">
Shipping <input type="number" name="shipping" v-model="shipping">
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" name="discount" v-model="fields.discount"> \{{discounts_title}}
</label>
<label class="btn btn-primary">
<input type="checkbox" name="shipping" v-model="fields.shipping"> \{{shipping_title}}
</label>
</div>
</div>
<div class="divider"></div>
<div class="">
Total <input type="number" name="name" v-model="total" min="0">
\{{amount_paid_title}} <input type="number" name="total" v-model="amount_paid" min="0" v-bind:max="total">
</div>
<div class="divider"></div>
<div class="">
\{{notes_title}}
<input type="text" name="name" v-model="notes">
\{{payment_terms_title}}
<input type="text" name="name" v-model="terms">
<button type="submit" name="button">Save Now</button>
<button type="button" name="button">Download PDF</button>
</div>
</form>
</div>
<div class="col-xs-12 col-md-6 hidden-sm-down"></div>
</div>
{{#section 'script'}}
window.invoice = {{{json defaultInvoice}}}
console.log({{{json defaultInvoice}}})
{{/section}}
In the header of my app, I have a link, clicking on which opens up the bootstrap popup modal. When I insert data in the text boxes and click on Submit, No action is happening. Please advice. Thanks.
Here is my html for the modal:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<form action="addCard" method="post" id="addcard" class="form-horizontal" role="form">
<div class="modal-body" style="height: 140px;">
<div class="form-group" style="height: 30px;">
<label for="title" class="col-md-3 control-label">Title</label>
<div class="col-md-9">
<input type="text" class="form-control" name="title" placeholder="Enter Card title here...">
</div>
</div>
<div class="form-group" style="height: 30px;">
<label for="title" class="col-md-3 control-label">Description</label>
<div class="col-md-9">
<input type="text" class="form-control" name="desc" placeholder="Enter Card description here...">
</div>
</div>
<div class="form-group">
<label for="priority" class="col-md-3 control-label">Priority</label>
<div class="col-md-9">
<select name="priority" class="form-control">
<option value="critical">Critical</option>
<option value="high">High</option>
<option value="normal">Normal</option>
<option value="low">Low</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I have this line in my app.js file:
app.post('/addCard', routes.addCard);
Index.js:
exports.addCard = function (req,res)
{
res.render('index');
}