I currently have panels and each panel has an ID associated with it which is held in the data-id attribute of each panel. I can get this easily through JavaScript. One the panels I have a delete button which will delete the panel and it's entry within the database. Once this delete button is clicked, a modal will fire up with a Html.BeginForm() which is hooked up to an action on my controller. I was wondering if it was possible to add an the widget ID to the routing values via JavaScript?
Here is my modal:
<div class="modal fade" id="deleteWidgetModal" 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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Delete widget?</h4><!--add depending on which panel you have clicked-->
</div>
<div class="modal-body" id="myModalBody">
<!--Depending on which panel insert content-->
#using (Html.BeginForm("DeleteWidgetConfirmed", "Dashboard", FormMethod.Post,))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
Do you wish to delete this widget?
<div class="form-group">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" value="DeleteWidgetConfirmed" class="btn btn-danger btn-ok" id="delete-widget">Delete</button>
</div>
</div>
</div>
}
</div>
</div>
</div>
and here is the JavaScript:
/*---------------------------------------------DELETING PANELS-------------------------------------------------*/
$(document).ready(function () {
$('#columns').on('click', '.glyphicon.glyphicon-trash', function (event) {
//get id here
//toggle the modal
$('#deleteWidgetModal').modal('toggle');
//pass id to form
});
});
$(document).ready(function () {
document.getElementById('#delete-widget').onclick = function (event) {
event.preventDefault();
var parentElement = $(this).closest(".col-md-4.column");
var targetElement = $(this).closest(".panel.panel-default");
targetElement.remove();
//parentElement.addClass("expand-panel");
checkEmptyPanelContainers();
}
});
Html.BeginForm is transformed into a <form> tag before your javascript and user interaction is executed. You can modify that form using something like this
$("form").prop('myattribute', value)
Related
OnCheckedChanged function gets triggered when a radio button gets selected in a table of multiple rows. Each row represents details about a book.
The "bn" param is a book number.
The thing is I have to display a certain message inside the modal but only after I got a result from the action method showBook, because the message to be displayed depends on the bn value. After the message is displayed in modal, if the user chooses to delete the book, new action method needs to be called, and again we need to pass this bn parameter to another action method.
How to pass this bn to the modal and again to the action method inside modal? I'm using Asp.net MVC in case that can make things easier.
function OnCheckedChanged(bn) {
var url = "/book/showBook?bookNumber=" + bn;
$.get(url, function (result) {
$("#showBookModal").modal('show', function () {
//so now I need to tell the modal to display the details about the book,
//and the details are in a result, I don't know how to
});
});
}
<div id="myModal" class="modal fade" role="dialog">
<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">Book title</h4>
</div>
<div class="modal-body">
<p>display details about the book here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" data-dismiss="modal">delete this book</button>
</div>
</div>
</div>
</div>
if detail is not received in result. then how would you show the detail to the modal. Once you received the detail in result you can do as below:
function OnCheckedChanged(bn) {
var url = "/book/showBook?bookNumber=" + bn;
$.get(url, function (result) {
$("#showBookModal").modal('show', function () {
//so now I need to tell the modal to display the details about the book,
//and the details are in a result, I don't know how to
$('#pDetails').text(result);
});
});
}
<div id="myModal" class="modal fade" role="dialog">
<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">Book title</h4>
</div>
<div class="modal-body">
<p id="pDetails"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" data-dismiss="modal">delete this book</button>
</div>
</div>
</div>
</div>
I am building a table based on data returned from my API.
For each row in the table I would like to create a bootstrap modal with additional info in it.
This is how I do it right now. I created a designated div and I put all the modals inside it. Please note that in addition the modal's HTML is pretty big by itself:
let modal = `<div id="modal-${i}">big HTML here</div>`;
$("#modalsCollector").append(modal);
And this is how my table row looks like:
<tr data-toggle="modal" data-target="#modal-${i}">
Because I sometimes have 500+ table rows there is eventually a huge div (#modalsCollector) full of same (by structure) modals. I feel that it affects page performance.
Is there a better, more elegant and performance optimized way to bind modals to table rows? Or in general, working with many hidden elements instead of pushing them into the DOM that way?
You can include only one "null" modal in your <body>, like this:
<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>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Then when you have to show the modal generate it using jQuery like this:
$("#button").click(function(e){
$("#myModal .modal-header").append(HTML for modal header here);
$("#myModal .modal-body").html(big HTML for modal body here);
$("#myModal").modal("show");
});
So, basically you change the modal header and the modal body of the same modal each time, with the needed information accordingly, without the need of like thousands of modals.
Bootstrap has a neat way of changing the components of the same modal. This is as long as you need the same modal just different content inside.
https://getbootstrap.com/docs/4.5/components/modal/#varying-modal-content
Here is an example:
HTML:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Open modal for #mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#fta">Open modal for #fat</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and jQuery:
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// Update the modal's content.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
I have a listing page containing a link button to show modal repeating in a PHP loop. I have searched and found these:
Passing data to a bootstrap modal, Passing data to Bootstrap 3 Modal and Pass id to Bootstrap modal and some others but failed.
What I want
I have fetched the data id from database and pass it to bootstrap modal and there I will use this id to display more info through MySQL queries.
I have written all the code but the ID is not passing to the modal.
Modal Link Button code
<a class="btn btn-warning btn-minier" href="#modal-form-show" role="button" data-toggle="modal" data-target="#myModal" data-id="<?php echo $cottage_id ?>"><i class="icon-edit bigger-120"></i> Reservation </a>
Modal code
<!-- 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">Reservation Details</h4><br>
<h5>Cottage Id :</h5>
<h5>Cottage Title :</h5>
</div>
<div class="modal-body">
<p>ID WILL SHOW IN THIS TEXT FIELD.
<input type="text" name="cottage" placeholder="cottage id" value="" id="cottage" />
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
JS code
$('#modal-form-show').on('show.bs.modal', function(e) {
var c_id= $('a[href="#modal-form-show"]').data('id');
//var c_id= $(this).data(id) - checked both
$("#cottage").val(c_id);
});
I have taken a text input in modal named cottage and I want show that id in this input.
Try this snippet:
$('.btn-minier').click(function(){
var c_id = $(this).attr('data-id');
$('#cottage').val(c_id);
});
I have change little , when button click show the popup & i've set the value of data-id=2
Button
<a class="btn btn-warning btn-minier" id="btnModalPopup" href="" role="button" data-toggle="modal" data-target="" data-id="2"><i class="icon-edit bigger-120"></i> Reservation </a>
I add button in you 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">Reservation Details</h4><br>
<h5>Cottage Id :</h5>
<h5>Cottage Title :</h5>
</div>
<div class="modal-body">
<p>
ID WILL SHOW IN THIS TEXT FIELD.
<input type="text" name="cottage" placeholder="cottage id" value="" id="cottage" readonly />
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" data-dismiss="modal" id="btnSubmit">Submit</button>
</div>
</div>
</div>
</div>
Javascript code
<script>
$(document).ready(function () {
$('#btnModalPopup').click(function () {
var c_id = $(this).data('id');
console.log(c_id)
$('#myModal #cottage').val(c_id)
$('#myModal').modal('show')
});
$('#btnSubmit').click(function () {
alert('submit button click')
// get the id , from input field.
var id = document.getElementById('cottage').value;
console.log(id)
alert(id)
//You can set the id - to php variable - then hit to sever by ajax
})
});
</script>
Try using attr method of JQuery
$('#modal-form-show').on('show.bs.modal', function(e) {
// instead of this
//var c_id= $('a[href="#modal-form-show"]').data('id');
// try this one
var c_id= $('a[href="#modal-form-show"]').attr('data-id');
//var c_id= $(this).data(id) - checked both
$("#cottage").val(c_id);
});
How do I add a bootstrap modal in the the javascipt on click. So far I was only able to alert ("hello") on click. How do i prompt out a modal box?
graph.on("click", function (params) {
var node = params['nodes'][0];
displayInfo=false;
if(node!=null){
console.log('node:'+ params['nodes'][0]);
x = params["pointer"]['canvas']['x'];
y = params["pointer"]['canvas']['y'];
displayInfo=true;
lastNode = nodes.get(node);
lastClick = params['pointer'];
//console.log(node);
}
alert("hello");
//add boostrap modal here
});
You don't need an onclick.
<div class="span4 proj-div" data-toggle="modal" data-target="#GSCCModal">Clickable content, graphics, whatever</div>
<div id="GSCCModal" class="modal fade" 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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
If you need an onclick event anyhow, use it like below:
graph.on("click", function (params) {
$('#myModal').modal('show');
}
Reference: http://getbootstrap.com/javascript/#modals
Create modal HTML and assign id for it, for example "my_modal"
http://getbootstrap.com/javascript/#live-demo
show the modal at the js using the code:
$("#my_modal").modal('show');
First make the modal pop up div then , Configure and use .modal('show')
For eg:-
You can also use onClick call for jquery here.
<div id="modalDiv">
//some content
</div>
In jquery use ,
$("#modalDiv").modal('show');
Check this http://getbootstrap.com/javascript/#live-demo
You can use id like
$("#modal-id").modal("show");
Or you can use class name $(".modal-class").modal("show");
I've got a google table that listens to a select event and then shows a modal bootstrap. Is it possible to have my modal text display data from the selected row?
google.visualization.events.addListener(table, 'select', function () {
var row = table.getSelection()[0].row;
alert(data.getValue(row, 0))
$("#myModal").modal();
});
The alert shows the string I want in my modal window as well.
With the following 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">Modal Header</h4>
</div>
<div class="modal-body edit-content">
<p id='inputId'>Display text here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Try
var modalcontent = data.getValue(row, 0);
$("#inputId").html(modalcontent);
right before $("#myModal").modal();
Here you can find the doc for this method.