When I press my button check in bootstrap modal, I want to print the value of my textbox in my console. But my textbox returns a undefined. It seems that all of the code are working perfect.
this is link Plunker
<!doctype html>
<html ng-app="app" ng-controller="ModalDemoCtrl">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example1.js"></script>
</head>
<body>
<div ><button class="btn btn-default" ng-click="open('lg')" >Large modal</button>
<script type="text/ng-template" id="myModalContent">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<input type="text" ng-model="new" /><button ng-click="check()" >check</button>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>
</body>
</html>
Since your modal is set to have its own controller, and therefore its own scope,
when you execute the function 'check' it tries to alert $scope.new,
$scope.new isn't set on the modal scope.
one way to overcome this is to pass the new variable into the function, and let the function alert the passed value.
here's a fixed plunkr
when calling check(), pass in the new variable:
<button ng-click="check(new)">check</button>
and in your controller change check function:
$scope.check = function(text) {
alert(text);
};
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.
I need to call a function in the main page from the child page. Below i have 2 pages. 1. main.aspx and child page is 2.active.aspx. In active.aspx i have a button called "exit' . when i click on the exit button , i need to close the modal popup and then i need to call function "main" which is a javascript function in the main page. Problem is i am not able to invoke the function from the child page.
Main.aspx
<html>
<head>
<script type="text/javascript">
function main() {
//do main work
}
</script>
</head>
<body>
<div>
<input type="button" class="ic-grid-encode center-btn" title="Interactive"
data-toggle="modal" data-target="#divInterActiveContent" />
</div>
<div class="modal fade" id="divInterActiveContent" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document" align-self="" center;"="">
<iframe id="interId" src="active.aspx"></iframe>
</div>
</div>
</body>
</html>
Active.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link href="../Content/bootstrap.css" rel="stylesheet">
<script src="../Scripts/jquery-3.1.1.js"></script>
<script src="../Scripts/bootstrap.js"></script>
<script src="../Scripts/knockout-3.4.2.js"></script>
<script src="../Scripts/jquery-ui-1.12.1.min.js"></script>
<script type="text/javascript">
self.btnExit = function () {
parent.$('#divInterActiveContent').modal('hide');
//after closing the popup i need to call the javascript function defined in the main page
//i.e i need call function main which is there in the main window.
}
</script>
</head>
<body>
<form id="frmInterActiveEncode">
<div class="container">
<div class="row" style="margin-top: 10px;">
</div>
<hr>
<br>
<hr>
<div class="row">
<input type="button" value="Submit" class="btn btn-primary" data-bind="event: { click: btnSubmit }">
<input type="button" value="Exit" class="btn btn-primary" data-bind="event: { click: btnExit }">
</div>
</div>
</form>
</body>
</html>
In your scenario, you are actually closing the modal first i.e you are closing the iframe also so you are not able to get parent object in child page after closing the modal.
You should do like
active.aspx
self.btnExit = function () {
parent.main();
}
main.aspx
function main(){
$('#divInterActiveContent').modal('hide');
// Do your stuff
}
This way you can call the parent function and instead of hiding the modal in child hide it in parent function and your next stuff you want to do.
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
I'm working on a solution that displays a list of thumbnails that are medical images. We have a requirement that states if a user clicks a thumbnail a Bootstrap modal should open that display the image (jpg, png or dicom) using the cornerstone.js library.
Using cornerstone seems pretty straightforward. I setup a quick plunker here.
Here's the code for the working plunk:
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="cornerstone.js"></script>
<script src="exampleImageIdLoader.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var imageId = 'example://1';
var element = document.getElementById('dicomImage');
cornerstone.enable(element);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
});
});
</script>
</head>
<body>
<div class="container">
<h1>This works just fine...</h1>
<br>
<div id="dicomImage" style="width:512px;height:512px;">
</div>
</div>
</body>
</html>
I can't seem to figure out why the images are not loading when I use the same code in a Bootstrap modal. The plunk that I'm trying to get working is here.
Here's the code for the broken plunk:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="cornerstone.js"></script>
<script src="exampleImageIdLoader.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var imageId = 'example://1';
var element = document.getElementById('dicomImage');
cornerstone.enable(element);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
});
});
</script>
</head>
<body>
<div class="container">
<h1>When this modal is opened the canvas looks like it's drawn at 0px x 0px...</h1>
<br />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<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 id="dicomImage" style="width:512px;height:512px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
After hours or trying to figure it out I figured I would see if anyone out there has any ideas. It looks like the plunk with the modal is drawing the canvas at 0x0 pixels...
Any thoughts or help would be GREATLY appreciated. Thanks all.
Update 6/26
I may have found a potential workaround, but it's not as clean as I would like it to be. I also haven't tested it by playing a series of CT images.
My thoughts are to use the working solution from the first plunk and to call .hide() on #dicomImage on document.ready. Then, when a user clicks a thumbnail, I will use:
$(".modal-body").appendTO("#dicomImage);
Not the cleanest solution, but it could work...
For some reason .hide works, but .show not?
This is my code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<button onclick="alertShowAccount()">Add account</button>
<script>
function alertHideAccount() {
$("#addAccount").hide();
}
function alertShowAccount() {
$("#addAccount").show();
}
</script>
<div style="display:none" id="addAccount">
<button class="btn btn-md" onclick="alertHideAccount()">Cancel</button>
</div>
<body>
Anyone has an idea why it is not working? The function IS being called, I tested it with an alert. Also the console gives no errors.
Here's how I did man, it worked for me this way...
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$('#addAccount').hide();
$('#hide_div').on('click',function(){
$("#addAccount").hide();
});
$('#show_div').on('click',function(){
$("#addAccount").show();
});
});
</script>
<body>
<button id="show_div">Add account</button>
<div id="addAccount">
<button class="btn btn-md" id='hide_div'>Cancel</button>
</div>
<body>
So here's what happened, we changed Onclick to just the ID of the element, and called it on the script with $(elem).on('event',function());