I am trying to make it so when a user clicks on a button, a modal dialog opens and another site is loaded within that dialog.. I have used some tutorials and still cant seem to get it working correctly.. currently when i click the button, the screen just goes slightly grey but no dialog appears.. can anyone see where im going wrong?
Visit site
<div id="popupModal2" class="modal hide fade" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Add new Item</h3>
</div>
<div class="modal-body">
<iframe src="" style="zoom:0.60" frameborder="0" height="250" width="99.6%"></iframe>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">OK</button>
</div>
javascript
$('.bootpopup').click(function(){
var frametarget = $(this).attr('href');
var targetmodal = $(this).attr('target');
if (targetmodal == undefined) {
targetmodal = '#popupModal';
} else {
targetmodal = '#'+targetmodal;
}
if ($(this).attr('title') != undefined) {
$(targetmodal+ ' .modal-header h3').html($(this).attr('title'));
$(targetmodal+' .modal-header').show();
} else {
$(targetmodal+' .modal-header h3').html('');
$(targetmodal+' .modal-header').hide();
}
$(targetmodal).on('show', function () {
$('iframe').attr("src", frametarget );
});
$(targetmodal).modal({show:true});
return false;
});
I found below java script code(cross domain loading code) from this link. In this link go and review the answer given by Manoz. And for creating bootstrap modal dynamically go to this link. Bootstrap modal link will help you to create each and every modal dynamically rather then creating them manually everytime.
function openSite() {
BootstrapDialog.show({
title: 'Level 2 Title',
message: $('<div id="loadCrossoriginHere"></div>'),
onshown: function() {
$.ajaxSetup({
scriptCharset: "utf-8", //maybe "ISO-8859-1"
contentType: "application/json; charset=utf-8"
});
$.getJSON('http://whateverorigin.org/get?url=' +
encodeURIComponent('http://google.co.uk') + '&callback=?',
function(data) {
$("#loadCrossoriginHere").html(data.contents);
});
}
});
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/css/bootstrap-dialog.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/js/bootstrap-dialog.min.js"></script>
<button type="button" class="btn btn-primary" onclick="openSite()">Visit Site</button>
Related
I try to load an external block of html through .load() jquery function, but it fails to render properly in a modal popup (note: same issue with .get() )
code is :
$('#butt2').on('click', function() {
$('#mbodyko').load('nav.html', function() {
$('#myModalnok').modal({show: true });
});
});
Render is bad, here is the issue:
http://plnkr.co/edit/z9oQPVG2F9oYaJCzovN5?p=preview
You can notice that the tabs inside the second modal are not clickable, whereas the same html code renders well in the first modal.
Do you know why ?
Thanks for your hints!
All I did to make it work is removing out the first modal html, like this:
<html dir="ltr" lang="en-US">
<head>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
</head>
<body>
<hr>
<button class="btn btn-primary btn-lg" id="butt1">modal OK</button>
<br />
<br />
<button class="btn btn-primary btn-lg" id="butt2">modal NOK - use jquery .load</button>
<div class="modal fade" id="myModalnok" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-body">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Problem: click does not change the tabs!</h4>
</div>
<div class="modal-body" id="mbodyko">
</div>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
<script>
$('#butt1').on('click', function() {
$('#myModalok').modal({
show: true
});
});
$('#butt2').on('click', function() {
$('#mbodyko').load('nav.html', function() {
$('#myModalnok').modal({
show: true
});
});
});
</script>
</body>
</html>
I think the problem is that the loaded data from nav.html have IDs that are in the original html DOM, or index.html and you can't have a page with two elements that have the same ID, or it will not work properly.
All other JS functions work properly except the Modal Popup.
The Modal is not working even on windows load.
If I create a new page with the scripts, the modal popup function and no code within the body. The Modal works, so I think the correction is in the code within the <body> tag
The console shows no error.
My Code
<html>
<head>
<title>Ready</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="https://unpkg.com/purecss#1.0.0/build/pure-min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<script type="text/javascript">
function getPackageforCourier(val) {
$.ajax({
type: "POST",
url: "latest_rts_pkr.php",
data:'courier_name='+val,
success: function(data){
$("#latest_rts").html(data);
}
});
}
function markRTS()
{
document.getElementById('readytoship').style.display = 'none';
document.getElementById('awb').style.display = 'none';
$.ajax({
type: "POST",
url: "pickrr_rts.php",
data:'airwaybill='+$("#awb").val(),
success: function(data){
$("#readytoship").html(data);
document.getElementById('readytoship').style.display = 'block';
document.getElementById('awb').style.display = 'block';
setTimeout(function() {
$("button").removeAttr("disabled");
$("input").removeAttr("disabled");
document.getElementById('awb').value = "";
document.getElementById("awb").focus();
}, 50);
}
});
}
$(window).on('load',function(){
$("#pro_popup").click();
});
// DISABLE BUTTON ONCE CLICKED, FOR 1 SECOND
$(function() {
$("button").click(function() {
$("button").attr("disabled", "disabled");
$("input").attr("disabled", "disabled");
// document.getElementById('resendbutton').style.display = 'none';
});
});
function getSKUMapping(val)
{
var sku_id = $("#check_sku").value;
if(sku_id!='')
{
$.ajax({
type: "POST",
url: "check_sku_mapping.php",
data:'skuID='+val,
success: function(data){
if(data!=''){
$("#mapping_result").html(data);
document.getElementById('mapping_result').style.display ='block';
$("#check_sku").value="";
}
}
});
}
else
{
document.getElementById('mapping_result').style.display ='none';
}
}
</script>
</head>
<body>
<h2>Ready to Ship<h3>
<div id="readytoship" class="animated tada bounceInRight" style=
"padding:auto 1%;box-shadow:0px -1px 1px rgba(0,0,0,0.5);cursor:pointer; background-color:rgba(255,255,255,0.1); border-radius:6px; display:none;margin:2% auto;width:80%;">
</div>
<div id="rts_form">
<form id="rts" method="POST" action="">
<input class="input" type="text" maxlength="20" name="awb" placeholder="Scan Airway Bill Barcode" id="awb" autofocus autocomplete="off">
<button type="submit" id="submit" onclick="markRTS();">Mark Ready to Ship</button>
</form>
</div>
<div id="latest">
<?php
$con = mysqli_connect("localhost","admin","xxx1xxx!","admin_db");//database connection
$result = mysqli_query($con, "SELECT rts.courier, rts.status FROM `oc_shipping_pickrr` AS rts WHERE rts.status='0' GROUP BY rts.courier");
echo '
<select class="input" name="courier_name" id="courier_name" onChange="getPackageforCourier(this.value);" required="required">
<option value="">Select Courier</option>';
while($row = mysqli_fetch_array($result)) {
echo '<option value="'.$row['courier'].'">'.$row['courier'].'</option>';
}
echo '</select></label>';
mysqli_free_result($result);
?>
</div>
<div id="latest_rts">
</div>
<div id="mapping">
<form id="sku_mapping_check" method="" type="POST">
<input class="input-sku" type="text" name="check_sku" id="check_sku" required onkeyup="getSKUMapping(this.value);" placeholder="Scan SKU Barcode">
</form>
<p style="font-weight:800;" id="mapping_result">
</p>
</div>
</body>
</html>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="pro_popup" data-toggle="modal" data-target="#myModal" style="display:none;top:0;left:0;">Open Modal</button>
<!-- Modal -->
<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" onclick="ScrollToTop();" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="font-weight:600; text-align:center;">Package Details</h4>
</div>
<div class="modal-body">
<div id="new_pop_data">
</div>
</div>
<div class="modal-footer">
<button type="button" onclick="ScrollToTop();" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I've tried everything, but nothing works.
I removed the php cache code also, tried in Incognito also.
I checked with the Javascript Syntax Validator also, but it shows the code is fine.
You need at least to put your modal and button code before the </body> closing tag.
Update:
Found it, you need to move your code $("#pro_popup").click(); from window on load event to jQuery dom ready event:
$(window).on('load',function(){
//$("#pro_popup").click();
});
And
$(function() {
$("#pro_popup").click();
$("button").click(function() {
$("button").attr("disabled", "disabled");
$("input").attr("disabled", "disabled");
// document.getElementById('resendbutton').style.display = 'none';
});
});
I found the solution, as the problem was in the below code
// DISABLE BUTTON ONCE CLICKED, FOR 1 SECOND
$(function() {
$("button").click(function() {
$("button").attr("disabled", "disabled");
$("input").attr("disabled", "disabled");
// document.getElementById('resendbutton').style.display = 'none';
});
});
It was fiddling with my Trigger button unnecessarily!
Thanks folks!
This question already has answers here:
What is the difference between client-side and server-side programming?
(3 answers)
Closed 6 years ago.
Hello this is what i want to do. I want to show the alert box after the user click the link. My link is directed to another php page but it will come back again to the page where the link is found. How can i achieve this? Can someone give me ideas on how to do it?
this is what i tried but not working.
<?php
function fsa() {
echo '<div class="alert alert-success alert-dismissable" id="success-alert">';
echo '<strong>Successfully posted!</strong>';
echo '</div>';
}
<a class='btn btn-info left-margin' href="dbf-import.php" onclick="fsa()">Import Database</a>
This is an example to show the dissmissable alert box when clicking on a button.
$(document).ready(function() {
$('.activater').click(function() {
$('.alert').show()
})
});
.alert {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container">
<h2>Dismissal Alert Messages</h2>
<button class="activater">Send Message</button>
<a class="activater">SHOW MESSAGE</a>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
Success! message sent successfully.
</div>
</div>
</body>
You can achieve it through Bootstrap modal instead of alert box. You can design it as according to your need.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
click on this link :
<!-- Trigger the modal with a button -->
<span data-toggle="modal" data-target="#myModal">www.google.com</span>
<!-- 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>Alert Box. Click 'OK' to go to www.google.com</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onClick="document.location.href='www.google.com'">Go</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
PHP is used to generate the HTML and JS. You can have both in a PHP file but you need to see the difference between PHP and JS. The function you've called fsa() is a JS function because it will run client side (on the client machine and after page has been loaded). The onclick param in the HTML tag needs to have a JS function hooked. This way when you click on your <a> tag, fsa() will be fired and the box will show up on the page.
// this is JS, you need <script> tags !!!
<script>
function fsa() {
// define a new variable
var box = '';
// add the HTML inside the JS variable
box += '<div class="alert alert-success alert-dismissable" id="success-alert">';
box += '<strong>Successfully posted!</strong>';
box += '</div>';
// append the HTML contained inside box to the body
document.querySelector('body').innerHTML += box;
}
</script>
<a class='btn btn-info left-margin' onclick="fsa()">Import Database</a>
If you wish to save the data without reloading the client's page, you may want to use AJAX
First of all, like #Iceman said: You are trying to run a javascript function in php, so start by deleting all that. If you just want the user to get an alertbox when clicking on a link, you can simply add
<script> function fsa(){
alert("Your alert message");
}
</script>
Also, if you don't want the person to leave the side, just put href='#', that should take care of it.
Try this
<script type="text/javascript">
function Alert() {
var answer = confirm ("Successfully posted!Please click on OK to continue.")
if (answer)
window.location="http://www.yoursite.com";
}
</script>
click me
below is my HTML model,
<
And below is my JavaScript.
$(document).ready(function() {
alert("Script is on");
$("#portfolioModal1").on('show.bs.modal', function () {
alert('The modal is about to be shown.');
});
$( "#portfolioModal1" ).on('shown', function(){
alert("Shown!");
});
});
$("button").click(function find_route_time()
{
// This function is tested and is working fine.
});
I tried solution from many tutorials, but this is not working. I am unable to understand why? My javascript should generate alert when the Model Opens up but nothing happens.
And below is the link,
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal" data-target="#portfolioModal1">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/EAST-CLICK.jpg" class="img-responsive" alt="">
</a>
Here is the fix for your code:
Add Button to your html code as showing below:
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
Replace your JS code with below code:
$(document).ready(function(){
$("#myBtn").click(function(){
$("#portfolioModal4").modal("show");
});
$("#portfolioModal4").on('show.bs.modal', function () {
alert('The modal is about to be shown.');
});
$("#portfolioModal4").on('shown.bs.modal', function () {
alert('The modal is fully shown.');
});
});
Note - if you want to open popup on page load event then just remove the click event from the script but the issue will be it just going to capture shown event.
let me know if you find this useful.
Here is completed Tested file.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
Open Popup
<!-- Modal -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
.....................SOME CODE.....................
</div>
</div>
</div>
<script>
$(document).ready(function () {
alert("Script is on");
$("#portfolioModal1").on('show.bs.modal', function () {
alert('The modal is about to be shown.');
});
$("#portfolioModal1").on('shown.bs.modal', function () {
alert("Shown!");
});
});
$("button").click(function find_route_time() {
// This function is tested and is working fine.
});
</script>
</body>
</html>
I have a table with a bunch of data, and I've placed a button at the end of each row that I want to use to trigger a modal and pass the unique id of that row into the modal.
I found this answer: Passing data to a bootstrap modal
But it doesn't appear to work with Bootstrap 3, and I can't find any data about this anywhere any ideas?
I'm using the same code listed:
Header:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "bootstrap/css/bootstrap.min.css" rel = "stylesheet">
<link href = "bootstrap/css/styles.css" rel = "stylesheet">
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myBookId = $(this).data('id');
$(".modal-body #bookId").val(myBookId);
});
</script>
</head>
Body:
<a data-toggle="modal" data-id="ISBN" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
Modal:
<div class="modal" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="bookId" id="bookId" value="" />
</div>
</div>
The resulting page will open the modal, but the text field is blank.
I forgot to mention, I do have both jquery and bootstrap loaded:
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "bootstrap/js/bootstrap.js"></script>
Try manually triggering the modal, rather than using the data API.
Update the hyperlink like so:
<a data-id="ISBN" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
Then adjust your jQuery code:
$(document).on("click", ".open-AddBookDialog", function (e) {
e.preventDefault();
var _self = $(this);
var myBookId = _self.data('id');
$("#bookId").val(myBookId);
$(_self.attr('href')).modal('show');
});
Seems to work for me; jsFiddle # http://jsfiddle.net/4XJ54/