We Keep Coding

Modal won't close and prevent default on no click, and won't execute func on yes click

I have a modal with two buttons. One is a yes button and one is a no button. If yes button is pressed, I would like the remainder of the function to execute. If no btn clicked, I would like the page to prevent default and not execute. However, it seems that regardless of which button is clicked, nothing happens besides the modal closing. I am using a modal example I found elsewhere, so this may be the issue. After glancing at it for some time I cannot seem to find where the issue is. Am I missing something small? Or perhaps my Jquery is wrong? Below is my code:
Modal:
<!-- Modal for delete-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content border-primary mb-3 box-shadow-none img-responsive">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="card-body bg-light">
<div id="del" class="center">
<label>Are you sure you want to delete?</label>
</div>
</div>
<div class="modal-footer">
<div id="deleteYes">
<button type="button" class="btn btn-default" data-dismiss="modal" id="deleteYes">Yes</button>
</div>
<div id="deleteNo">
<button type="button" class="btn btn-default" data-dismiss="modal" id="deleteNo">No</button>
</div>
</div>
</div>
</div>
</div>
And here is my Jquery:
$(".btnDeleteTerminalCommand").click(function (e) {
$("#deleteModal").modal('toggle');
if ($("#deleteNo").click) {
return e.preventDefault();
}
var rowId = "#" + $(this).data("rowindex");
var row = $(rowId);
var termId = row.find(".tdTermId").html().trim();
var cmdId = row.find(".tdCmdId").html().trim();
var cmdVal = row.find(".tdCmdVal").html().trim();
var cmdID = row.find(".cmdID").html().trim();
var data = {
TerminalID: termId,
CommandID: cmdId,
CommandValue: cmdVal,
ID: cmdID
};
$.ajax({
url: '#Url.Action("DeleteTerminalCommand", "TerminalCommand")',
type: "POST",
data: data,
success: function (response) {
console.log("Success");
window.location.href = response.Url;
}
});
});
Any advice helps! Thank you!

