Bootstrap 3 - modal - load from multiple remote sources - javascript

Been sweating for days..
I'm running bootstrap 3.1 and want to load different remote pages into my modal depending on what button is clicked.
This works the first time I click the button, but then when I try to load the second page, it throws me an undefined error. Please please help - surely this is a common operation and something I wouldn't think would be that difficult.
<script type="text/javascript">
function modalLoad(remotePage){
$('#myModal').modal({
show: false,
backdrop: true,
keyboard: false,
remote: remotePage
})
$('#myModal').on('show.bs.modal', function (e) {
alert('showing');
});
$('#myModal').on('shown.bs.modal', function (e) {
alert('modal opened');
});
$('#myModal').on('hidden.bs.modal', function (e) {
// tried all of the variations below
$(e.target).removeData("bs.modal").find(".modal-content").empty();
// $(e.target).remove();
// $(this).removeData('bs.modal');
//$("#myModal").remove();
// $(this).data('bs.modal', null);
alert('removed');
});
$('#myModal').modal('show');
};
</script>
<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">Update here</div>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
<button style="primary" onclick="js:modalLoad('remotePage1.html');" class="btn btn-default" name="yt0" type="button">Open Modal</button>
<button style="primary" onclick="js:modalLoad('remotePage2.html');" class="btn btn-default" name="yt0" type="button">Open Modal</button>
Any help would be so so appreciated.. :S

Related

boostrap model throwing backdrop error and prevents showing modal

This is my error code
index.js:130 Uncaught (in promise) TypeError: BACKDROP: Option "rootElement" provided type "null" but expected type "element".
at index.js:130:13
at Array.forEach (<anonymous>)
at l (index.js:124:28)
at xe._getConfig (backdrop.js:92:5)
at new xe (backdrop.js:33:25)
at Ne._initializeBackDrop (modal.js:218:12)
at new Ne (modal.js:84:27)
at HTMLDivElement.<anonymous> (modal.js:412:47)
at Function.each (jquery-3.6.0.min.js:2:3003)
at S.fn.init.each (jquery-3.6.0.min.js:2:1481)
I am trying to show bootstrap modal when server send the result as success.
This is my javascript code,
console.log(data);
if (data.result == 'success') {
$('.modal-body').html('Form submission was successful!');
$('#modal-dialog').modal('show');
addRoleForm.reset();
} else {
$('.modal-body').html('There was an error with the form submission.');
$('#modal-dialog').modal('show');
}
console outputs result as success,
{result: 'success'}result: "success"[[Prototype]]: Object
This is my modal code,
<!-- close modal because I prevented default -->
<script>
$(document).ready(function () {
$('#close-modal').on('click', function () {
$('#modal-dialog').modal('hide');
});
});
</script>
<!-- jason model dialog box -->
<div class="modal" tabindex="-1" role="dialog" id="modal-dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Feedback</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Modal content goes here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="close-modal" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Basically I want to show message based on result.

MVC can't reach inside a tempdata condition

I'm trying to show user a notification with TempData but my code can't reach the script part. Any idea how can I fix this ? In debug I can see that TempData is not null.
<body>
#if (TempData["error"] != null)
{
<div class="modal fade" tabindex="-1" id="modal3"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
#TempData["error"]
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary button button4">Sign</button>
<button type="button" id="btnHideModal" class="btn btn-primary button button4">
Hide
</button>
</div>
</div>
</div>
</div>
}
#if (TempData["error"] != null)
{
//This is the problem. In temporary breakpoint , it skips this part.
#section Scripts{
<script type="text/javascript">
const modal = document.getElementById("modal3")
$(window).on('load', function () {
modal.style.display = "block";
});
function closeModal() {
modal.style.display = "none";
}
</script>
}
}
</body>
I'm trying to show user a notification with TempData but my code can't
reach the script part. Any idea how can I fix this ?
I have checked your shared code snippet and investigated that which seems alright and working as expected. I have set the console and alert both executed as expected. Finally, I tried to bind the '#TempData["error"]' within the modal and got the expected output as you can see below:
Output:
HTML:
I just kept your code as it is. Therefore, just you can replace your code.
Script:
<body>
#if (TempData["error"] != null)
{
<div class="modal fade" tabindex="-1" id="modal3"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
#TempData["error"]
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary button button4">Sign</button>
<button type="button" id="btnHideModal" class="btn btn-primary button button4">
Hide
</button>
</div>
</div>
</div>
</div>
}
#if (TempData["error"] != null)
{
//This is the problem. In temporary breakpoint , it skips this part.
#section Scripts{
<script type="text/javascript">
const modal = document.getElementById("modal3")
$(window).on('load', function () {
console.log(modal);
alert("Debug");
modal.style.display = "block";
$("#modal3").find(".modal-header").html('#TempData["error"]');
$("#modal3").find(".modal-title").html(('#TempData["error"]'));
$("#modal3").modal('show');
});
function closeModal() {
modal.style.display = "none";
}
$("#btnHideModal").click(function () {
$("#modal3").modal('hide');
});
</script>
}
}
</body>
Note: I have directly bind the html('#TempData["error"]') as HTML to your modal-header class and its working. Please have a try, It should work as expected.

