Bootstrap Modal form loading with dynamically created button - javascript

I am targeting "model-body" section to load the dynamically created table in update.php, but when i click on the edit button,nothing is happens and then page becomes hanged.Can someone please advise what is missing ?
<div class="modal fade" id="Modal1" aria-labelledby="Modal-Edit
Form" aria-hidden="true">
<div class="modal-dialog">
<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">
<table cellpadding="10px" width="100%" id="modal1">
</table>
</div>
<div class="modal-footer">
</div>
</div>
</div>
$(document).on("click", ".edit-btn", function(e) {
$("#Modal1").toggle("show");
var peid = $(this).data("eid");
$.ajax({
url: "update.php",
type: "POST",
data: {
id: peid
},
success: function(data) {
$("#Modal1 table").html(data);
}
});
});

$(document).on("click", ".edit-btn", function(e) {
$("#Modal1").toggle("show");
});
try this.

Related

Bootstrap Modal hide not working in partialview

I'm adding a button close that will close/hide the Modal diaglog when button is clicked. for some reason nothing is happening when the button is clicked. I assume that the modal id is not recognized after button is clicked. not sure what could be the correct approach?
<--Index.cshtml-->
<div class="form-button-action">
<button type="button" class="btn btn-link btn-lg" id="Edit" onclick="Edit(#item.Id)">
<a class="fas fa-pencil-alt" data-toggle="tooltip" data-placement="top" title="Edit Session"></a></button>
</div>
<div class="modal fade" id="myModalForm" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body" id="myModalBodydiv" data-backdrop="static" data-keyboard="false">
</div>
</div>
</div>
</div>
<script>
var Edit = function (id) {
$.ajax({
type: "GET",
url: "/Exposure/EditSession",
data: { Id: id },
success: function (response) {
$("#myModalBodydiv").html(response);
$('#myModalForm').modal({ backdrop: 'static', keyboard: false })
$("#myModalForm").modal("show");
$("#myModalForm").appendTo("body");
}
})
}
</script>
<--partialView.cshtml-->
#model Insured
<div class="modal-header no-bd">
<h1 class="fw-mediumbold">
Title
</h1>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-footer no-bd">
<button type="submit" class="btn btn-light" id="closeModal" data-dismiss="modal">Close</button>
</div>
<script>
$("#closeModal").click(function () {
$('#myModalBodydiv').modal('hide');
});
</script>

Bootstrap modal not working on Firefox

I have created two modals using Bootstrap and those are opening using jQuery with Ajax requested data. The problem is these modals are working properly on Google Chrome, but not working on Firefox. How do I fix it?
My code is below:
$(document).on("click", "#file_popup", function() {
$.ajax({
url: "fileshare.php",
method: "post",
dataType: 'text',
success: function(data) {
$("#tbl_content").html(data);
jQuery.noConflict();
$("#pp_filedownload").modal('show');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="pp_filedownload" role="dialog" hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<strong class="modal-title">File Download</strong>
</div>
<div class="modal-body" id='tbl_content'>
</div>
</div>
</div>
</div>
I tried a sample, it works fine in all browsers. Try with this, may be this will help u
//You can launch the modal with the code below this.
$(document).ready(function(){
$("#submitButton").click(function(){
$("#myModal").modal();
});
});
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="submit" id="submitButton"/>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>

Set results from jQuery (AJAX) into Bootstrap modal

Is it possible to show results from jQuery function into bootstrap modal? I have a table and when user clicks one specific column, the modal should be shown with appropriate data.
<script type="text/javascript">
function getBreak(breakid,pos,countrycode){
$.ajax({
url: "{{ url('getBreak') }}",
type: "GET",
data: "id="+breakid+"&pos="+pos+"&countrycode="+countrycode,
success: function (result) {$('#myModal').modal('show');},
error: function(data){
alert("Error")
}
});
}
</script>
And this is a very basic modal where I want to change insert the data.
<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>
Is it possible to somehow append the modal with html content which I would get from getBreak() function?
yes possible use this.
<script type="text/javascript">
function getBreak(breakid,pos,countrycode){
$.ajax({
url: "{{ url('getBreak') }}",
type: "GET",
data: "id="+breakid+"&pos="+pos+"&countrycode="+countrycode,
success: function (result) {
$('#divhtml').html(result);
$('#myModal').modal('show');},
error: function(data){
alert("Error")
}
});
}
</script>
and in the desiging you have to do this
<div id="myModal" class="modal fade" role="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">
<div id="divhtml"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
You could add this into you Success function, you could loop through the results data and add to the modal before you show it.
$.each(result , function(i, v) {
$('.text1').text(v.id);
}

jQuery popup box is not getting displayed

I am trying to display a popup box from a div. My code is below.
Upon successful addition on record the div needs to be shown but its not working. I have tried $("#div").html.
Script:
<script src="scripts/jquery-1.11.1.min.js "></script>
<script>
$(document).ready(function() {
$('#users').submit(function() {
$('#response').html("<b>Adding...</b>");
$.post('controller_adduser.php', $(this).serialize(), function(data) {
$('#response').html("<b>Adding...</b>");
//// Show div Message box
}).fail(function() {
alert( "Posting failed." );
});
return false;
});
});
</script>
DIV:
<div id="remote_modal" class="modal fade" tabindex="-1" 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>
<h4 class="modal-title"><i class="icon-accessibility"></i> Loading remote path</h4>
</div>
<div class="modal-body with-padding">
<p>Added!!</p>
</div>
<div class="modal-footer">
<button class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
POPUP MSG BOX
I see that youre using bootstrap. In order for the modal to show you need to run the .modal("show") command. I would try this:
HTML:
<div id="remote_modal" class="modal fade" tabindex="-1" 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>
<h4 class="modal-title">
<i class="icon-accessibility"></i>
<span id="response">Loading remote path</span>
</h4>
</div>
<div class="modal-body with-padding">
<p>Added!!</p>
</div>
<div class="modal-footer">
<button class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS:
<script src="scripts/jquery-1.11.1.min.js "></script>
<script>
$(document).ready(function() {
$('#users').submit(function() {
$.post('controller_adduser.php', $(this).serialize(), function(data) {
$('#remote_modal #response').html("<b>Adding...</b>");
$('#remote_modal').modal("show");
}).fail(function() {
alert( "Posting failed." );
});
return false;
});
});
</script>

Bootstrap modal not shown on first call

I'm trying to use a bootstrap 3.0 modal to load external html file into a modal using jQuery Ajax loader, however it's not shown on first call but works on subsequent calls.
<a data-toggle="modal" data-target="#myModal" href="#myModal" id="myModal" aria-hidden="true">Department</a>
<div class="contianer">
<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-hidden="true">
</button>
<h4 class="modal-title">
<img src="img/logo.png" width="150" alt="SmartAdmin">
</h4>
</div>
<div class="modal-body no-padding">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#myModal').click(function(e){
e.preventDefault();
$.ajax({
type: "GET",
url: "?AId=DEPT_ADDUPDATE",
data: { },
success: function(data){
$('.modal-body').html(data);
}
});
});
</script>
Just add:
success: function(data){
$('.modal-body').html(data);
$('#myModal').modal("show");
}

Categories

Resources