Develop Reference

How to create a click-function in a modal

Hey I am new to js and I was trying to open a bootstrap modal with a click on a button (I set the id to the value of the button because the id comes from a database) and if you click on "yes" in that modal a click function should be triggered which should then delete the selected row.
I am able to open the modal and setting the id also works but if I click the yes button in the modal there is no alert...
This is the modal located in content.html:
<!--Delete Modal-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Return Device</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<p><b> Are you sure you want to return this device? </b></p>
Please make sure you return the device.
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary delBtn" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
This is my JS located in main.js:
$(document).ready(function () {
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus');
});
$('#booked').click(function () {
$('#changestuff').load('content.html #booked', function () {
register();
change();
$('.ret').click(function () {
var id = $(this).val();
var tr = $(this).closest('tr');
})
returnOne(id, tr);
});
$('#booked').addClass('active');
$('#book').removeClass('active');
$('#admin').removeClass('active');
});
});
function returnOne(id, tr)
{
$('.delBtn').click(function () {
alert("you returned" +id);
})
}
Where is my error? I think it might be because the modal hasn't been loaded when I try to get the click event but I'm not sure. Thanks in advance!

click event handler is not attaching may be it is getting called before yes button dom get created.
Try below code where you can store row to be deleted in a variable and set row-id data attribute on Yes button. In click handler of Yes button, read the id and you can delete row from variable rowToDelete
$(document).ready(function(){
var rowToDelete;
$('#myModal').on('shown.bs.modal', function(){
$('#myInput').trigger('focus');
});
/*$('#changestuff').load('content.html #book', function(){
register();
change();
getChosenDevices();
});*/
$('#changestuff').on('load','content.html #book', function(){
register();
change();
getChosenDevices();
});
$('#booked').click(function() {
$('#booked').addClass('active');
$('#book').removeClass('active');
$('#admin').removeClass('active');
});
$(document).on('click','.ret',function() {
var id = $(this).val();
$('#deleteModal .delBtn').data('row-id', id); //set data id
rowToDelete = $(this).closest('tr'); //store row in variable
});
$(document).on("click", '#deleteModal button.delBtn', function(e) {
e.preventDefault();
var rowId = $(this).data('row-id');
alert("you returned" + rowId);
$('#deleteModal').modal('toggle');
});
});
JSFiddle Demo

How to capture a button click event from a different page in a different View and make DOM manipulation in the source page?

I have the following html construct in the source Page View:
<i id="asterisk" class="fa fa-asterisk show asterisk" ></i>
<a id="tos" data-toggle="modal" data-target="#divTermsAndConditions" href="#Url.Action("TermsOfServiceFromRegistration", "Account", new { lk = ViewBag.LicenseKey })" target="_blank">
<div>
<div class="modal fade" id="divTAndC" role="dialog" data-backdrop="static" data-keyboard="false" aria-describedby="termsandconditions" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
#if (ViewData.ModelState.IsValid && fetchTOSAction) {
{ Html.RenderAction("TermsOfServiceFromRegistration", "Account", new { lk = ViewBag.LicenseKey }); }
}
</div>
</div>
</div>
</div>
And the new View which it opens, has a button:
<button class="btn btn-primary" id="btnClose" data-dismiss="modal">Close</button>
As you can see, it is a bootstrap button and on clicking of it, it closes the current window:"TermsofService.cshtml".
Now, my requirement is like this:
1.Capture this button click event
2.And on that event make some DOM manipulation in the source View, like :
$("#asterisk").removeClass("show").addClass("hide");
Is it possible?
Any help will be highly appretiated.
Thanks in advance.

Solved it myself!Bingo!
Here it is:
$("#divTAndC").on("hidden.bs.modal", function () {
$("#check").removeClass("hide").addClass("show");
});
Basically, in the source view itself,bind the function on modal close.
Thats it!

Boostrap modal not loading when wired using jquery

I have the following link and I'm trying to load a bootstrap modal when its clicked but the javascript function doesnt seem to be firing. Instead of the view loading inside a modal, its loading as a new page?
#*this is the modal definition*#
<div class="modal hide fade in" id="report-summary">
<div id="report-summary-container"></div>
</div>
<script >
$('a.js-report-summary').click(function (e) {
var url = $(this).attr('href'); // the url to the controller
e.preventDefault();
$.get(url, function (data) {
$('#report-summary-container').html(data);
$('#report-summary').modal('show');
});
});
</script>
public ActionResult ReportSummary()
{
// some actions
return PartialView("ReportSummary", viewmodel)
}
// Report summary view which contains modal
<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">#ViewBag.FormName - Analysis</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
There are no errors showing in the console either so why isn't the jquery function firing?

in your click function, add parameter e this will stand for event
then in the function itself add e.preventDefault() This will stop the refreshing effect.

