We Keep Coding

Prevent Hidden Bootstrap 4 Modals to react events

I am trying to create a "Confirmation Modal" on deleting a row in a table. When the user wants to delete a row a Modal is shown (on click of a button) in which the user must type the username as a confirmation to delete it and click the delete button. This table have multiple rows (one for each user) and every row has its own "delete button" created with this loop:
while ($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
?>
<tr>
<th scope="row"><?=$row["ID"]?></th>
<td><?=$row["username"]?></td>
<td><?=$row["mail"]?></td>
<td><button class="btn btn-sm btn-primary"><i class="fas fa-pencil-alt"></i></button></td>
<td><button class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#delete-user-modal" data-bs-user-id="<?=$row["ID"]?>" data-bs-username="<?=$row["username"]?>"><i class="fas fa-trash"></i></button></td>
</tr>
<?php
}
This is how i set my modal:
<!--DELETE USER MODAL-->
<div class="modal modal-dialog modal-dialog-centered fade" id="delete-user-modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p></p>
<input type="text" name="username" class="form-control" id="username-input">
<input hidden type="text" name="user_id">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" id="modal-delete-button" class="btn btn-danger disabled" >Elimina</button>
</div>
</div>
</div>
</div>
Via data-bs I pass the ID and username for each button and I put these data in the Modal with:
$("#delete-user-modal").on('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-bs-* attributes
var userId = button.getAttribute('data-bs-user-id')
var username = button.getAttribute('data-bs-username')
// Update the modal's content.
var modalTitle = $(this).find('.modal-title')
var modalP = $(this).find('.modal-body > p')
var modalInput = $(this).find('.modal-body > input')
var modalDeleteBtn = $(this).find('#modal-delete-button')
modalTitle.append('Vuoi eliminare <span class="bold">' + username + '</span>?')
modalP.append('Scrivi <span class="bold">' + username + '</span> per confermare')
$("#delete-user-modal").on('keyup', event => {
console.log(modalInput.val())
if(modalInput.val() === username){
console.log("check")
//modalDeleteBtn.classList.remove('disable')
}
})
})
The problem is that when I close a modal and open a new one (ie: clicking button of another row) also the one that is hide react to the on('keyup') event.
I need a way to open a fresh Modal every time i click a new button or reset the modal that I close and have the new one completely fresh.

This for me resolved with:
$("#delete-user-modal").on('hidden.bs.modal', function (event) {
$(this).unbind('keyup')
});

How would i edit/update values in a dynamic table using jQuery?

I have a program that accepts inputs from a user by entering them into a modal, after doing so, the user clicks a button which adds all the inputs to their respective columns within the tables row. The user is allowed to add as many rows as they need with varying information. The inputs are as follows: An image via an input of type file, as well as two text inputs, one for their name and another for their surname.
Alongside the inputs displayed within the row, i have created an edit and delete button. The focus for this question will be on the edit button. Once pressed, the edit button needs to bring up an update modal with the same fields as the original adding modal. The user should be able to change/update the information within all 3 inputs, and this should dynamically update the row for which the edit button had been pressed (each row has its own edit button).
How would i go about doing this? My jQuery code is as follows:
//add data
$("#addToTable").click(function() {
var imageLocation = $("#insertImage").val().replace(/C:\\fakepath\\/i, "images/");
counter++;
$("#container table").append(
$('<tr id="' + counter + '">')
//below is the image input
.append($('<td class="align-middle">').html("<img src=" + imageLocation + " class='image' data-toggle='popover'" + "data-img=" + imageLocation + ">").on("mouseover", function() {
$('[data-toggle="popover"]').popover({
trigger: 'hover',
html: true,
content: function() {
return '<img class="img-fluid" src="' + $(this).data('img') + '" />';
},
title: 'Enlarged Image'
})
}))
.append($('<td class="align-middle">').html($('#addName').val())) //the name input
.append($('<td class="align-middle">').html($('#addSurname').val())) //the surname input
.append($('<td class="align-middle">').html("<i class='fas fa-user-edit faa-shake animated-hover' id='pencilIcon'></i></button>").on("click", function() {
$('#updateDataOnTable').modal("toggle"); // this brings up the update modal once the edit button has been pressed.
}))
.append($('<td class="align-middle">').html("<i class='fas fa-dumpster faa-shake animated-hover' id='dumpsterIcon'></i>").on("click", function() {
let deleteRow = this;
$('#modalDelete').modal("toggle");
$('#no').on("click", function() {
$('#modalDelete').modal("toggle");
deleteRow = "";
})
$('#yes').on("click", function() {
$(deleteRow).parents("tr").remove();
$('#modalDelete').modal("toggle");
})
}))
)
formClear(); //clears the inputs
});
As it stands, the program only brings up the update modal (HTML code shown below):
<!-- Update Modal -->
<div class="modal fade" id="updateDataOnTable" tabindex="-1" role="dialog" aria-labelledby="website" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Update Table</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="" action="index.html" method="post">
<form>
<div class="form-group">
<label for="updateImage">Insert Image</label>
<input type="file" class="form-control-file" data-toggle="popover" data-html="true" data-placement="bottom" name="insertImage" id="updateImage" accept="image/x-png,image/gif,image/jpeg" aria-describedby="inputHelp">
</div>
<div class="form-group">
<label for="updateName">Name</label>
<input type="text" class="form-control" id="updateName">
</div>
<div class="form-group">
<label for="updateSurname">Surname</label>
<input type="text" class="form-control" id="updateSurname">
</div>
</form>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="updateTable" value=id>Update</button>
</div>
</div>
</div>
</div>
Any help would be greatly appreciated! :)

