can someone tell me how to convert handlebar code to ejs that i mentioned below
{{#if success_msg}}
<div class="alert alert-success">
{{success_msg}}</div>
{{/if}}
{{#if error_msg}}
<div class="alert alert-danger">
{{error_msg}}</div>
{{/if}}
{{#if error}}
<div class="alert alert-danger">
{{error}}</div>
{{/if}}
<%if (success_msg){%>
<div class="alert alert-success">
<%=success_message %></div>
<%}%>
<%if (error_msg){%>
<div class="alert alert-danger">
<%=error_msg%></div>
<%}%>
<%if (error){%>
<div class="alert alert-danger">
<%=error%></div>
<%}%>
Related
I am trying to copy this simple design into edit mode.
Here is the code displaying the image above :
<div class="user-description-container col-md-6 col-md-offset-3">
<div class="col-md-3">
<%= image_tag #user.image.standard.url, class: "user-picture img-circle" %>
</div>
<div class="user-description-box col-md-7">
<div class="user-name"><%= #user.full_name %></div>
<div class="user-stats">
<div class="user-stats-debates inline-flex"><b class="spacing-margin-right">
<%= #user.groups.length %></b><% if #user.groups.length == 0 %>
<p> débat</p><% else %><p> débats</p>
</div>
<% end %>
<div class="user-stats-followers inline-flex"><b class="spacing-margin-right"><%= #user.followers.length %></b> <%if #user.followers.length == 0%>
<p> disciple</p> <% else %><p> disciples</p>
<% end %>
</div>
</div>
<div class="user-description">
<%= #user.description %>
</div>
</div>
<div class="col-md-2 edit-profile">
<% if current_user == #user %>
<%= link_to(edit_user_path(#user),:class =>"edit-button") do %>
<i class="glyphicon glyphicon-pencil"></i>
<% end %>
<% end %>
</div>
</div>
I copied the main design of the page to the edit mode.
Unfortunately, here is what I get :
I am using the simple form gem with rails and I can't get bootstrap working properly. Here is my code on the edit mode :
<div class="container">
<div class="row">
<div class="user-description-container col-md-6 col-md-offset-3">
<%= form_for #user do |form| %>
<div class="user-upload-preview col-md-3">
<%= image_tag #user.image.standard.url, class: "user-picture img-circle object-fit-covered" %>
<div class="form-input">
<label class="btn btn-sm btn-primary image-browse-button" >
Choisir une photo
<span style="display:none;">
<%= form.file_field :image %>
</span>
</label>
</div>
</div>
<div class="user-description-box col-md-7">
<div class="user-name">
<%= #user.full_name %>
</div>
<div class="user-stats">
<div class="user-stats-debates inline-flex"><b class="spacing-margin-right">
<%= #user.groups.length %></b><% if #user.groups.length == 0 %>
<p> débat</p><% else %><p> débats</p>
</div>
<% end %>
<div class="user-stats-followers inline-flex"><b class="spacing-margin-right"><%= #user.followers.length %></b> <%if #user.followers.length == 0%>
<p> disciple</p> <% else %><p> disciples</p>
<% end %>
</div>
<div class="form-input inline-flex">
<%= form.text_field :description, placeholder: "Description", class: "form-control" %>
</div>
<div class="form-input save-edit">
<%= form.submit "Sauvegarder", class: "form-control profile-submit-button" %>
</div>
<% end %>
<div class="col-md-2">
</div>
</div>
</div>
</div>
</div>
Any answer would be much appreciated.
So in terms of the way you are using bootstrap you are supposed to input all the items that you want in a row which you did but it all the col-md- should add up to a total of 12 for it to be a complete row you have col-md-7 which you should add with an col-xs to make it full also in terms on how to make it like this I think this should suffice
here is some layout that looks like what you are trying to do
<div class="container">
<div class="row">
<div class="col-md-4">
IMAGE
</div>
<div class="col-md-8">
<div class="header">
<h1 class="page-header text-center">MY NAME</h1>
</div>
<div class="row">
<div class="col-md-6">
<h3 class="text-center">insert contents here</h3>
<center>
<div class="center">
<button class="btn btn-primary">BTN</button>
</div>
</center>
</div>
<div class="col-md-6">
<h3 class="text-center">insert contents here</h3>
<center>
<div class="center">
<button class="btn btn-primary">BTN</button>
</div>
</center>
</div>
</div>
</div>
</div>
</div>
It looks like you are inputting user information stay away from #user tags and information like .file and other such things use tags and set them with an ID and then be sure use javascript to manipulate them
In my RequestListener.php, if an entity is not accessible for a user, i use the following exception :
throw new AccessDeniedHttpException();
So it returns me my custom 403 error html template using twig.
<div class="jumbotron jumbotron-fluid exception">
<table class="wrapper">
<tr>
<td>
<div class="error-code">
<span>403</span>
<div class="caption">
<h1 class="text-light">Test h1</h1>
<h2 class="text-light">Test h2</h2>
<p>
Test
</p>
</div>
</div>
</td>
</tr>
</table>
</div>
Now what I want to do is, for the same :
throw new AccessDeniedHttpException();
Using different message depending on the situation where occurs the error 403.
For example what i tried to do is :
throw new AccessDeniedHttpException('custom');
In my template 403.html.twig
<div class="jumbotron jumbotron-fluid exception">
<table class="wrapper">
<tr>
<td>
{% if status_text %}
{{ status_text }}
{% else %}
<div class="error-code">
<span>403</span>
<div class="caption">
<h1 class="text-light">Test h1</h1>
<h2 class="text-light">Test h2</h2>
<p>
Test
</p>
</div>
</div>
{% endif %}
</td>
</tr>
</table>
But I don't know if the string passed in the exception is reachable in my error template...
Maybe have a look at this:
How to display exception text in a custom error page on Symfony?.
You can use the exception.message variable in twig.
<div class="jumbotron jumbotron-fluid exception">
<table class="wrapper">
<tr>
<td>
{% if exception.message %}
{{ exception.message }}
{% else %}
<div class="error-code">
<span>403</span>
<div class="caption">
<h1 class="text-light">Test h1</h1>
<h2 class="text-light">Test h2</h2>
<p>
Test
</p>
</div>
</div>
{% endif %}
</td>
</tr>
</table>
I am writing a simple meteor app and finding that IntelliJ IDEA 14.1.4 (with the Meteor and Handlebars plugins installed and enabled) does not recognize spacebars templates:
After googling, I tried File > Invalidate Caches/Restart but this did not work.
I also find that when I run Code > Reformat Code, the resulting indentation is not correct. I assume both problems are related.
Here is an even simpler illustration of the problem:
How can I debug this?
Finally, I find the really tricky syntax error in my IntelliJ IDEA 14.
The main problem is the space between {{ and # or /.
{{#if currentUser}} is right in syntax but {{ #if currentUser }} is wrong.
Alike, user {{/if}} instead of {{ /if }}.
So the spacebars usage is really strict here. Actually, there should be no extra spaces.
<template name="home">
{{#if currentUser}}
<div class="template-home">
<div class="well">
<form class="form-inline syllabus-chooser">
<div class="form-group">
<select name="syllabusChooser" id="syllabusChooser" class="form-control">
<option value="0">(Select a syllabus to edit)</option>
{{#each syllabusSelectors}}
<option value="{{ value }}">{{ label }}</option>
{{/each}}
</select>
</div>
<button type="submit" id="syllabusChooserButton" class="btn btn-default">Edit</button>
</form>
</div>
{{#if displayID}}
<div class="well">
{{#autoForm collection="Syllabuses" doc=selectedSyllabusDoc id="insertSyllabusForm" type="update"}}
<fieldset>
<div class="row">
<div class="col-sm-2">{{> afQuickField name='alphaNumber' placeholder="ICS 101"}}</div>
<div class="col-sm-2">{{> afQuickField name='creditHours' placeholder="3"}}</div>
<div class="col-sm-2">{{> afQuickField name='prerequisites' placeholder="311 or consent"}}</div>
<div class="col-sm-6">{{> afQuickField name='title' placeholder="Course title"}}</div>
</div>
<div class="row">
<div class="col-sm-6">{{> afQuickField name='instructor' rows=2 placeholder="Name\noffice address, email"}}</div>
<div class="col-sm-6">{{> afQuickField name='textbooks' rows=2 placeholder= "Textbook title and author, or 'none'"}}</div>
</div>
<div class="row">
<div class="col-sm-6">{{> afQuickField name='objectives' rows=4 placeholder='* Students have ...\n* Students can ...\n* Students can ....'}}</div>
<div class="col-sm-6">{{> afQuickField name='policies' rows=4 placeholder="Can be 'none'."}}</div>
</div>
<div class="row">
<div class="col-sm-6">{{> afQuickField name='description' rows=4 placeholder='Insert course catalog description: http://www.catalog.hawaii.edu/courses/departments/ics.htm'}}</div>
<div class="col-sm-6">{{> afQuickField name='grading' rows=4 placeholder="5 homework assignments (10% each)\n1 midterm (15%)\n1 final exam (15%)\n1 final project (20%)"}}</div>
</div>
<div class="row">
<div class="col-sm-6">{{> afFormGroup name='learningOutcomes' type="select-checkbox"}}</div>
<div class="col-sm-6">
{{> afQuickField name='courseLearningOutcomes' rows=12 placeholder="* Learning Outcome 1\n* Learning outcome 2"}}
{{> afQuickField name='schedule' rows=12 placeholder="Week 1: ...\nWeek 2: ...\nWeek 3: ..."}}
</div>
</div>
</fieldset>
<button type="submit" class="btn btn-default btn-success btn-block">Save</button>
{{/autoForm}}
</div>
{{/if}}
</div>
<div class="well" style="padding: 0; max-height: 100px; overflow-y: auto">
<ul>
{{#each editStatusList}}
<li>Started editing {{ syllabusName }} {{ editTimestamp }} {{#if editFinished}} ... finished. {{/if}} </li>
{{/each}}
</ul>
</div>
{{/if}}
</template>
What I'm trying to do
It seems so simple, but I'm trying to use Meteor's account system with Iron:Router to setup an admin system for a web app. The admin section is the only part of the app with accounts. The admin section is to be at /admin and has a login template, and a data template which should be displayed after the admin logs in.
The code
Base Routers
Router.route('/', {
template: 'user' // Not shown; works fine
});
Router.route('/admin', {
template: 'adminDataPage'
});
Templates
<template name="adminLoginPage">
<div class="cover-wrapper-outer page-admin login">
<div class="cover-wrapper-inner">
<div class="cover-container">
<div class="cover">
<form class="admin-login-form">
<div class="alert alert-danger login-failure">
The username or password is incorrect.
</div>
<input class="form-control username" name="username" type="text" placeholder="Username">
<input class="form-control password" name="password" type="password" placeholder="Password">
<input class="form-control submit" name="submit" type="submit" value="Log in">
</form>
</div>
</div>
</div>
</div>
</template>
<template name="adminDataPage">
<div class="container-fluid page-admin admin-content">
<div class="row">
<div class="col-xs-12">
<div class="scrolling-table">
<table class="table table-striped">
<thead>
<tr>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Engine</th>
</tr>
</thead>
<tbody>
<tr>
<td>Year</td>
<td>Make</td>
<td>Model</td>
<td>Engine</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
<template name="adminLoggingIn">
Logging in...
</template>
(This is incomplete as of right now but it doesn't relate to the problem.)
The issue
The content inside the adminDataPage template is never rendered, no matter what I do. However, anything that is not inside an HTML element is rendered. For example, this would render:
<template name="adminDataPage">
Hello world!
</template>
The world in the following would not render:
<template name="adminDataPage">
Hello <span>world</span>!
</template>
The same goes with the adminLoggingIn template. However, anything in the adminLoginPage template works without an issue.
In essence, the login box is displayed, the client-side Javascript (not shown) takes care of logging in the user, the user sees Logging in..., then the user sees nothing and nothing is shown in the browser's inspector (unless there is un-nested plain text in the adminDataPage template).
What I've tried
If currentUser
<template name="adminDataPage">
{{#if currentUser}}
<div class="container-fluid page-admin admin-content">
<div class="row">
<div class="col-xs-12">
<div class="scrolling-table">
<table class="table table-striped">
<thead>
<tr>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Engine</th>
</tr>
</thead>
<tbody>
<tr>
<td>Year</td>
<td>Make</td>
<td>Model</td>
<td>Engine</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
{{else}}
<div class="cover-wrapper-outer page-admin login">
<div class="cover-wrapper-inner">
<div class="cover-container">
<div class="cover">
<form class="admin-login-form">
<div class="alert alert-danger login-failure">
The username or password is incorrect.
</div>
<input class="form-control username" name="username" type="text" placeholder="Username">
<input class="form-control password" name="password" type="password" placeholder="Password">
<input class="form-control submit" name="submit" type="submit" value="Log in">
</form>
</div>
</div>
</div>
</div>
{{/if}}
</template>
This will render the login page when not logged in, as expected. However, once logged in, nothing is rendered. I have also tried integrating {{#if loggingIn}} but to no avail.
Iron:Router hooks
Router.route('/', {
template: 'user'
});
Router.route('/admin', {
template: 'adminDataPage'
});
var requireLogin = function() {
if (! Meteor.user()) {
if (Meteor.loggingIn()) {
this.render('adminLoggingIn');
} else {
this.render('adminLoginPage');
}
} else {
this.next();
}
};
Router.onBeforeAction(requireLogin, {only: 'admin'});
This will render the login page if not logged in, as expected, but will not render any content inside HTML elements within the adminLoggingIn or adminLoginPage templates.
Specifications
Meteor v1.1.0.3
Iron:Router v1.0.9
Conclusion
I'm so very confused why Meteor (or Iron:Router) refuses to render certain content in certain contexts. Of course, if anybody has any ideas to help resolve this, please shoot; it'd be much appreciated.
Blaze.render() appears to be at fault here. Using Blaze.render(Template.adminDataPage, document.body) in the console will not render anything but—just like in my problem—plaintext nested directly inside the body element. It will not nest any DOM elements beneath body.
To test, I created a DOM element <div class="test"></div>, nested it within the body of the page, and called Blaze.render(Template.adminDataPage, $('.test')[0]) and it worked. It wasn't formatted correctly, but it worked.
Adding a layout template for Iron:Router to use fixes the issue, like so:
<template name="adminPage">
<div class="test">
{{> yield}}
</div>
</template>
Router.route('/admin', {
name: 'admin',
template: 'adminDataPage',
layoutTemplate: 'adminPage'
});
var requireLogin = function() {
login_dep.depend();
if (! Meteor.user()) {
if (Meteor.loggingIn()) {
this.render('adminLoggingIn');
console.log('Logging in page');
} else {
this.render('adminLoginPage');
console.log('Login page');
}
} else {
this.next();
console.log('Data page');
}
};
Router.onBeforeAction(requireLogin, {only: 'admin'});
Also, nesting the {{#if currentUser}} inside another element works:
<template name="adminPage">
<div class="test">
{{#if currentUser}}
<div class="container-fluid page-admin admin-content">
<div class="row">
<div class="col-xs-12">
<div class="scrolling-table">
<table class="table table-striped">
<thead>
<tr>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Engine</th>
</tr>
</thead>
<tbody>
<tr>
<td>Year</td>
<td>Make</td>
<td>Model</td>
<td>Engine</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
{{else}}
<div class="cover-wrapper-outer page-admin login">
<div class="cover-wrapper-inner">
<div class="cover-container">
<div class="cover">
<form class="admin-login-form">
<div class="alert alert-danger login-failure">
The username or password is incorrect.
</div>
<input class="form-control username" name="username" type="text" placeholder="Username">
<input class="form-control password" name="password" type="password" placeholder="Password">
<input class="form-control submit" name="submit" type="submit" value="Log in">
</form>
</div>
</div>
</div>
</div>
{{/if}}
</div>
</template>
Router.route('/admin', {
name: 'admin',
template: 'adminPage'
});
I'm not sure why Blaze refuses to attach certain elements to the body element, but these are some workarounds.
Edit
A better workaround I found is to add an element to which Blaze can prepend the template DOM. Blaze.render(Template.adminDataPage, document.body, $('.render-fix')[0]) where a hidden element with the class of render-fix is placed in the DOM at the time of the initial render will work. In essence:
<template name="adminPage">
{{#if currentUser}}
<div>User logged in stuff</div>
{{else}}
<div>User not logged in stuff</div>
{{/if}}
<div class="render-fix" style="display: none"></div>
</template>
It appears to me that Blaze will not attach any templates to body after the initial render.
I've got lots of these similar blocks inside my templates.
The only real difference between each block is the sku (ex. hdrPhotos, panos, twilightPhotos, exteriors).
I would much rather write a single template that takes a sku argument and loop through an array of skus to create each block, but how would I insert a value into something that's already using spacebars {{ }} ?
{{> afFieldInput name="servicesSelected.hdrPhotos.selected" type="boolean-checkbox" noselect="true"}},
{{formatToCurrency currentPrice.hdrPhotos}} or
{{{services "hdrPhotos" "html"}}} ?
<div class="col-md-12">
{{> afFieldInput name="servicesSelected.hdrPhotos.selected" type="boolean-checkbox" noselect="true"}}
<div class="divider small-margins">
</div>
<div class="item-description">
<p><b>{{formatToCurrency currentPrice.hdrPhotos}}</b> - {{services "hdrPhotos" "description"}}</p>
<p>{{{services "hdrPhotos" "html"}}}</p>
</div>
</div>
<div class="col-md-12">
{{> afFieldInput name="servicesSelected.panos.selected" type="boolean-checkbox" noselect="true"}}
<div class="divider small-margins">
</div>
<div class="item-description">
<p><b>{{formatToCurrency currentPrice.panos}}</b> - {{services "panos" "description"}}</p>
<p>{{{services "panos" "html"}}}</p>
</div>
</div>
<div class="col-md-12">
{{> afFieldInput name="servicesSelected.twilightPhotos.selected" type="boolean-checkbox" noselect="true"}}
<div class="divider small-margins">
</div>
<div class="item-description">
<p><b>{{formatToCurrency currentPrice.twilightPhotos}}</b> - {{services "twilightPhotos" "description"}}</p>
<p>{{{services "twilightPhotos" "html"}}}</p>
</div>
</div>
<div class="col-md-12">
{{> afFieldInput name="servicesSelected.exteriors.selected" type="boolean-checkbox" noselect="true"}}
<div class="divider small-margins">
</div>
<div class="item-description">
<p><b>{{formatToCurrency currentPrice.exteriors}}</b> - {{services "exteriors" "description"}}</p>
<p>{{{services "exteriors" "html"}}}</p>
</div>
</div>
I wasn't able to get it to work with string concatenation:
itemBlock: function(sku){
var string = '' +
'<div class="col-md-12">' +
'{{> afFieldInput class="track-order-change label-to-bold-if-checked" name="servicesSelected.hdrPhotos.selected" type="boolean-checkbox" noselect="true"}}' +
'<div class="divider small-margins">' +
'</div>' +
'<div class="item-description">' +
'<p><b>{{formatToCurrency currentPrice.' + sku + '}}</b> - {{services "' + sku + '" "description"}}</p>' +
'<p>{{{services "' + sku + '" "html"}}}</p>' +
'</div>' +
'</div>';
return string;
}
In my html template:
{{{itemBlock hdrPhotos}}}
The HTML portion of it comes out fine, but everything inside {{ }} and {{{ }}} gets rendered on the page in the literal form (see screenshot)
You should try with nested sub-expressions in a dedicated template.
{{ > yourSkuTemplate "youSkuType"}}
<template name="yourSkuTemplate ">
<div class="col-md-12">
{{> afFieldInput name=(skuServicesSelected) type="boolean-checkbox" noselect="true"}}
<div class="divider small-margins">
</div>
<div class="item-description">
<p><b>{{formatToCurrency (skuCurrentPrice)}}</b> - {{services (skuName) (skuyDescription}}</p>
<p>{{{services (skuName) (whatever)}}}</p>
</div>
</div>
</template>
Where skuServicesSelected skuName and all the other in parenthesis are other helpers