We Keep Coding

Passing Data-id of an Object to Bootstrap Modal form

Good day.
I have a task list which has a Delete button in the task field for managing the task.
I am looking how to pass a task parameter containing ID (after pushing a Delete button) to the Bootstrap Modal.
My target is to click the "trash" icon on the task and to show the modal, and only in modal to confirm the deletion.
Here is the button wrapped in modal
`<span data-toggle="tooltip" data-placement="bottom" title="Delete task">
<a data-toggle="modal" data-target="#deleteTaskModal">
<button class="deleteTask far fa-trash-alt" data-id='{id}'></button>
</a></span>`
Here is the modal itself.
I want to use the modal to confirm Deleting the task.
<div class="modal fade" id="deleteTaskModal" tabindex="-1" aria-labelledby="exampleformModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form class="" action="" method="">
<div class="modal-header">
</div>
<div class="modal-body">
<h3>Do you want to delete this task?</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Delete Task</button>
</div>
</form>
</div>
</div>
</div>
</div>
Here is Jquery Script
I tried to catch the ID of the "trigger" and pass it to Modal
$(".modal fade #deleteTaskModal").on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) //Button that triggered the modal
var id = button.data('id');
var url = '/delete/' + id;
if (confirm('Delete task')) {
$.ajax({
url: url,
type: "DELETE",
success: function(result) {
console.log("Deleting task...");
window.location.href = '/';
},
error: function(err) {
console.log(err);
}
})
}
}

You were nearly there though you were not targeting the right element in your modal open.
Since you have an a element and button is inside the a which contains the data-id
You need to watch for the eventTarget and then use .find() method to find the button and get the data id from it which will be passed via ajax
var id = button.find('button').data('id') //need to find the button and get id
In addition, you also need an event handler which will click function inside your modal open which will trigger when you click on Delete task button in your modal.
Lastly I have added a modal close option as well which will happen ajax success - I have fixed up your code and is working as intended.
Live Working Demo: (Showing the data-id in console.log and click button working)
$("#deleteTaskModal").on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) //Button that triggered the modal
var id = button.find('button').data('id') //need to find the button and get id
var url = '/delete/' + id; //url
console.log('data-id= ' + id) //15
//Click delete task in modal
$(document).on('click', '.delete_task', function() {
if (confirm('Delete task')) {
$.ajax({
url: url,
type: "DELETE",
success: function(result) {
$('#deleteTaskModal').modal('hide') //hide modal on success
console.log("Deleting task...");
window.location.href = '/';
},
error: function(err) {
console.log(err);
}
})
}
})
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<span data-toggle="tooltip" data-placement="bottom" title="Delete task">
<a data-toggle="modal" data-target="#deleteTaskModal">
<button class="deleteTask fas fa-trash-alt" data-id='15'></button>
</a>
</span>
<div class="modal fade" id="deleteTaskModal" tabindex="-1" aria-labelledby="exampleformModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form class="" action="" method="">
<div class="modal-header">
</div>
<div class="modal-body">
<h3>Do you want to delete this task?</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary delete_task">Delete Task</button>
</div>
</form>
</div>
</div>
</div>
</div>

Is there a way top open a modal from selecting a node from vis.js?

I'm trying to open a modal when clicking on a node within a network map i have made using vis.js
I am unsure about where I would place the data-target tag,but I'm not sure if that's the issue, below is the JS that I have written to handle a click action as well as the modal
Currently the data-target is declared within the div tag where the network map is placed after it has been generated (I know this is wrong)
The JS is being Generated in PHP hence the PHP var being thrown in there
Click Action -
network.on( 'click', function(properties) {
var ids = properties.nodes;
var clickedNodes = ".$nodes.".get(ids);
console.log('clicked nodes:', clickedNodes);
console.log('/monitoring/loadNode/'+clickedNodes[0].id);
$( '#myModalDeviceDetails' ).html('<h1><center><font color=\'white\'>Loading</font></center></h1>');
$( '#myModalDeviceDetails' ).load( '/monitoring/loadNode/'+clickedNodes[0].id ).show();
});
Modal-
<div class="modal fade modal-primary" id="myModalDeviceDetails" tabindex="-1" role="dialog" aria-labelledby="Device Details">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Device Details</h4>
</div>
<div class="modal-body">
loading...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Thanks in advance!

