Loading file and deploying bootstrap modal from Javascript - javascript

I am having quite a hard time in solving this problem. Seemed so simple but it is not for me.
PAGE1: HTML
<!-- where to land the external page, but not necessary -->
<div id='feito'></div>
//Javascript calling the page:
$(document).ready(function(){
$.get("page_with_modal.html", function(data) {
$("#feito").html(data);
});
});
//Javascript showing the Modal with ID doneModal:
$(document).on('ready', function(){
$('#doneModal').modal('show');
});
PAGE2: page called from JS (page_with_modal.html):
<html>
<head>
</head>
<body>
<div class="modal fade" id="doneModal" 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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
... MODAL TEXT
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
PROBLEM:
From what I can understand, The page is called but the Modal is not appearing.
-I tried to put bootstrap.js at the bottom of PAGE1, JS code before or after the landing DIV. Nothing
-I tried to eliminate all HTML - Body, etc tags and rename it .php (with all the correct sintax). Nothing.
- PAGE2 can be called from PHP using require(). Working ok, no problem.
- I didnt explore the ajax call because the final result (this is an easy/standard mockup) it's already inside and Ajax call, I am trying to make things work from the root up.
What am I doing wrong? Can somebody help me?
Roberto

Simply you have to show the modal after loading and not in document ready event:
$(document).ready(function () {
loadAjax();
});
function loadAjax() {
$.get("page2.html", function (data) {
$("#feito").html(data);
// after loading open modal
$("#doneModal").modal('show');
});
}

Related

How to get a Bootstrap Modal to pop up on specific WordPress page after delay

I'm trying to get a Bootstrap 4 Modal to pop up on an Order Received page after a 2-second delay on WordPress. I'm new to theme customization. This is what I have, but I can't get the HTML to print on the page.
I want to hook into: do_action( 'woocommerce_before_thankyou', $order->get_id() ); ?> on thankyou.php. I also want the modal to popup on page load. The JS I found for that would be:
<script type="text/javascript">
$(window).on('load',function(){
$('#exampleModal').modal('show');
});
</script>
In the Thankyou page body class, it shows page-id-8 as the page ID.
In my functions.php file, I have the following:
Questions:
For some reason, the HTML is not printing on the page. Any ideas on what else I can do?
What would be the next steps for adding a <script></script> tag on the same page to add a setTimeout function to delay it?
Code:
function create_modal() {
if(is_single('8')) {
echo '
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">A NOTE ON SHIPPING</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Thank you so much for your order! As we\'re sure you\'re aware, we are a little backed up due to COVID-19.</p>
<p>While we work hard to get your order out in a timely manner, we sincerely appreciate your understanding and patience.</p>
<p>When your order ships, you\'ll receive an email with tracking information attached. Please keep an eye out for your package. Also note that FedEx and USPS are also backed up due to COVID-19, and delivery times may also be delayed.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">CLOSE</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</div>
</div>
</div>';
}
}
add_action('woocommerce_thankyou_', 'create_modal', 10);

How can I prevent the html loaded within my bootstrap modal from affecting my page html?

I am loading a full html email (with opening and closing html tags) into my modal for previewing purposes. Like this:
//Update modal body
$('.modal-body').html(response['html']);
The issue I'm having is that when I do this, the html loaded seemed to (unsurprisingly) change the main page content outside of the modal.
What I'm wondering is whether there is a way to isolate the html to just the modal area so that it doesn't affect the main page's html.
I've looked into using an iframe for this as an alternative, but the problem for me is that I am loading in this data via ajax (along with other data) and iframe's only seem to support pulling in information via links on the fly.
I would appreciate any potential solutions here.
Thanks!
Tapha:
Instead of Jquery, you can try the following code:
<div>
<object type="text/html" data="http://www.google.com/" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">
</object>
</div>
Hope this helps!
These might not function here due to whatever sandboxing that is in place but, this works for me locally.
var target = document.getElementById('target');
var targetDoc = target.contentWindow.document;
targetDoc.open('text/htmlreplace');
targetDoc.write("<html><body>Hello world</body></html>");
targetDoc.close();
<iframe id="target"></iframe>
As does:
var target = document.getElementById('target');
target.src = "javascript:'<html><body>Hello world</body></html>'";
<iframe id="target"></iframe>
Though I recognize the second example could be awkward to manage quote wise.
Here is a full working bootstrap example. Well it works locally, but again, not in this sandbox.
var target = document.getElementById('target');
var targetDoc = target.contentWindow.document;
targetDoc.open('text/htmlreplace');
targetDoc.write("<html><body>Hello world</body></html>");
targetDoc.close();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo 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">
<iframe id="target"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<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.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Though it fails in the sandbox it render like this locally...

