Mixing
How to get the data from a using EJS with modals
1
I'm trying to display in a modal window some user emails but I can't figure out why I get only the first email even if the modal divs were declared in the forEach()
Code snippet below:
<div class="row" class=”text-center” >
<div class="col-11">
<div class="table-responsive">
<table class="table table-bordered table-dark text-center" >
<thead>
<tr>
<th scope="col">Email</th>
<th scope="col">Password</th>
<th scope="col">Account</th>
<th scope="col">-</th>
</tr>
</thead>
<tbody>
<% usersList.forEach((user) => { %>
<tr>
<td class="login" ><%= user.login %></td>
<td><%= user.password %></td>
<td><%= user.account %></td>
<td class="text-right">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#popupEditModal" ><a href="#" @click.prevent="userEdit(user)" style="color:white;">Edit</a></button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#popupDeleteModal" ><a href="#" @click.prevent="deleteUser(user)" style="color:white;">Delete</a></button>
<!-- delete popup Modal -->
<div class="modal fade" id="popupDeleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="color:black;text-align:center;" >
Confirmation delete <%= user.login %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- edit popup Modal -->
<div class="modal fade" id="popupEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="color:black;text-align:center;" >
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
And I get on the .ejs webpage a table with the users(everything is alright with the table).The table looks like:
ID Password Account -
test password1 acc1 ....
test1 password2 acc2 ....
... ... .... ....
testn passwordn+1 accn+1 .....
And as you can see both 2 divs of the modal popups are included in the forEach (from EJS) but when I click on the delete button I get : "Confirmation delete test" no matter what user id is,everytime I get "test" as ID and I think the modal gets the first id of the user ignoring my forEach() but I don't know why that...
Can you help me?
Thank you!
javascript html css node.js ejs
asked Nov 19 '18 at 16:04
G.Emilian
619
add a comment |
1
I'm trying to display in a modal window some user emails but I can't figure out why I get only the first email even if the modal divs were declared in the forEach()
Code snippet below:
<div class="row" class=”text-center” >
<div class="col-11">
<div class="table-responsive">
<table class="table table-bordered table-dark text-center" >
<thead>
<tr>
<th scope="col">Email</th>
<th scope="col">Password</th>
<th scope="col">Account</th>
<th scope="col">-</th>
</tr>
</thead>
<tbody>
<% usersList.forEach((user) => { %>
<tr>
<td class="login" ><%= user.login %></td>
<td><%= user.password %></td>
<td><%= user.account %></td>
<td class="text-right">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#popupEditModal" ><a href="#" @click.prevent="userEdit(user)" style="color:white;">Edit</a></button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#popupDeleteModal" ><a href="#" @click.prevent="deleteUser(user)" style="color:white;">Delete</a></button>
<!-- delete popup Modal -->
<div class="modal fade" id="popupDeleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="color:black;text-align:center;" >
Confirmation delete <%= user.login %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- edit popup Modal -->
<div class="modal fade" id="popupEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="color:black;text-align:center;" >
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
And I get on the .ejs webpage a table with the users(everything is alright with the table).The table looks like:
ID Password Account -
test password1 acc1 ....
test1 password2 acc2 ....
... ... .... ....
testn passwordn+1 accn+1 .....
And as you can see both 2 divs of the modal popups are included in the forEach (from EJS) but when I click on the delete button I get : "Confirmation delete test" no matter what user id is,everytime I get "test" as ID and I think the modal gets the first id of the user ignoring my forEach() but I don't know why that...
Can you help me?
Thank you!
javascript html css node.js ejs
asked Nov 19 '18 at 16:04
G.Emilian
619
You can't repeat ID's in a page. They are unique by definition. Use the index of the loop to make the modal ID and modal targets unique
– charlietfl
Nov 19 '18 at 16:06
Wow...I completely forgot about the ID's...Thank you very much for help!
– G.Emilian
Nov 19 '18 at 19:06
add a comment |
1
1
1
I'm trying to display in a modal window some user emails but I can't figure out why I get only the first email even if the modal divs were declared in the forEach()
Code snippet below:
<div class="row" class=”text-center” >
<div class="col-11">
<div class="table-responsive">
<table class="table table-bordered table-dark text-center" >
<thead>
<tr>
<th scope="col">Email</th>
<th scope="col">Password</th>
<th scope="col">Account</th>
<th scope="col">-</th>
</tr>
</thead>
<tbody>
<% usersList.forEach((user) => { %>
<tr>
<td class="login" ><%= user.login %></td>
<td><%= user.password %></td>
<td><%= user.account %></td>
<td class="text-right">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#popupEditModal" ><a href="#" @click.prevent="userEdit(user)" style="color:white;">Edit</a></button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#popupDeleteModal" ><a href="#" @click.prevent="deleteUser(user)" style="color:white;">Delete</a></button>
<!-- delete popup Modal -->
<div class="modal fade" id="popupDeleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="color:black;text-align:center;" >
Confirmation delete <%= user.login %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- edit popup Modal -->
<div class="modal fade" id="popupEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="color:black;text-align:center;" >
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
And I get on the .ejs webpage a table with the users(everything is alright with the table).The table looks like:
ID Password Account -
test password1 acc1 ....
test1 password2 acc2 ....
... ... .... ....
testn passwordn+1 accn+1 .....
And as you can see both 2 divs of the modal popups are included in the forEach (from EJS) but when I click on the delete button I get : "Confirmation delete test" no matter what user id is,everytime I get "test" as ID and I think the modal gets the first id of the user ignoring my forEach() but I don't know why that...
Can you help me?
Thank you!
javascript html css node.js ejs
asked Nov 19 '18 at 16:04
G.Emilian
619
I'm trying to display in a modal window some user emails but I can't figure out why I get only the first email even if the modal divs were declared in the forEach()
Code snippet below:
<div class="row" class=”text-center” >
<div class="col-11">
<div class="table-responsive">
<table class="table table-bordered table-dark text-center" >
<thead>
<tr>
<th scope="col">Email</th>
<th scope="col">Password</th>
<th scope="col">Account</th>
<th scope="col">-</th>
</tr>
</thead>
<tbody>
<% usersList.forEach((user) => { %>
<tr>
<td class="login" ><%= user.login %></td>
<td><%= user.password %></td>
<td><%= user.account %></td>
<td class="text-right">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#popupEditModal" ><a href="#" @click.prevent="userEdit(user)" style="color:white;">Edit</a></button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#popupDeleteModal" ><a href="#" @click.prevent="deleteUser(user)" style="color:white;">Delete</a></button>
<!-- delete popup Modal -->
<div class="modal fade" id="popupDeleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="color:black;text-align:center;" >
Confirmation delete <%= user.login %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- edit popup Modal -->
<div class="modal fade" id="popupEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="color:black;text-align:center;" >
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
And I get on the .ejs webpage a table with the users(everything is alright with the table).The table looks like:
ID Password Account -
test password1 acc1 ....
test1 password2 acc2 ....
... ... .... ....
testn passwordn+1 accn+1 .....
And as you can see both 2 divs of the modal popups are included in the forEach (from EJS) but when I click on the delete button I get : "Confirmation delete test" no matter what user id is,everytime I get "test" as ID and I think the modal gets the first id of the user ignoring my forEach() but I don't know why that...
Can you help me?
Thank you!
javascript html css node.js ejs
javascript html css node.js ejs
asked Nov 19 '18 at 16:04
G.Emilian
619
asked Nov 19 '18 at 16:04
G.Emilian
619
asked Nov 19 '18 at 16:04
G.Emilian
619
asked Nov 19 '18 at 16:04
G.Emilian
619
asked Nov 19 '18 at 16:04
G.Emilian
619
619
You can't repeat ID's in a page. They are unique by definition. Use the index of the loop to make the modal ID and modal targets unique
– charlietfl
Nov 19 '18 at 16:06
Wow...I completely forgot about the ID's...Thank you very much for help!
– G.Emilian
Nov 19 '18 at 19:06
add a comment |
You can't repeat ID's in a page. They are unique by definition. Use the index of the loop to make the modal ID and modal targets unique
– charlietfl
Nov 19 '18 at 16:06
Wow...I completely forgot about the ID's...Thank you very much for help!
– G.Emilian
Nov 19 '18 at 19:06
You can't repeat ID's in a page. They are unique by definition. Use the index of the loop to make the modal ID and modal targets unique
– charlietfl
Nov 19 '18 at 16:06
You can't repeat ID's in a page. They are unique by definition. Use the index of the loop to make the modal ID and modal targets unique
– charlietfl
Nov 19 '18 at 16:06
Wow...I completely forgot about the ID's...Thank you very much for help!
– G.Emilian
Nov 19 '18 at 19:06
Wow...I completely forgot about the ID's...Thank you very much for help!
– G.Emilian
Nov 19 '18 at 19:06
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53378509%2fhow-to-get-the-data-from-a-td-using-ejs-with-modals%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53378509%2fhow-to-get-the-data-from-a-td-using-ejs-with-modals%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You can't repeat ID's in a page. They are unique by definition. Use the index of the loop to make the modal ID and modal targets unique
– charlietfl
Nov 19 '18 at 16:06
Wow...I completely forgot about the ID's...Thank you very much for help!
– G.Emilian
Nov 19 '18 at 19:06