Laravel modal hidden value to call route

I have a modal with a hidden field of my current id that I need.
I need to click a button in my modal to confirm if I should delete a user. I setup a form not sure if this is the best option and in javascript set the attr of form to the route but the route isn’t finding the correct path although in the URL it says it correctly what am I missing maybe the route should be in PHP instead of JS?
<div class="modal" id="mdelete" role="dialog" aria-labelledby="moddelete">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="moddelete">Confirm Delete</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete</p>
</div>
<div class="modal-footer">
<form method="POST" id="formdelete">
<input type="hidden" name="txtid" id="txtid" />
<input type="text" name="uid" id="uid" />
<button type="button" class="btn btn-danger " data-dismiss="modal">No</button>
<span class="text-right">
<button type="submit" class="btn btn-primary btndelete">Yes</button>
</span>
</form>
</div>
</div>
Show
Edit
<button type="button" class="btn btn-danger ml-2" data-toggle="modal"
data-target="#mdelete" data-id="{{$user->id}}"
data-name="{{$user->username}}">Delete</button>
$(document).ready(function() {
$('#mdelete').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var userid = button.data('id');
var uname = button.data('name');
var modal = $(this);
modal.find('#txtid').val(userid);
modal.find('#uid').val(userid);
modal.find('.modal-body').text('Are you sure you want to delete ' + uname);
})
$('#formdelete').submit(function() {
var userid = $('#txtid').val();
$('#formdelete').attr("action", "route('$users.destroy',$user->"+ userid +")");
$('#formdelete').submit();
});
});

Your attempt to generate route will fail because you are not using templating correctly:
$('#formdelete').attr("action", "route('$users.destroy',$user->"+ userid +")");
You can try to have your route accept optional user field, and then generate route to it, and with js append user ID value something like so:
<script>
$(function() {
var form = $('#formdelete');
var path = '{{ route("users.destroy") }}';
$('#formdelete').submit(function(event) {
var form = $(this);
var userid = form.find('#txtid').val();
$('#formdelete').attr("action", path + '/' + userid);
$('#formdelete').submit();
});
});
</script>

How to make a Javascript button onclick() call a function that opens a bootstrap modal with an Ajax request?

I am trying to make a bootstrap 4 modal that opens when a button is pressed inside a dynamically created element which makes an Ajax request to a form pre-populated with the data from the associated id, and then a button to save the updated information into the database.
Currently, the edit button opens a new page "editData" with the prepopulated data associated with the passed id, which then can be used to update the information upon pressing a button, and then returns to the previous page.
What are the methods that I can use to make the button open a modal on the current page that can provide the same function?
function populateData(dataInput) {
var row = $('<tr id=' + dataInput.id + '/>');
$('#table').append(row);
row.append($('<td>' + dataInput.name + '</td>'));
row.append($('<td>' + dataInput.description + '</td>'));
row.append($(
'<td><input type="submit" class="btn btn-warning" value="edit" onclick="edit(' +
dataInput.id + ')"/>'));
}
function edit(id) {
$.ajax({
type: 'GET',
url: '/getData?id=' + id,
success: function(data) {
var dataInput = JSON.parse(data)[0];
window.location = '/editData?id=' + dataInput.id;
}
})
}
Here is the getData that dynamically populates the table
app.get('/getData', function(req, res) {
var content = {};
mysql.pool.query('SELECT * FROM dataTable WHERE id=?', [req.query.id],
function(err, rows, fields) {
if (err) {
next(err);
return;
}
content.results = JSON.stringify(rows);
res.send(content.results);
});
});
And here is the editData.handler content
<div>
<form id="form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="">
<label for="description">Description:</label>
<textarea id="description" name="description" rows="4" cols="50"></textarea>
</form>
<div class="centerButton">
<input id="submit" class="btn btn-primary" type="submit" value="Save" onclick="save()" />
</div>
</div>