Show new page as Modal with Javascript

I'm working on an Python Flask application, were I'm writing python program, HTML5 and making use of Bootstrap too.I'm struck with Javascript, because I'm new to it.
I've an table in my page, where "id" be assigned to an value. I can able to get the id value using
<script>
$("table tr").click(function(){
alert (this.id);
});
</script>
I wanted to send the "id" value to another page, and open the resulting page as Modal. Can you guide or share sample code for the same...?
If you have already downloaded bootstrap plugin then my answer would be very easier for you.
Earlier i have written same thing that you required in PHP (have a look). Whatever be the language its about JQUERY and HTML5.
You just trigger the following line using JQUERY then it will open the second page content in modal format.
<a data-toggle="modal" class="trigger" data-target="#yourid" href="second_page.php" ></a>
Trigger the above line as
$("table tr").click(function(){
$('.trigger').trigger("click");
});
Your second page content should be like
<div id="yourid" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Give a title name</h4>
</div>
<div class="modal-body">
<!-- Place your second page content here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Please refer this link also. Correct me if am wrong

How to call a bootstrap modal in php when login failed?

I want to show a modal when username is wrong, I have the php code, not full but there is the error :
header("location:admin.php");
exit();
} else
header("location:admin_login.php?error=1");
};
if (isset($_GET['error'])==1){echo "<script type=\"text/javascript\">$('#myModal').modal('show');</script>";
exit();}
?>
And the javascript doesn't work.
Modal code:
<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-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I have included but still not working, do you have any idea why?
Make sure the script DOM ready and remove exit(); from PHP, even if the script will be DOM ready, exit(); will not let the modal show and even after these changes if the modal still not show, make sure check the jQuery library, you may be running modal show script somewhere in middle of page but jQuery library may be in footer so check your console log for error. Remember jQuery library always comes first.
<?php if (isset($_GET['error'])==1){ ?>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal("show");
});
</script>
<?php } ?>
See in Action
I think that your JavaScript is probably being run before the document is ready. Try changing your php code to include:
if (isset($_GET['error'])==1){echo "<script type=\"text/javascript\">$(function() {$('#myModal').modal('show');});</script>";
This just puts the code you wrote inside a document ready handler.
Try to use this :
<script>
$(document).ready(function() {
$('#myModal').modal('show');
});
</script>

bootstrap 3.3 modal remote content gives 404

I'm using Bootstrap with a couple of components (removing them individually didn't fix the problem - but for the sake of completeness, here's a list).
I'd like to load remote content (test.html) into a Modal. It all works fine on a standalone html page, but when I insert the exact same code into my project's layout, nodemon gives me a "GET test.html 404". The Modal still opens, but the remote page isn't loaded (apparently it can't find it, and I don't understand why) and the "yada yada" appears in the modal-body instead.
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/bootstrap.js"></script>
<script src="/javascripts/bootstrap-tagsinput.js"></script>
<script src="/javascripts/typeahead.bundle.js"></script>
<script src="/javascripts/pinboot.js"></script>
<script src="/javascripts/bootstrap-dialog.js"></script>
<script>
$("#myModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
</script>
Launch Modal
<!-- 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">yada yada</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>
I'm secretly hoping this is a common problem with a simple solution and I'm just not feeding Google the right questions/keywords :(
So in that case I thank you for your patience :)
Rookie mistake ... it was the routing. Everything not defined in app.js was directed to a script that couldn't handle it, sort of.
app.get( '/', routes.index );
Renaming test.html in test.ejs and adding this to app.js...
app.get('/test', function (req, res) {
res.render('test');
});
...and changing the button to link to /test
Launch Modal
...made it work. Hooray!
I'm gonna leave that here for the next n00b ;)

Categories