How can I render a modal using express and handlebars, I have an index.js file which handles all the routes. When I'm in main.handlebars file I would like to click a button and pop out a modal with a form without changing the background page route.
You don't need to worry about your route files.
On the handlebar file first add a modal somewhere and invoke it using a button as like :
<button class="btn btn-primary " type="button" data-toggle="modal" href="" data-target="#add_food">
<i class="fa fa-plus-square-o"></i> Add Food
</button>
The modal can be as follows:
<div class="modal inmodal fade" id="add_food" tabindex="-1" role="dialog" aria-hidden="true"></div>
Related
I am trying to make a GET request to a certain endpoint by clicking a button that has onClick=location.href attribute.
But I can't figure out how to make EJS tag work inside of apostrophes.
<button type="button" onclick='location.href="/<%= todoList.title %>"'>delete</button>
I want to get this as an outcome:
<button type="button" onclick="location.href="/football">delete</button>
Whereas I'm getting,
<button type="button" onclick="location.href="/">delete</button>
Try
<button type="button" onclick='location.href="/<%- todoList.title %>"'>delete</button>
use <%- %> rather than <%= %> in JS(onclick function)
Or
use link whether using button with onclick function
delete
// if you use bootstrap as framework
delete
Recently a new bug came up which disabled the output window of the file select dialog.
<!-- shown in Maximilian Schwarzmuller Angular & NodeJS - The MEAN Stack Guide -->
<form [formGroup]="form" style="width: 100%">
<div class="row" [ngStyle]="{'height': editing[0] ? 'fit-content' : '200%'}">
<div class="col-12 d-flex justify-content-center" *ngIf="editing[0]">
<button mat-button [color]="'edit-color'" type="button" (click)="image.click()">Add Image</button>
</div>
<input type="file" (change)="onImagePicked($event)" (click)="clicked()" #image>
</div>
...form of image display...
</form>
whenever i call a click event in the mat-button it always gets called, same as in type="file", but the dialog in which i should select a file is never opened.
I assume the problem stems from this page being inside a mat-dialog, which is probably somehow conflicting with the browsers internal dialogs.
for now error has been seen in chrome and safari in development and production.
I am searching for a way to open a file dialog(browser) in my current page architecture.
Strange enough the issue wasn't the dialog. It was a click event called in html a bit higher up.
<h2 matRipple (click)="hamburgerClicked = !hamburgerClicked">
<i class="fas fa-bars" mat-icon-button aria-label="Close dialog"></i>
</h2>
i just changed it to a function
<h2 matRipple (click)="clicked()">
<i class="fas fa-bars" mat-icon-button aria-label="Close dialog"></i>
</h2>
and it works like a charm.
I have a search bar on my website that goes to google but it is making that web page not trustable. I have ssl and all my other pages have the little lock but the page with the search has an i with a circle around it. If i take the search off the page the little lock comes back. Can someone maybe tell me why.
<div class="wrap">
<div class="search">
<form method="get" action="http://www.google.com/search">
<input type="text" name="q" class="searchTerm" placeholder="Search The Web"autocomplete="off" >
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</form>
</div>
</div>
How to define or update style="width:<%=MettingPer %>;" for progress bar in ejs
<li class="list-group-item d-flex justify-content-between align-items-center">
Meeting
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success progress-bar-animated" role="progressbar" style="width: 75%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<%=MettingPer %>%</div>
</div>
</li>
EJS is rendered on the server, not the browser, so EJS has no idea what document is since that's something that's only defined in the browser.
So for this you need to load your page completely on the client side with zero value.
Then complete it according to the instructions in JavaScript.
And as soon as you receive a response from the server, complete and hide it with a little delay.
this question relates to my previous question. I use Bootstrap 2.3.2 and Liferay 6.2 bundled with Tomcat. I would like to use modal windows created in Bootstrap 2.3.2. Thanks to answer in previous question I am able to show Bootstrap modals in Liferay. The problem is when I use dropdown menu with buttons, which open modal windows.
Button group
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Add
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="" id="addVertexModalA" onclick="$('#addVertexModal').modal();" > Vertex1 </a></li>
<li> Vertex2 </li>
</ul>
<button onclick="$('#addVertexModal').modal();">Show</button>
</div>
When I click on Vertex1 or Vertex2 button in dropdown-menu, the modal window disappears immediately after showing. If I click on Show button, it is okay.
Modal window
<div id="addVertexModal" class="modal fade" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="addVertexModalHeader"> Add Vertex </h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label"> names </label>
<div class="controls">
<textarea rows="3"></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true"> Cancel </button>
Confirm
</div>
</div>
<script>
$(document).on("click","#addVertexModalB",function() {
$("#addVertexModal").modal("show");
});
</script>
I use only these resources in portal.
<header-portlet-javascript>/scripts/jquery-1.9.1.js</header-portlet-javascript>
<header-portlet-javascript>/scripts/bootstrap_2.3.2.js</header-portlet-javascript>
I would like to provide jsfiddle or something similar, but it doesn't work in Liferay system (I guess because of AlloyUI css or script files). I tried to remove dropdown-menu class and "dropdown-toggle" class with data-toggle="dropdown", but it didn't help (modal still disappears immediately after showing).
Remove href="" from your <a> tags. When you click on the list item with <a href="" ... />, it causes a GET on the page which reloads the whole page (thus causing your onclick to never execute and show the modal).