Your click handler will toggle the modal and immediately continue to execute the rest of the function before the user can click anything. If your modal has two buttons, create a click handler for each button. Perhaps the No button just closes the modal. The Yes button handler can execute the actions required to accomplish the task.
$(".btnDeleteTerminalCommand").click(function(e){
$("#deleteModal").modal('toggle');
}
$("#deleteNo").click(function(e){
$("#deleteModal").modal('hide');
}
$("#deleteYes").click(function(e){
// build data object
// ajax post
}

how to pass variable from js to modal [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
Hi friends I just wanted to pass a variable to my modal from the script. I am using CodeIgniter as frame work which enables me to generate table with its built-in library. When I press the view button on my table it gets the corresponding id, gets back to controller to grab the table content and returns the table content to the script.
Now I have the data in the script called “data[‘viewTable’]” and in my modal id called body have the function call $this->table->generate($tabledata). I just wanted to use the data I have in the script to be in the place of variable $tabledata as it becomes $this->table->generate(data[‘viewTable’]) the question how do I get this data from the script.
I have searched for related problems on google but what I got changes the whole content of the modal specified by id. U may suggest me to generate a table inside the script and change the modal by using innerHTML but I tried and still it doesn’t work.
Here is partial view of my code
<div id="view_modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="title">View schedules</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="body">
<?php
//how do I get the variable in the script to be used in the place of $viewTable
echo $this->table->generate($viewTable);
?>
</div>
<div class="modal-footer">
<button type="button" class="saveview btn btn-primary">Save</button>
<button type="button" class="closeview btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
An on the script I have
$(document).on('click', '.view', function () {
var id = $(this).data('id');
var formdata = '&action=viewschedule&ajax=1&id=' + id;
$.ajax({
async: false,
type: "POST",
data: formdata,
dataType: "json",
success: function (data) {
//Here i got data from the database and I want to pass to modal id 'body'
$('#view_modal').show();
}
});
});

Based on your updated question, you need to just target your #body and updated the html. Here's how you'd do that with the jQuery you're already using
$('#body').html(data.viewTable);
Solution
$(document).on('click', '.view', function () {
// Shortcut for the demo, delete this part
var data = {viewTable: '<table><tr><td>Hello</td></tr></table>'}
$('#body').html(data.viewTable);
$('#view_modal').show();
// Your code, already updated to work.
var id = $(this).data('id');
var formdata = '&action=viewschedule&ajax=1&id=' + id;
$.ajax({
async: false,
type: "POST",
data: formdata,
dataType: "json",
success: function (data) {
$('#body').html(data.viewTable);
$('#view_modal').show();
}
});
});
#view_modal {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="view">View</button>
<div id="view_modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="title">View schedules</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="body"></div>
<div class="modal-footer">
<button type="button" class="saveview btn btn-primary">Save</button>
<button type="button" class="closeview btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Bootstrap 4 load modal-Content from other page [duplicate]

I can't make the Modal work in the remote mode with the new Twitter Bootstrap release : Bootstrap 4 alpha. It works perfectly fine with Bootstrap 3. With bootstrap 4 I am getting the popup window, but the model body is not getting loaded. There is no remote call being made to myRemoteURL.do to load the model body.
Code:
<button type="button" data-toggle="modal" data-remote="myRemoteURL.do" data-target="#myModel">Open Model</button>
<!-- Model -->
<div class="modal fade" id="myModel" 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>
<h3 class="modal-title" id="myModalLabel">Model Title</h3>
</div>
<div class="modal-body">
<p>
<img alt="loading" src="resources/img/ajax-loader.gif">
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>

Found the problem: They have removed the remote option in bootstrap 4
remote : This option is deprecated since v3.3.0 and will be removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.
I used JQuery to implement this removed feature.
$('body').on('click', '[data-toggle="modal"]', function(){
$($(this).data("target")+' .modal-body').load($(this).data("remote"));
});

According to official documentation, we can do the follow(https://getbootstrap.com/docs/4.1/components/modal):
$('#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
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
So, I believe this is the best approach (works for BS 5 too):
<!-- Button trigger modal -->
<a data-bs-toggle="modal" data-bs-target="#modal_frame" href="/otherpage/goes-here">link</a>
<!-- Modal -->
<div class="modal fade" id="modal_frame" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- Completes the modal component here -->
</div>
<script>
$('#modal_frame').on('show.bs.modal', function (e) {
$(this).find('.modal-body').load(e.relatedTarget.href);
});
</script>
e.relatedTarget is the anchor() that triggers the modal.
Adapt to your needs

As some of the other answers and Bootstrap docs indicate, Bootstrap 4 requires handling the show.bs.modal event to load content into the modal. This can be used to either load content from an HTML string, or from a remote url. Here's a working example...
$('#theModal').on('show.bs.modal', function (e) {
var button = $(e.relatedTarget);
var modal = $(this);
// load content from HTML string
//modal.find('.modal-body').html("Nice modal body baby...");
// or, load content from value of data-remote url
modal.find('.modal-body').load(button.data("remote"));
});
Bootstrap 4 Remote URL Demo
Another option is to open the modal once data is returned from an Ajax call...
$.ajax({
url: "http://someapiurl",
dataType: 'json',
success: function(res) {
// get the ajax response data
var data = res.body;
// update modal content
$('.modal-body').text(data.someval);
// show modal
$('#myModal').modal('show');
},
error:function(request, status, error) {
console.log("ajax call went wrong:" + request.responseText);
}
});
Bootstrap 4 Load Modal from Ajax Demo

In Asp.NET MVC, this works for me
html
Edit item
<div class="modal" id="modalPartialView" />
jquery
<script type="text/javascript">
function Edit(id)
{
$.ajax({
url: "#Url.Action("ActionName","ControllerName")",
type: 'GET',
cache: false,
data: {id: id},
}).done(function(result){
$('#modalPartialView').html(result)
$('#modalPartialView').modal('show') //part of bootstrap.min.js
});
}
<script>
Action
public PartialViewResult ActionName(int id)
{
// var model = ...
return PartialView("_Modal", model);
}

If you use the Jquery slim version (as in all the Bootstrap 4 docs and examples) the load function will fail
You need to use the full version of Jquery

This process is loading the current dynamic. data remote = "remoteContent.html"
<!-- Link trigger modal -->
<a href="javascript:void(0);" data-remote="remoteContent.html" data-toggle="modal" data-target="#myModal" data-remote="true" class="btn btn-default">
Launch Modal
</a>
This trick : data-remote="remoteContent.html"
<!-- Default bootstrap modal example -->
<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-label="Close"><span aria-hidden="true">×</span></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>

Javascript function not defined for Bootstrap Modal

I want to make a modal edit form to show up after clicking certain button in HTML. This is the javascript :
<script>
var edit;
jQuery( document ).ready(function( $ ) {
// Edit Data (Modal and function edit data)
edit = function edit(id, un, nl, em, nh, st) {
//$('#myModal').attr('action', '{{ url('user/edit') }}/'+id;
$('#footer_action_button').text("Update");
$('#footer_action_button').addClass('yellow btn-outline');
$('.btn').addClass('edit');
$('.modal-title').text('Edit Pengguna');
$('.delete').hide();
$('.form-horizontal').show();
$('#un').val(un);
$('#nl').val(nl);
$('#em').val(em);
$('#pw').attr('placeholder', 'Isi Jika Ingin Diganti');
$('#nh').val(nh);
$('#st').val(st);
$('#myModal').modal('show');
}
});
</script>
With this code, the modal form shows up, but I can't do the update because there's no url involved. And so, when I add modal action (simply remove the comment tag) I got error that my edit function is not defined. For now I only write my JS code in this question beacuse I don't see other codes related, but let me know if you need an update.
Regards.

you can create a anonymous function to get the popup.syntax for commented part in your code is wrong i have updated it and kept it commented.Try like this:
var edit = function(id, un, nl, em, nh, st) {
// $('#myModal').attr('action', "{{ url('user/edit') }}/"+id);
$('#footer_action_button').text("Update");
$('#footer_action_button').addClass('yellow btn-outline');
$('.btn').addClass('edit');
$('.modal-title').text('Edit Pengguna');
$('.delete').hide();
$('.form-horizontal').show();
$('#un').val(un);
$('#nl').val(nl);
$('#em').val(em);
$('#pw').attr('placeholder', 'Isi Jika Ingin Diganti');
$('#nh').val(nh);
$('#st').val(st);
$('#myModal').modal('show');
};
SEE A DEMO BELOW:
var edit = function(id, un, nl, em, nh, st) {
$('#myModal').attr('action', "{{ url('user/edit') }}/"+id);
$('#myModal').modal('show');
};
edit('id','un','nl','em','nh','st');// this test is only for example you pass your data here
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Bootstrap Modal with individual attributes

I would like to use one Bootstrap Modal for several functions, which should be loaded dynamically by clicking on a button / link (see example).
For some reason the attributes (data-mTitle & data-mParams) will not load. With the standard attributes
like href, id, class etc. it works flawlessly.
As I said, I would like to use only one Modal (HTML) and one JS function for all purposes (as an universal solution). Any idea what I am doing wrong?
$(document).ready(function(){
$('#myModal').on('shown.bs.modal', function () {
var $modal = $(this),
modal_title = $(this).data('modal-title'),
modal_params = $(this).data('modal-params');
if(typeof modal_title !== typeof undefined && modal_title !== false) {
title = modal_title;
}
else{
title = 'My Title';
}
$.ajax({
cache: false,
type: 'POST',
url: '/ajax.php',
data: modal_params,
success: function(data) {
$modal.find('.modal-title').html(title);
$modal.find('.modal-body').html(data);
}
});
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
Link 1
Link 2
<div class="modal hide fade" id="myModal">
<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">Loading title...</h4>
</div>
<div class="modal-body">
Loading content...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

You must use only lower-case letters in your attribute names.
You can find the reason in this answer.
Basically, when you write:
$(this).attr('data-mTitle')
jQuery is looking for this:
<a data-m-title="Title"></a>
By the way, even though there's nothing wrong with using .attr() here, instead you should use .data() that is specifically meant for working with data attributes.