I can see that is a bootstrap modal. It has functions like the following:
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
I would recommend hiding the modal when you load the page and than just show it.

Bootstrap & jQuery: href in modal displays linked sub-modal prior to click event

I'm having a problem with my modal. I want a modal to display each post's comments, so I created a link and a modal which are in a post.each loop. The problem is that it seems like the modal and the link are not 'linked'. The modal is displaying the content like it should but... the links don't work and each modal is displaying under each link even before any clicking. And sorry if it is a big mistake, I am pretty new to this.
My Modal:
<div class="modal-dialog">
<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">
</div>
<div class="modal-footer">
Close
Button
Another button...
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
My link:
<span class="glyphicon glyphicon-comment"></span> Comment
My JS:
$('[data-toggle="ajaxModal"]').on('click',
function(e) {
$('#ajaxModal').remove();
e.preventDefault();
var $this = $(this)
, $remote = $this.data('remote') || $this.attr('href')
, $modal = $('<div class="modal" id="ajaxModal"><div class="modal-body"></div></div>');
$('body').append($modal);
$modal.modal({backdrop: 'static', keyboard: false});
$modal.load($remote);
}
);

jquery accessing data-attrs

I'm using bootstrap modal for destroying task objects. When I click on a given task on the index page the modal window pops up and the destroy link of that task gets loaded via data attr, so modal will know which task should be destroyed when user clicks on #delete-task-submit button.
The code works as it is, but I'd like to use data-behavior="delete-task-submit" instead of #delete-task-submit to be clear that this has nothing to do with styling and it's only there for the js call.
What's the right way to do it? I'm asking this because #delete-task-submit is used in the first js call for finding/setting data-task-destroy-link and don't know how else I can find that data attribute without adding id/extra class there.
<div class="modal fade" id="delete-task-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content" style="text-align:left">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Delete Task</h4>
</div>
<div class="modal-body">
<h4>Are you sure?</h4>
<p> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="deletetaskclose">Close</button>
<a href="#" id="delete-task-submit" type="button" class="btn btn-danger" data-task-destroy-link >Delete Task</a>
<!-- DESTROY LINK GETS INSERTED HERE -->
</div>
</div>
</div>
</div>
$(document).on('click', '[data-behavior="open-delete-task-modal"]', function (event) {
var taskDeleteLink = $(this).data("task-delete-link");
$('#delete-task-submit').data("task-destroy-link", taskDeleteLink);
});
$(document).on('click', '#delete-task-submit', function (event) {
var href = $(this).data("task-destroy-link");
$.ajax({
type: "DELETE",
url: href,
dataType: "script"
});
});

I'm asking this because #delete-task-submit is used in the first js call for finding/setting data-task-destroy-link and don't know how else I can find that data attribute without adding id/extra class there.
Replace $('#delete-task-submit') with $('[data-behavior="delete-task-submit"]') selector in that part of your code and add data-behavior="delete-task-submit" attribute to your link.
Delete Task

jQuery Submit is not working?

I used modal of bootstrap and when i click Add Changes button, nothing happens.. :(
Script in head:
<script>
$("addBtn").click(function() {
$("programFormDropDown").submit(function(event) {
});
});
</script>
My modal in body:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirm your change</h4>
</div>
<div class="modal-body">Are you sure you need to add these ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="addBtn" class="btn btn-primary">Add changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
and my form in same body
<form id="programFormDropDown" action="../hDashBoard/project">
.....
can you give some idea?

You seem to have forgoten a # in your selectors, unless you are using Mootools which gets the ID with $('id') try this:
$("#addBtn").click(function() {
^
$("#programFormDropDown").submit(function(event) {
^
});
});

You seem to be missing the '#' reference from your selector.
<script>
$("#addBtn").click(function() {
$("#programFormDropDown").submit(function(event) {
});
});
</script>

you have miss # in two selector jquery
try this:
$("#addBtn").click(function() {
$("#programFormDropDown").submit(function(event) {
});
});
instead of this:
$("addBtn").click(function() {
$("programFormDropDown").submit(function(event) {
});
});

Looks like you are not looking for ajax submit, in that case change the button type to submit like
<button id="addBtn" class="btn btn-primary" type="submit">Add changes</button>
if you want to use script
/add script in dom ready handler
jQuery(function () {
//use id selectors - # in front of id
$("#addBtn").click(function () {
//call the dom elements submit method
$("#programFormDropDown")[0].submit();
});
})