while using Sails I get this error Uncaught ReferenceError: JST is not defined on the chrome console everytime this line of code:
JST['SailsApp/assets/templates/addUser.ejs']( obj )
The content of the addUser.ejs file is:
<tr data-id="<%= user.id %>" data-model="user">
<% if (user.online) { %>
<td><span class="fa fa-circle fa-lg fa-circle-green"></span></td>
<% } else { %>
<td><span class="fa fa-circle fa-lg fa-circle-red"></span></td>
<% } %>
<td><%= user.id %></td>
<td><%= user.name %></td>
<td><%= user.title %></td>
<td><%= user.email %></td>
<% if (user.admin) { %>
<td> <span class="glyphicon glyphicon-king" > </span></td>
<% } else { %>
<td> <span class="glyphicon glyphicon-user" > </span></td>
<% } %>
<td>Show </td>
<td>Edit </td>
<td>
<form action="/user/destroy/<%= user.id %>" method="POST">
<input type="hidden" name="_method" value="delete"/>
<input type="submit" class="btn btn-sm btn-danger" value="Delete"/>
<input type="hidden" name="_csrf" value="<%= _csrf%>" />
</form>
</td>
</tr>
The compiled .jst file is not appearing in .tmp/public folder, and if I run sudo grunt jst manually then it's created but the chrome console continues giving the same error.
Any help would be much appreciated.
Thanks in advance!
I had the same problem recently. Under 'tasks/register/compileAssets.js', try moving jst:dev below copy:dev.
module.exports = function (grunt) {
grunt.registerTask('compileAssets', [
'clean:dev',
'less:dev',
'copy:dev',
'jst:dev',
'coffee:dev'
]);
};
It seems that the jst:dev task is looking for the template files in the .tmp/ dir, but they aren't moved from assets/ until the copy task executes. You'll see this if you run grunt and get an error like:
Running "jst:dev" (jst) task
>> Destination not written because compiled files were empty.
Related
I have app. I added DELETE feature by id. It looks like:
router.delete('/delete/:id', async function (req, res){
console.log("I'm here..");
try {
var id = req.params.id;
console.log("here!!!");
console.log(id);
var x = await Order.findByIdAndDelete(id).exec();
await x.save();
console.log("deleted!");
}catch (exc){console.log("Error during deleting!")}
res.redirect('back');
});
I have also form on my view (i use EJS).
<h1 class="mt-4">Dashboard</h1>
<p class="lead mb-3">Witaj <%= user.name %></p>
<% include ('./partials/messages.ejs')%>
<div class="row mt-5 float-left">
Wszystkie zamówienia
<table class="table float-left">
<tbody>
<% orders.forEach(function(value) { %>
<tr>
<form method="PATCH" action="/orders/order/<%=value.id%>">
<td>Id zamówienia <%= value.id %></td>
<td>Id klienta <%= value.userID %></td>
<td><input type="datetime-local" value= <%= value.dateStart %>
min=<%= value.dateStart %> max=<%= value.dateFinish %>> data rozpoczęcia</td>
<td><input type="datetime-local" value= <%= value.dateFinish %>
min=<%= value.dateStart %> max=<%= value.dateFinish %> >data zakończenia</td>
<td>Cena: <%= value.total %></td>
<td>Ilość dni <%= value.numberOfDays %></td>
<td> <button type="submit" class="btn btn-primary btn-lg">Edytuj i akceptuj</button></td>
</form>
**THERE IS A BUTTON** <form method="DELETE" action="/orders/delete/<%=value.id%>">
<td><button type="submit" class="btn btn-primary btn-lg" value="delete">Usuń</button></td></form>
<form method="POST" action="/orders/confirmOrder/<%=value.id%>">
<td><button type="submit" class="btn btn-primary btn-lg">Akceptuj</button></td></form>
</tr>
<% }) %>
</tbody>
</table>
</div>
Everything looks ok, and should work but it doesn't! Http request looks ok:
GET /orders/delete/607d4b8b06e1aee2dfa901be? 404 84.803 ms - 2580 - but WebStorm shows GET in console. Quite strange. Why? It should shows DELETE. Id of order is okay - taken from database.
Console.logs from route like "here!!!", "I'm here.." aren't showed by console. So I think something is wrong with route.
Moreover after action my layout stopping work because "user is not defined" - yes, i check if user is logged in the layout. It indicates that something is wrong - I have the same situation with other action, but I fixed it. Here I spent 4hrs at night and haven't fixed it yet.
Please, show me what is wrong here.
Kind Regards!
Problem solved! HTML <form> doesn't support DELETE! I was forced to use jquery to send delete request, or to change delete to post in route and in the view.
Now my view and route look:
<td><button type="submit" id="del-button" class="btn btn-primary btn-lg " value=<%=value.id%>>Usuń</button></td></form>
and route:
router.post('/delete/:id', async function (req, res){
//body here
});
I left my answer. Maybe someone use it in the future.
I have an application nodejs + expressjs + ejs.
I am building a history search screen, my question is how to update my ejs html table with the values returned in the response.
Uploading the screen with the values is working, but when I enter the filters and search, I would like to update my table.
In the example below is how to use to load the html the first time with the data of the query, I would like to fill in an initial and final date and click on searching and updating the html.
EJS HTML
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="dataPrimayID">Date Primary</label>
<input type="text" class="form-control datepickerDefault" id="dataPrimayID" name="dataPrimary" maxlength="250">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="dataFinalID">Date Final</label>
<input type="text" class="form-control datepickerDefault" id="dataFinalID" name="dataFinal" maxlength="250">
</div>
</div>
<div class="col-md-2">
<a id="btnSearch" class="btn btn-primary">Search</a>
</div>
</div>
<div class="row">
<div class="table-responsive col-md-12">
<table id="dataTableHistoricoID" class="table table-striped" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>Name</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<% if(data.length > 0){ %>
<% for ( var i = 0 ; i < data.length ; i++){ %>
<tr>
<td>
<%= data[i].name%>
</td>
<td>
<%= data[i].lastname%>
</td>
</tr>
<% } %>
<% } %>
</tbody>
</table>
</div>
</div>
ROUTER
var express = require('express');
var router = express.Router();
var historyController = require('../controllers/history-controller');
router.get('/find', historyController.findHistory);
module.exports = router;
Controller
db.query(sql, function (err, rows) {
if (err) {
var message = err.message;
console.log(message);
return res.status(500).send(message);
}else {
var data = rows;
res.render('history/search-history', {data: data});
}
});
EJS is static after compiling, you can't change it on backend-side. There are two ways of it.
Refreshing the page every time you want to render new content.
Implement client-side JS code that will handle api requests and render new elements.
For example, using Jquery:
$.post(url, (result) => {
let data = JSON.parse(result);
let innerHTML = '';
for (let item of data) {
innerHTML += `<tr>
<td>
${item.name}
</td>
<td>
${item.lastname}
</td>
</tr>`;
}
$('#dataTableHistoricoID tbody').html(innerHTML)
};
i have retrieved a list of abjects from firebase onto my ejs file: and i am retrieving them in this manner:
<form id="eventform" method="post" action="/dasha">
<%Object.keys(notes).forEach(function(key){%>
<tbody id="event" name="event">
<tr>
<td>1</td>
<input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">
<td id="evname" name="evname"><%=notes[key].event %></td>
</form>
<td><%=notes[key].location %></td>
<td><%=notes[key].codes %></td>
<td><%=notes[key].date %></td>
</tr>
<% }) %>
</tbody>
I am however trying to implement an Onclick for so that when an item is clicked on it carries its info to the next page: I have tried to store it in aninput field like:
**<input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">**
But i just cant get the individual item it pulls the whole array when i check for the value.Any help
Here is the sample data
Then i use jquery to submit:
$(document).ready(function () {
$("#event").click(function(){
var en = $("#evname").val();
$("#categ").val(en);
$("#eventform").submit();
});
});
Here is the rendered htmlsource and images /:
<tbody id="eventName" class="eventName" style="cursor: crosshair;" name="eventName">
<%Object.keys(notes).forEach(function(key,idx){%>
<tr>
<td id="tid" name="tid" class="tid" ><%= idx %></td>
<form name="eventForm-<%= idx %>" class="eventForm" method="post" action="/dasha">
<input type="hidden" id="categ-<%= idx %>" name="categ" class="categ" value="<%=notes[key].event %>">
<input type="hidden" id="idd" name="idd" class="idd" value="<%= idx %>">
</form>
<td id="evname-<%= idx %>" name="evname-<%= idx %>"><%=notes[key].event %></td>
<td id="elocation" name="elocation"><%=notes[key].location %></td>
<td id="ecodes" name="ecodes"><%=notes[key].code %></td>
<td id="edate" name="edate"><%=notes[key].date %></td>
</tr>
<% }) %>
</tbody>
Here is the rendered html from the browser:
<tbody id="eventName" class="eventName" style="cursor: crosshair;" name="eventName">
<tr>
<td id="tid" name="tid" class="tid">0</td>
<form name="eventForm-0" class="eventForm" method="post" action="/dasha"></form>
<input type="hidden" id="categ-0" name="categ" class="categ" value="zuri.png">
<input type="hidden" id="idd" name="idd" class="idd" value="0">
<td id="evname-0" name="evname-0">zuri.png</td>
<td id="elocation" name="elocation">zuri.png</td>
<td id="ecodes" name="ecodes"></td>
<td id="edate" name="edate">-LZfAvzWGudUK78TGtT_</td>
</tr>
<tr>
<td id="tid" name="tid" class="tid">1</td>
<form name="eventForm-1" class="eventForm" method="post" action="/dasha"></form>
<input type="hidden" id="categ-1" name="categ" class="categ" value="Africa Tourism Technology and Innovation Awards">
<input type="hidden" id="idd" name="idd" class="idd" value="1">
<td id="evname-1" name="evname-1">Africa Tourism Technology and Innovation Awards</td>
<td id="elocation" name="elocation">USIU – Africa</td>
<td id="ecodes" name="ecodes">AA24VI</td>
<td id="edate" name="edate">25th – 26th April, 2019</td>
</tr>
<tr>
<td id="tid" name="tid" class="tid">2</td>
<form name="eventForm-2" class="eventForm" method="post" action="/dasha"></form>
<input type="hidden" id="categ-2" name="categ" class="categ" value="2nd Annual Global M I C E Summit">
<input type="hidden" id="idd" name="idd" class="idd" value="2">
<td id="evname-2" name="evname-2">2nd Annual Global M I C E Summit</td>
<td id="elocation" name="elocation">Trademark Hotel</td>
<td id="ecodes" name="ecodes">RT79XV</td>
<td id="edate" name="edate">11th – 13th September, 2019</td>
</tr>
</tbody>
You have a number of issues with your code, and despite trying to highlight them in comments there isn't enough space, hence this 'incomplete' answer
For starters you are opening a form tag before your forEach loop. You then close it during the first loop. So on your subsequent iterations there isn't a form to find.
Secondly, you have reused the same ID during the loop, which you should not do as it will generate multiple items with the same ID if you have multiple Objects you're looping through. If you have 2 elements with an ID of 'foo', using multiple of the same ID will lead to unintended consequences , each ID should be unique.
Thirdly you don't have a <table> tag around your tbody, some browsers therefore strip the tbody so you're click event will never fire. Also your rows are within a <tr> element so you should attach your click handler to this.
<form id="eventform" method="post" action="/dasha">
<%Object.keys(notes).forEach(function(key){%>
<tbody id="event" name="event">
<tr>
<td>1</td>
<input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">
<td id="evname" name="evname"><%=notes[key].event %></td>
</form> // YOU'RE CLOSING YOUR FORM HERE INSIDE THE LOOP ITERATION
<td><%=notes[key].location %></td>
<td><%=notes[key].codes %></td>
<td><%=notes[key].date %></td>
</tr>
<% }) %>
</tbody>
Now this isn't tested, and as I don't know the complete layout of your page it's a bit of a stab in the dark, but you could try something like the following and see if you have any luck
<%Object.keys(notes).forEach(function(key,idx){%>
<table>
<tbody id="event-<%= idx =>" name="event" class="eventName">
<tr class="row">
<td>1</td>
<form name="eventForm-<%= idx %>" class="eventForm" method="post" action="/dasha">
<input type="hidden" id="categ-<%= idx %>" name="categ" class="categ" value="<%=notes[key].event %>">
</form>
<td id="evname-<%= idx %>" name="evname-<%= idx %>"><%=notes[key].event %></td>
<td><%=notes[key].location %></td>
<td><%=notes[key].codes %></td>
<td><%=notes[key].date %></td>
</tr>
<% }) %>
</tbody>
</table>
And a click handler similar to
$(document).ready(function () {
$(".row").click(function(ev){
let form = ev.currentTarget.querySelector('form');
form.submit()
});
A simpler version using vanilla JS can be found here https://jsfiddle.net/xvag0mj2/
I'm trying to get selected rows from a table in express js.
Here is a html+ejs table code I have in my ejs view file. I'm trying to get only the rows where the checkbox is checked.
<table class="table">
<thread class = "thread-inverse">
<tr>
<th>Item Id</th>
<th>Name</th>
<th>Category</th>
<th>Manufacturer</th>
<th>Supplier</th>
<th>Buying Price</th>
<th>Selling Price</th>
<th>Action</th>
</tr>
<% for(var i =0; i < itemList.length; i++){%>
<tr>
<td><%= itemList[i].productId %></td>
<td><%= itemList[i].itemName %></td>
<td><%= itemList[i].category %></td>
<td><%= itemList[i].manufacturer %></td>
<td><%= itemList[i].supplier %></td>
<td><%= itemList[i].buyingPrice %></td>
<td><%= itemList[i].sellingPrice %></td>
<td><input type="text" name="quantity""></td>
<td><input type="checkbox" name="productId" value="<%= itemList[i].productId %>"> | ADD </td>
</tr>
<% } %>
</thread>
</table>
I have tried several things but nothing is working..
Can anyone please give me a solution ?
Modify your code a bit,
//HTML
//add a **onclick** listener on checkbox
<td><input type="checkbox" class="checkbox" name="productId" value="<%= itemList[i].productId %>"> | ADD </td>
//In java script file
$('.checkbox').click(function() {
var productId = $(this).closest("tr").find('td:eq(0)').text();
//changing td:eq(x) will give you corresponding clicked row's cell
}
I tried with the following way, and works well.
Modify the code snippet by adding class name to :
<% for(var i =0; i < itemList.length; i++){%>
<tr class="tbl-item">
...
<% } %>
And implement the click function:
$(".checkbox").each(function(index) {
$(this).click(function(e) {
let item = $(".tbl-item")[index];
console.log(item);
}) ;
})
Then the console will show the desired tag data and you can get every item like:
item.children[4].innerText
Thanks.
Since yesterday I have been trying to install authlogic in a project. As I can see, all the examples and the documentation are oriented to older versions of both rails and authlogic. However, I tried to follow :
the example in the documentation
the railscast
other websites examples like: http://www.logansbailey.com/2010/10/06/how-to-setup-authlogic-in-rails-3/ (for me, the most useful tutorial until now)
I don't get authlogic working properly.
I installed the gem trough the gemfile and the bundle install order.
I generated a model user and ran the migration
$ rails generate scaffold user username:string email:string crypted_password:string password_salt:string persistence_token:string
$ rake db:migrate
I add the following line to the model user.rb:
acts_as_authentic
then, I put a link to register a new user: link_to "Register", new_user_path
I edit /app/views/users/index.html.erb to look like:
<h1>Listing users</h1>
<table>
<tr>
<th>Username</th>
<th>Email</th>
<th></th>
<th></th>
<th></th>
</tr>
<% #users.each do |user| %>
<tr>
<td><%= user.username %></td>
<td><%= user.email %></td>
<td><%= link_to 'Show', user %></td>
<td><%= link_to 'Edit', edit_user_path(user) %></td>
<td><%= link_to 'Destroy', user, :confirm => 'Are you sure?', :method => :delete %></td>
</tr>
<% end %>
</table>
<br />
<%= link_to 'New User', new_user_path %>
and app/views/users/_form.html.erb to look like:
<%= form_for(#user) do |f| %>
<% if #user.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#user.errors.count, "error") %> prohibited this user from being saved:</h2>
<ul>
<% #user.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :username %><br />
<%= f.text_field :username %>
</div>
<div class="field">
<%= f.label :email %><br />
<%= f.text_field :email %>
</div>
<div class="field">
<%= f.label :password %><br />
<%= f.password_field :password %>
</div>
<div class="field">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
Now, when I try to register an user, I get two errors:
-Password is too short (minimum is 4 characters)
-Password confirmation is too short (minimum is 4 characters)
I have put longer passwords but it doesn't work.
Any help?
Thank you
Just based on the error messages without seeing the users controller, it appears that password and password_confirmation are not being passed to the user model. This may be a Rails 4 preventing mass assignment issue. To allow this, in the create method in the users controller, you can say:
#user = User.new(user_params)
and then define the user_params method:
def user_params
params.require(:user).permit(:password, :password_confirmation, :name, :email)
end