I tried to make a modal. I use AJAX to show the modal but the modal is invisible. When I use the button's trigger with data-toggle and data-target, the modal is showing up visible.
This is what I have tried to do
Check that all script is correctly loaded
Tried to reorder script
Delete fade class in modal and the modal visible but with bad UI
Change bootstrap version but result is same
This is my code
AJAX
$("body").on("click", ".btn-show", function (event) {
event.preventDefault();
var me = $(this),
url = me.attr("href"),
title = me.attr("title");
$("#modal-title").text(title);
$.ajax({
url: url,
dataType: "html",
success: function (response) {
$("#modal-body").html(response);
$("#modal").modal("show");
},
});
});
HTML Modal
<div class="modal fade" id="modal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" id="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modal-title">Form Input</h4>
</div>
<div class="modal-body" id="modal-body">
</div>
<div class="modal-footer" id="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary" id="modal-btn-save">Save
changes
</button>
</div>
</div>
</div>
</div>
SS modal exists but is not visible:
There are no errors with the modal, and the $("#modal").modal("show"); displays the modal just fine (see code snippet below),
Since the code snippet below works fine, it seems clear that the original code's "success" function is never called:
success: function (response) {
$("#modal-body").html(response);
$("#modal").modal("show");
}
I suggest adding an error function to the ajax parameters:
error: function (jsXHR, textStatus, errorThrown) {
// handle error here
}
From the jQuery docs:
error
Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )
A function to be called if the request fails.
function showModal() {
$("#modal-title").text('Sample Title');
$("#modal-body").html('Sample Response');
$("#modal").modal("show");
}
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- scripts needed by Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<body class="p-2">
<button onclick="showModal()">Show Modal</button>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" id="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modal-title">Form Input</h4>
</div>
<div class="modal-body" id="modal-body">
</div>
<div class="modal-footer" id="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary" id="modal-btn-save">Save
changes
</button>
</div>
</div>
</div>
</div>
</body>
I just fix this problem on Laravel Voyager Admin.
This is because I just declare two times bootstrap scripts.
Related
I have a Bootstrap Modal coded in html like so:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body><!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" id="button_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>
<a onclick="Modal('test_exampleModal')">this is a test</a>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
when you click the "this is a test link" the modal shows using the function below:
<script>
function Modal(p1) { // p1 here is equal to button_exampleModal
var button = document.getElementById(p1);
var msg_id = p1.replace("button_",""); // remove the button_ from the p1 variable
button.click(); // this will trigger the click event
}
</script>
however I need to do something after the Modal closes. the documentation says to do the following, which works,
$('#exampleModal').on('hidden.bs.modal', function (e) {
alert('this is a test');
})
I need to pass the msg_id from the original function
and this does not work:
$(msg_id).on('hidden.bs.modal', function (e) {
alert('this is a test');
})
any suggestions? I feel like it is something easy, but i cant seem to figure it out
I am trying to pass values to my modal in html using JQUERY.
I have this:
<a class="dropdown-item" href="javascript:void(0);" data-toggle="modal" data-target="#clientStatus" data-clientCurrentStatus="inactive">Change Client Status</a>
<script>
$(function() {
$('#clientStatus').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var clientCurrentStatus = button.data('clientCurrentStatus'); // 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('#clientCurrentStatus').val(clientCurrentStatus);
});
});
</script>
and what I am trying to do is inside data-clientCurrentStatus i am passing the value. and then inside my modal I have this:
<div class="modal fade" id="clientStatus" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelLogout">Update Client Status</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Current Status:</p>
<input type="text" name="clientCurrentStatus" id="clientCurrentStatus">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
Logout
</div>
</div>
</div>
</div>
so as you can see, the id matches, and everything matches. I am not sure why it isn't working. I am importing the jquery tag like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
but nothing is working. how can i fix this?
I think there are some issues with what you can use for attribute names:
http://html5doctor.com/html5-custom-data-attributes/
$(function() {
$('#clientStatus').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget);
var client_current_status = button.data('client_current_status');
var modal = $(this);
modal.find('#clientCurrentStatus').val(client_current_status);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="modal fade" id="clientStatus" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelLogout">Update Client Status</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Current Status:</p>
<input type="text" name="clientCurrentStatus" id="clientCurrentStatus">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
Logout
</div>
</div>
</div>
</div>
<button type = "button" class="btn btn-primary" data-toggle="modal" data-target="#clientStatus" data-client_current_status="inactive">Change Client Status</button>
I am new in learning jQuery and Javascript. I want a window modal dialog pop up when click a button.Also I must use window.open in the function as it is easier for me.Before this I use showModalDialog but since it is deprecated and cannot run on Chrome, I tried to use jQuery UI. This is what I managed so far:
$('#openDialog4').click(function (event) {
event.preventDefault();
var url = "http://www.typescriptlang.org/";
var windowName = "popUp";
var windowSize = "width=200,height=200";
result = window.open(url, windowName, windowSize);
});
<input type="button" id="openDialog4" value="Open Dialog window" />
It popup a window dialog when I click the button but it is not modal. Thank you.
You can use bootstrap modal :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></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>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
</script>
I'm having a problem with my login modals. One modal open when someone click forgot password link on my sign in the modal. (One modal open in another modal) So I came everything clean by adding all necessary attributes.
Eg:
<span data-toggle="modal" data-target="#forgot-pin-popup" data-dismiss="modal">Forgot password?</span>
But I notice it won't add .modal-open class to the body when my second modal is open(styles are shown weird without this class). So I manually use this js script.
$('.modal').on('hidden.bs.modal', function () {
if($('.modal').hasClass('in')) {
$('body').addClass('modal-open');
}
});
Works perfectly BUT when I try switching models like 6 times. It won't work again. Can't imagine why. I can't show you an example because it's on my production site. Does anyone face the similar problem like this?
Try to do using modal id
On modal show
$('#forgot-pin-popup').on("shown.bs.modal", function() {
$("body").addClass("modal-open");
});
On modal hide
$('#forgot-pin-popup').on("hide.bs.modal", function() {
$("body").addClass("modal-open");
});
what about using a global event listeners:
$(document).on('hidden.bs.modal', '.modal', function () {
$('body').toggleClass('modal-open', $('.modal').hasClass('in'));
});
Try to use body instead of .modal
$('body').on('hidden.bs.modal', function() {
if ($('.modal.in').length) {
$('body').addClass('modal-open');
}
});
Also make sure that your modal should not be nested into .modal class
$('body').on('hidden.bs.modal', function() {
if ($('.modal.in').length) {
$('body').addClass('modal-open');
}
});
$(".btn-primary").on("click", function() {
console.log($("body").attr("class"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1" data-dismiss="modal">
Open modal
</button>
</div>
</div>
</div>
</div>
<!-- Modal1 -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Modal title</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>
</div>
I'm trying to open a bootstrap modal dialog when clicking the span, I've searched the internet for solutions to my problem bootstrap modal $(...).modal is not a function but the only solution I've found is " put jQuery scripts before bootstrap scripts because bootstrap depends on jQuery " so I've put jQuery first, and it still gives me the same error: bootstrap modal $(...).modal is not a function
Here's the code I've tried with so far:
HTML
<span value="${bean.getId(i)}" class="glyphicon glyphicon-remove spanRemoveTransaction" style="color:red; cursor: pointer; margin-top:8px;" nowrap="true" data-toggle="myModal" data-target="#modal"></span>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Are you sure you want to delete this transaction?</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" id="delete">Delete</button>
</div>
</div>
</div>
</div>
jQuery
$(".spanRemoveTransaction").on('click', function (e) {
theTransactionId = $(this).attr("value");
e.preventDefault();
deleteTransactionModal(theTransactionId, e);
});
function deleteTransactionModal(theTransactionId, e) {
e.preventDefault();
$('#myModal').modal({
keyboard: false
}).on('click', '#delete', function (e) {
var url = config.deploymentIp + "/Controller?deleteTransaction";
var transactionId = "";
$.ajax({
dataType: "json",
type: "POST",
url: url,
data: {transactionId: theTransactionId},
success: function (data, textStatus, jqXHR)
{
if (!data["has_errors"]) {
$('table#transactionList tr#'+theTransactionId).remove();
} else {
transactionId = data.errors["transactionId"];
if (transactionId === "transactionIdError") {
}
}
}
});
});
}
Scripts
<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap-select.min.js" type="text/javascript"></script>
<script src="includes/selectpicker.js" type="text/javascript"></script>
<script src="js/currencyExchange.js" type="text/javascript"></script>
<script src="js/atbottom.js" type="text/javascript"></script>
<script src="js/config.js"></script>
<script src="includes/loadBottomScript.js" type="text/javascript"></script>
<script src="js/menuScript.js" type="text/javascript"></script>
<script src="js/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="includes/datepicker.js" type="text/javascript"></script>
<script src="js/transfers.js" type="text/javascript"></script>
If anyone has a solution to this, or just happen to have fresh eyes and can help me locate the problem, it would be greatly appreciated.
You are using jQuery.noCoflict
Here is a jsFiddle
Use
jQuery.noConflict();
jQuery('#myModal') ....
Please tell me if it works or not.
UPDATE
As #dashtinejad point to another thing in his comment after the no conflict:
Other parts of script which rely on $ should change to jQuery also
$(document).ready(function () {
// Attach Button click event listener
$('.glyphicon-remove spanRemoveTransaction').click(function(){
// show Modal
alert("pp")
$('#myModal').modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<span value="${bean.getId(i)}" class="glyphicon glyphicon-remove spanRemoveTransaction" style="color:red; cursor: pointer; margin-top:8px;" nowrap="true" data-toggle="modal" data-target="#myModal">click the span</span>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">Are you sure you want to delete this transaction?</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" id="delete">Delete</button>
</div>
</div>
</div>
</div>