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
Related
I'm attaching handler to the Bootstrap hidden.bs.modal event to detect when the modal is closed, but it can be closed in multiple ways:
Explicitly close it via$('#modal').modal('hide') or $('#modal').modal('toggle');
Clicking on modal's backdrop part (if allowed);
Via data attributes e.g. data-dismiss="modal"
Is there a way to detect which of the options was used? Inside the hidden.bs.modal handler e.target always appears to be div#modal
The thing is that hidden.bs.modal is an event that fires once the modal has been closed. So that is not the click event the user triggered from the close button, the corner X or the overlay...
That said, you can use the click event to store where the user clicked in a variable and milliseconds after, when the hidden.bs.modal fires, use the variable.
Demo:
$(document).ready(function(){
// Variable to be set on click on the modal... Then used when the modal hidden event fires
var modalClosingMethod = "Programmatically";
// On modal click, determine where the click occurs and set the variable accordingly
$('#exampleModal').on('click', function (e) {
if ($(e.target).parent().attr("data-dismiss")){
modalClosingMethod = "by Corner X";
}
else if ($(e.target).hasClass("btn-secondary")){
modalClosingMethod = "by Close Button";
}
else{
modalClosingMethod = "by Background Overlay";
}
// Restore the variable "default" value
setTimeout(function(){
modalClosingMethod = "Programmatically";
},500);
});
// Modal hidden event fired
$('#exampleModal').on('hidden.bs.modal', function () {
console.log("Modal closed "+modalClosingMethod);
});
// Closing programmatically example
$('#exampleModal').modal("show");
setTimeout(function(){
$('#exampleModal').modal("hide");
},1000);
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- 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>
CodePen
You can use the hide.bs.modal event to capture the document.activeElement. If you have multiple buttons all of which include data-bs-dismiss='modal', this will allow you to determine which of those buttons was pressed. This avoids the need for onclick= approaches or additional event handlers.
It seems it would be more elegant if the Event object for the hide.bs.modal event had a .relatedTarget or similar which contained the triggering element, but alas that's not the case right now.
The example below assumes jQuery with $:
$(() => {
var $dlg = $("#myBootstrapModalDialog");
var $closeElement;
$dlg.on('show.bs.modal', (e) => {
// maybe do something to initialize the modal here...
})
.on('hide.bs.modal', (e) => {
$closeElement = $(document.activeElement);
})
.on('hidden.bs.modal', (e) => {
var id = $closeElement.attr('id');
// do something depending on the id...
if (id === 'btn-save') {
// save something
}
$closeElement = null;
});
});
Sample HTML:
<div class="modal fade"
id="myBootstrapModalDialog"
tabindex="-1"
aria-labelledby="myDialogTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content rounded-0 mx-auto">
<div class="modal-header">
<h3 class="modal-title text-primary" id="myDialogTitle">
Save this stuff?
</h3>
<button id="btn-close" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body px-3">
Are you sure you want to save this stuff?
</div>
<div class="modal-footer">
<button id="btn-cancel" type="button" class="btn btn-link" data-bs-dismiss="modal">
Cancel
</button>
<button id="btn-save" type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Save
</button>
</div>
</div>
</div>
</div>
I have problem regarding getting the value in input textbox, this textbox was in modal form. I'm confuse when i put static value in input textbox the value is not empty, however when i use the element id value i can't get any value and the alert shows empty.
Modal:
<form action="" method="post" enctype="multipart/form-data">
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" 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">New Menu Section</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<label>Menu Name</label>
<input placeholder="For sharing..." name="menu_name_category" value="" class="form-control" id="menu_value" type="text" class="validate">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="save_menu_button">Save changes</button>
</div>
</div>
</div>
</div>
</form>
Javascript & Jquery:
var textFieldVal = document.getElementById("menu_value").value;
$('#save_menu_button').click(function() {
alert(textFieldVal);
});
You can get the value like the following
$('#save_menu_button').click(function(){
alert($('#menu_value').val());
});
No need for document.getElementById
For any one that might still need this, I found one correct answer at https://www.youtube.com/watch?v=8zTL1LMxBqc
Using JQuery, you just need to add the Modal ID to to the selector as below:
var textFieldVal = $("#exampleModalLongTitle #menu_value").val();
What happen here is you're getting value of your text field while loading and using that value in your click function.
Update your code as below. Only get element in object and use textFieldVal.value. It will solve your issue.
var textFieldVal = document.getElementById("menu_value");
$('#save_menu_button').click(function(){
alert(textFieldVal.value);
// With jQuery try like below.
// alert($('#menu_value').val());
});
The issue is that you're getting the input DOM value when the document is ready.
You should get the text input value when the click event handler is triggered.
$('#save_menu_button').click(function(){
var textFieldVal = $("#menu_value").val();
alert(textFieldVal);
});
change your script
$('#save_menu_button').click(function(){
var textFieldVal = document.getElementById("menu_value").value;
alert(textFieldVal);
});
the data was set when your html was set .. that why it alert empty ... if you put it inside the click function ... it get data when you click ...
I'm on a "blade" page that have:
<a
type="button"
data-passage="{{$passage}}"
class="btn btn-warning btn-xs editPassageButton"
data-toggle="modal"
data-target="#editPassage">Edit</a>
Then a modal like:
<div class="modal fade" id="editPassage"
tabindex="-1" role="dialog"
aria-labelledby="favoritesModalLabel">
<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="addPassageLabel">Modifica Brano</h4>
</div>
<div class="modal-body">
#php
$passage = "?????????";
#endphp
{{ Form::model($passage, array('route' => array('passage.update', 'null'), 'method' => 'POST')) }}
etc. etc.
Then a script part like this:
$(function() {
$('.editPassageButton').on("click", function (e) {
passage = $(this).data('passage');
});
});
And it works properly, so I cannot well understand how to send it to the php variable on the modal (the part with ???????). I found several post that suggest to send it trough a form, but it seem tricky to me, and for Laravel how it works?
do i need to add a route in that case? no cleaner way to do it? I know how to pass single variable to a modal form, but i prefer to using the variable that is the model that i need to update...
I was looking for a solution to my problem and I saw a lot of different ways to do that but none of them worked to me.
I'll paste my code here and see if you can help me somehow.
I have a draggable popup to display a note. There is a list of items on the main screen and everytime the user clicks on the "View" link it opens the popup with the Note for this specific item.
Everything is working properly. The popup opens with the right information and I can move the popup around the screen. Then only problem I have is:
Once I close the popup and open a new one, instead of reseting the popup to the original position it opens exactly where I left the other one. I need to reset the position for the popup when the user closes it.
This is my js:
require(['jquery'
, 'bootstrap'
, 'datepicker'
, 'typeahead'
, 'combobox'
, 'tagsinput'
], function($){
// DOM ready
$(function(){
$('.modal-dialog').draggable();
$('#noteModal').on('show.bs.modal', function(e) {
//get data-id attribute of the clicked element
var note = $(e.relatedTarget).data('note');
//populate the textbox
$(e.currentTarget).find('span[name="note"]').text(note);
});
});
});
This is the modal on my html page:
<!-- Modal to display the Note popup -->
<div class="modal" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModalLabel">
<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="noteModalLabel">Note</h4>
</div>
<div class="modal-body">
<span name="note" id="note"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
How can I reset the position for the popup everytime the user closes it?
THank you!
Inside your click handler, you can use JQuery to set the css of the modal like so:
if (!$(".modal.in").length) {
$(".modal-dialog").css({
top: 0,
left: 0
});
}
This will reset the position of your modal. You can use it before you call your modal in your JavaScript, assuming you are using JS to open your modal.
Try running the snippet below or see this CodePen Demo for an example of this using your modal.
// DOM ready
$(function() {
$(".modal-dialog").draggable();
$("#btn1").click(function() {
// reset modal if it isn't visible
if (!$(".modal.in").length) {
$(".modal-dialog").css({
top: 0,
left: 0
});
}
$("#noteModal").modal({
backdrop: false,
show: true
});
});
$("#noteModal").on("show.bs.modal", function(e) {
var note = $('#btn1').data('note');
$(e.currentTarget).find('span[name="note"]').html(note);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Modal to display the Note popup -->
<div class="modal" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModalLabel">
<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="noteModalLabel">Note</h4>
</div>
<div class="modal-body">
<span name="note" id="note"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button id="btn1" data-note="I am a note. Hello.">Show Modal</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
If you want to keep the background usable while your modal is open, I posted a solution to this a little while ago here.
I hope this helps!
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.