on your controller method try
public ViewResult ReportSummary()
{
// some actions
if(Request.IsAjaxRequest())
return PartialView("ReportSummary", viewmodel);
else
return View("ReportSummary", viewmodel);
}
on your view
$('#exampleModal').on('show.bs.modal', function (event) {//give your model wrapper an id
//do some ajax and get html
$.ajax({
url:'',
success:function(data){
$('#report-summary-container').html(data);
}
});
})
on your anchor tag, add data-toggle="modal" data-target="#exampleModal"
if you dont want to use bootstrap events trigger your modal with
$('#myModal').modal('show')

Open a bootstrap modal from another page

I have a list of links that each open their own modal. Each of these modals contents display an html file. Here is a sample;
<div id="how-rtm-works" class="modal hide 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">×</button>
<h1 id="myModalLabel">How Right to Manage works</h1>
</div>
<div class="modal-body" id="utility_body">
<p>One fine body…this is getting replaced with content that comes from passed-in href</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<li><a data-target="#how-rtm-works" href="modal-content/how-RTM-works.html" role="button" data-toggle="modal">How Right to Manage works</a></li>
Because there is more than one modal, each has its own ID which is referenced in the data-target.
Can anyone advise me on how I would target these modals from another page, or in my case all pages as these will be linked in the website footer nav.

First page you'll use:
Open Modal
At the second page you'll insert your modal and the follow script:
<script type='text/javascript'>
(function() {
'use strict';
function remoteModal(idModal){
var vm = this;
vm.modal = $(idModal);
if( vm.modal.length == 0 ) {
return false;
}
if( window.location.hash == idModal ){
openModal();
}
var services = {
open: openModal,
close: closeModal
};
return services;
///////////////
// method to open modal
function openModal(){
vm.modal.modal('show');
}
// method to close modal
function closeModal(){
vm.modal.modal('hide');
}
}
Window.prototype.remoteModal = remoteModal;
})();
$(function(){
window.remoteModal('#myModalLabel');
});
</script>

Well your modals had IDs, I think you can trigger them by adding #how-rtm-works to the end of the link
for example if you have a modal called
id="My_Modal"
you can make a link
Link me to the modal
If that is your question I guess this can help you out !

Bootstrap modal popup not working properly in aspx

i have this button B1 (say)
when i click on this B1 a modal popup appears with buttons / links
when i click the button / link a new popup should appear but i dont get the Modal window but i do get the values in firebug
Here is the code to the Button B1
<div class="thumbnail" ><img src="../Images/pix/B1.png" href="#B1Market" data-toggle="modal" /></div>
which then calls this modal popup which contains the content from the div divB1Market
<div class = "modal fade" id="B1Market" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Heading</h3>
</div>
<div class="modal-body">
<div id='divB1Market' runat="server"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
</div>
</div>
</div>
The code below is the link / content inside the divB1Market
<a href='#' data-dismiss='modal' onclick='JavaScript:" + (user.RoleID == 3 ? "PlayerMP." : "") + "showFunctionDetails(1," + drMTDFunction["PlayerID"] + "," + SessionID + "," + SessionNum + ");'>Link here</a>
which inturn calls the ajax call
PlayerMP.getFunctionDetails = function (type, UserID, SessionID, SessionNo) {
$.ajax({
type: "GET",
url: PlayerMP.URL,
data: "rt=4&type=" + type + "&UserID=" + UserID + "&SessionID=" + SessionID + "&SessionNo=" + SessionNo,
success: function (FinancialSplitsJS) {
if (FunctionalSplitsJS.indexOf("SessionExpired=1", 0) == -1) {
$("#divFunctionalDetails").html(FunctionalSplitsJS);
switch (type) {
case 1:
$("#divFunctionalsSplit");
break;
}
$("#divFunctionalsSplit").show(); /* calling the div with this id in the aspx page */
}
else
window.location.href = "../Login.aspx?SessionExpired=1";
}
});}
This is the modal-popup content in the aspx page
<div class="modal fade" id="divFunctionalsSplit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <%--this is the one not showing up--%>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Content</h3>
</div>
<div class="modal-body">
<div id="divFunctionalDetails" style="color:Black;"></div>
</div>
</div>
</div>
</div>
This is what i get when i openup firebug and hover around with my cursor
But when i try to debug the code with firebug i get the responses (in the console) perfectly. I'm not able to figure out where the error might be.
This is the order of my importing the packages (posted this because i got this error while using )
$("#divFunctionalsSplit").modal().show();
Uncaught TypeError: Object #<Object> has no method 'modal'
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<!-- Start of BootStrap -->
<link href="../Scripts/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="../Scripts/bootstrap.min.js" type="text/javascript"></script>

All I needed to add was jQuery.noConflict(); before $('#divID').modal('show')
it had to something to do with with other plugins conflicting.
This Helped Me

It would appear that the id of your modal is getting overwritten by ASP. It changes from #B1Market to #divFunctionalSplit. I assume your button still has an href of #B1Market. Simple solution would be to change the href to match the div id. Better solution would be to prevent ASP from replacing the id.