PHP & Ajax , Javascript - How to display modal when data is fetched into the database instead of text

How can I fetch the data and displayed it as a Modal Popup and not a Text,
and here comes the problem because this code
errors
database structure
index.php
<!-- The Modal -->
<div id="myModal" class="modal">
?>
</div>
<script type="text/javascript">
$.ajax({
type: "GET",
url: "select.php", //create a php for the SELECT STATEMENT
//data: $("#signin").serialize(), // serializes the form's elements.
success: function (data) {
$("#myModal").html(data);
modal.style.display = "block";
}
});
</script>
Here is the second page which is select.php
here is where the modal will be fetched
select.php
<?php
$link=mysqli_connect("localhost","root","");
mysqli_select_db($link, "autorefresh");
$res = mysqli_query($link,"select * from table1");
while($row=mysqli_fetch_array($res))
{
echo ' <div class="modal-content">
<span class="close">×</span>
<p>'.$row["name"]." ".$row["city"].'</p>
</div>';
}
You did't define what modal is.... Try this lines,
success: function (data) {
$("#myModal").html(data);
$("#myModal").slideDown('slow');
}
The line $("#myModal").slideDown('slow'); will show your model with slideDown effect.
Also you can use $("#myModal").css('display','block'); to display instead of the slideDown effect.
MODAL POPUP
To create a modal popup you need to use bootstrap.
add boostrap to your project then try 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>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And in your javascript,
success: function (data) {
$("#myModal .modal-body").html(data);
$("#myModal").modal('show');
}
The line $("#myModal").modal('show'); will popup the modal.

Window.location.href is not working with Clipboard JS

I am trying to copy the current page URL to the clipboard using the ClipboardJS library. I tried my best and asking the question here.
Here is the Code:
Javascript/Jquery:
new Clipboard('.copy', {
text: function(trigger) {
return window.location.href;
}
});
HTML:
<div class="modal fade" id="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button class="btn btn-default copy">Copy to clipboard</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Open modal
Here is the Code Pen:
http://codepen.io/anon/pen/LWgZpV
I resolved it by
$.fn.modal.Constructor.prototype.enforceFocus = function() {
new Clipboard('.copy', {
text: function(trigger) {
return window.location.href;
}
});
};
Seems like bootstrap has some issue with Clipboard library. Thanks to https://github.com/zenorocha/clipboard.js/issues/155#issuecomment-217372642

Bootstrap, how to prevent from closing a dropdown-menu when modal popup displayed

Inside a dropdown-menu I have a button to open a modal popup. If you display the modal popup when you close it, it will also close the dropdown-menu.
How to prevent from closing a dropdown-menu when a modal popup is displayed ?
This is the code :
<div class="dropdown-menu" style="width:240px;">
<div class="row">
<div class="col-xs-6">Log in</div>
<div class="col-xs-6"><img data-toggle="modal" data-target="#myModal" width="20px" src="images/help-question.png"></div>
</div>
...
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
etc...
</div>
ok, I have found a solution :)
var hideLogin = true ;
$('#ModalHelpLogin').on('shown.bs.modal', function (e) {
hideLogin = false ;
})
$('#ModalHelpLogin').on('hidden.bs.modal', function (e) {
hideLogin = true ;
})
$('#DropLogin').on('hide.bs.dropdown', function () {
return hideLogin ;
});

Categories