This is a simple bootstrap modal.
<div class="modal fade" id="exampleModal" 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">
...
</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>
Now JavaScript part to make ajax request and embed data into modal.
function populateData(dataInput) {
var row = $('<tr id=' + dataInput.id + '/>');
$('#table').append(row);
row.append($('<td>' + dataInput.name + '</td>'));
row.append($('<td>' + dataInput.description + '</td>'));
//check that I have added attributes data-toggle and data-target to point example modal
row.append($(
'<td><input type="submit" data-toggle="modal" data-target="#exampleModal" class="btn btn-warning" value="edit" onclick="edit(' +
dataInput.id + ')"/>'));
}
function edit(id) {
$.ajax({
type: 'GET',
url: '/getData?id=' + id,
success: function(data) {
var dataInput = JSON.parse(data)[0];
//commented following line and adding code to embed data into modal
//window.location = '/editData?id=' + dataInput.id;
$('.modal-body').html('html that you want to show');
}
})
}
It works and here is a demo on Codepen.
Please make sure that you have include bootstrap and jquery.

Modal in asp.net view not working properly

In my strongly typed view I am looping over a list of objects coming from a database. Each of these objects is presented in a jumbotron, which has a button "Had role before". On click the modal opens and there I want to input some data in input boxes and save it to my database via an ajax call. One part of data that I want to input is the unique id which each object in the loop has. With the code I have so far I managed on click to get the id of the first object, but when I am clicking the buttons for the rest of the objects nothing happens.
This is the script in my view :
<script type="text/javascript">
$(document).ready(function () {
$(function () {
var idW;
$('#mdl').on('click', function () {
var parent = $(this).closest('.jumbotron');
var name = parent.find('input[name="mdlname"]').val();
var id = parent.find('input[name="mdlwrid"]').val();
var idW = id;
console.log(idW);
var titleLocation = $('#myModal').find('.modal-title');
titleLocation.text(name);
$('#myModal').modal('show');
});
});
$('#mdlSave').on('click', function () {
console.log('x');
addPastRoleAjax();
});
function addPastRoleAjax() {
$.ajax({
type: "POST",
url: '#Url.Action("addPastRole", "WorkRoles")',
dataType: "json",
data: {
wrId: idW,
dateStart: $("#wrdateStart").val(),
dateEnd: $("#wrknamedateEnd").val()
},
success: successFunc
});
function successFunc(data, status) {
if (data == false) {
$(".alert").show();
$('.btn').addClass('disabled');
//$(".btn").prop('disabled', true);
}
}
</script>
the loop :
#foreach (var item in Model)
{
<div class="jumbotron">
<input type="hidden" name="mdlwrid" value="#item.WorkRoleId" />
<input type="hidden" name="mdlname" value="#item.RoleName" />
<h1>#Html.DisplayFor(modelItem => item.RoleName)</h1>
<p class="lead">#Html.DisplayFor(modelItem => item.RoleDescription)</p>
<p> #Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { #class = "btn btn-primary btn-lg" })</p>
<p> <button type="button" id ="mdl" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p>
</div>
}
The modal :
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<input id="wrdateStart" class='date-picker' />
<input id="wrknamedateEnd" class='date-picker' />
</div>
<div class="modal-footer">
<button type="button" id="mdlSave" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</div>

Your problem is in the following piece of code:
#foreach (var item in Model)
{
<div class="jumbotron">
<input type="hidden" name="mdlwrid" value="#item.WorkRoleId" />
<input type="hidden" name="mdlname" value="#item.RoleName" />
<h1>#Html.DisplayFor(modelItem => item.RoleName)</h1>
<p class="lead">#Html.DisplayFor(modelItem => item.RoleDescription)</p>
<p> #Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { #class = "btn btn-primary btn-lg" })</p>
<p> <button type="button" id ="mdl" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p>
</div>
}
You have used a foreach loop and inside it you create button elements with same id.
<button type="button" id ="mdl" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button>
So,foreach let you to create many buttons with same id. That's wrong and that's why you get that behavior(only first button work).The solution: Use classes instead.