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...
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 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.
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
I am trying to implement a cookie compliance modal which lets the user accept or decline. When the user clicks accept, I set a cookie using a jQuery plugin by Carhartl (https://github.com/carhartl/jquery-cookie). When I use $.cookie('cookieCompliant', 'true); in the console, the cookie sets fine. However, the cookie will not set when used in my controller. I have tried vanilla JS and also Angular's $cookie, but none of them work. Is there a restriction to this? I also can't get alert() or console.log to work.
MainController
Main.controller("MainController", ['$scope', 'MainFactory', 'CookieFactory', function($scope, MainFactory, CookieFactory){
$scope.cookies = new CookieFactory();
$scope.siteSettings = new MainFactory();
$scope.agreeCookieCompliance = function(){
$.cookie("cookieCompliant", "true");
$('#cookieModal').modal("hide")
}
$scope.declineCookieCompliance = function(){
window.location.href = "https://encrypted.google.com/";
}
$scope.checkCookieCompliance = function(){
if($.cookie('cookieCompliant') === undefined){
$('#cookieModal').modal("show");
}
}
$scope.checkCookieCompliance();
}]);
index.php (modal)
<div class="modal fade" id="cookieModal"tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false" style="display: block; padding-left: 17px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">This site uses cookies</h4>
</div>
<div class="modal-body">
<p>This site uses cookies to give you the best possible experience. By clicking "Accept" you agree to the use of cookies.</p>
</div>
<div class="modal-footer">
<a class="pull-left" style="line-height: 2.5;" href="http://www.whatarecookies.com/" target="_blank">What are Cookies?</a>
<button type="button" ng-click="acceptCookieCompliance()" class="btn btn-success" data-dismiss="modal">Accept</button>
<button type="button" ng-click="declineCookieCompliance()" class="btn btn-danger">Decline</button>
</div>
</div>
</div>
</div>
Note: I am not using CookieFactory, it's only in there because I am frantically searching for a solution.