Event in a child iframe to a handler in the parent window - javascript

My scenario is to open a modal that contains iframe ,inside the iframe having button while onclick button i need to close the modal and refresh the parent window
So far i tried
Parent page :
<!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="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>
</head>
<script type="text/javascript">
$(document).ready(function(){
// $('iframe').content ().find('#close').click(function(){
// alert('entred');
// });
$('#myModal').contents().find('#close').click(function() {
alert('click');
});
});
</script>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<iframe src="modal.html"></iframe>
</div>
</div>
</body>
</html>
Child Page
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<p>Hello Session has expeired</p>
<button id="close" type="button">OK</button>
</div>
</body>
</html>

In Parent Page, update the below script which will create a global function called closeModal which will 1) Close the modal dialog and 2) Reloads the current page.
<script type="text/javascript">
window.closeModal = function () {
$('#myModal').modal('hide');
window.location.reload();
};
</script>
In Child Page, on Close button click, simply call the closeModal method of the parent.
<script type="text/javascript">
$(document).ready(function () {
$('#close').click(function () {
window.parent.closeModal();
});
});
</script>

You'll need to give your iFrame an ID, and then attach a handler to either it, or an element within:
document.getElementById("yourIFrameId").contentDocument.addEventListener(...);

This should to do what you need:
ParentPage.html:
<iframe src="iframe.html"></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
$(document).on('eventhandler', function() {
$('#myModal').modal('hide');
});
});
</script>
ChildPage.html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$('#close').click(function () {
parent.$(parent.document).trigger('eventhandler');
});
</script>

Related

how to work modal using external js file?

I wrote some javascript code to show a modal after page load and click a button to redirect another url. That worked fine. But now I need it to be done with an external javascript file. Thanks in advance. Here is what I did:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pop Up</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</head>
<body>
<div id="myModal" class="modal fade">
<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">Here is your message Title</h4>
</div>
<div class="modal-body">
<p>Here is your message details</p>
Exit
</div>
</div>
</div>
</div>
<script>
$(".modal").on("hidden.bs.modal", function () {
window.location = "https://www.google.com/";
});
</script>
</body>
</html>
How do I do this with an external javascript file?
Just create a new file with '.js' extension.
example: create 'scripts.js'
and write :
$(document).ready(function(){
$("#myModal").modal('show');
});
$(".modal").on("hidden.bs.modal", function () {
window.location = "https://www.google.com/";
});
and then in the html file before add:
you need to add correct file to the file in 'src' attribute'.
Copy everything in you <script> tag and put it in an external js file. You can link this file in your html with the following:
<script src="js/YourJSFile.js"></script>
$(document).ready(function(){
$("#myModal").modal('show');
$(".modal").on("hidden.bs.modal", function () {
window.location = "https://www.google.com/";
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pop Up</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/YourJSFile.js"></script>
</head>
<body>
<div id="myModal" class="modal fade">
<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">Here is your message Title</h4>
</div>
<div class="modal-body">
<p>Here is your message details</p>
Exit
</div>
</div>
</div>
</div>
</body>
</html>
script "the js file" must be add just before the closing body tag

How to Hide a HTML Button

I have a button that calls a function when it is clicked. I want it to hide when some one clicks on it.
HTML:
<DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="Displayer"></p>
<button onclick="Set()">Ready?</button>
<script type="text/javascript" src="javascript.js">
</script>
</body>
</html>
Pass in your element and then set the display style to none:
HTML:
<button onclick="set(this)">Ready?</button>
Javascript:
function set(elem) {
elem.style.display = "none";
}

jQuery alert does not work

I've tried for several hours know to make this bit of jquery code work but I just can't find what I did wrong with it. The equivalent in normal javascript works just fine. What is the problem?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>
You can't put a script in a tag that has a src attribute. You need to call the jQuery library in one script tag and then put your actual script in another.
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
Problem is here
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
//js code
</script>
Here in your script tag you are giving a source and some code also, You should write separate script tags for both, see bellow
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
//js code
</script>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>
You are trying to call the jQuery library while also implementing your code snippet here:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
You should be first loading the jQuery library and then implementing your code snippet like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event){
alert("HI");
});
});
</script>
The reasoning behind this is because you cannot call the script attribute to load a library and then define some code in the same tag, you need to:
Load the script
Declare your code
Hope that helps!
The JS script reference line of code should end and actual JQuery code should be enclosed under separate script tags.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script type="text/javascript">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5">abcd</div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>
Your problem was including your code in that script tag for jQuery.
Change to this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="ezcap.css">
</head>
<body>
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</body>
</html>
Not a problem but you do not need the type="text/javasript". See: Do you need text/javascript specified in your <script> tags?
And it is better to have your scripts at the bottom so that your content can load faster. See: If I keep JavaScript at bottom or keep JavaScript in <head> inside document.ready, are both same thing?
Your <link> for CSS needed to be inside your <head>

Why my Jquery popup plugin isn't working?

I'm using this magnific pop up plug in (http://dimsemenov.com/plugins/magnific-popup/documentation.html)
This is my very basic html, I simply want the button to open a pop up window in that page.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</script>-->
<script src="./js/jquery-1.11.1.min.js"></script>
<script src="./js/jquery.magnific-popup.js"></script>
<title>Burn That Burger</title>
<script type="text/javascript" src="js/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="normalize.css" media="all">
<link rel="stylesheet" href="style/unsemantic-grid-responsive.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="all">
</head>
<body>
<div id="popup">
test pop up goes here
</div>
<button>create and show popup</button>
</body>
</html>
Javascript:
$(document).ready(function () {
$('button').magnificPopup({
items: {
src: '#popup',
type: 'inline'
}
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/vGAsL/19/
you have applied the popup id to your body, instead of a separate div.
<body>
<div id="popup">
test pop up goes here
</div>
<button> create and show popup </button>
I think you have an issue in your body tag, it should be:
<body>
<div id="popup">
test pop up goes here
</div>

Button Failing to Perform Function jQuery

I'm trying to make a button, so that when pressed it slides one div away and then another slides back in, however I'm trying to prevent it from refreshing the page but the
return false;
line seems to break the script. Any ideas?
HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="slide.js"></script>
</head>
<body>
<button id="button1" onclick="nextSlide('#1', '#2')">Hide it</button>
<p id="1">Hide this text</p>
<p id="2">Show this text</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</body>
</html>
JS:
window.onload=function(){
$('#2').fadeOut(1);
};
function nextSlide(hideDiv, showDiv) {
$(hideDiv).hide("slide", 2000, function(){
$(showDiv).show("slide", 2000);
});
return false;
};
Why do you have to return anything? Is there another method dependent on getting "false" back?

Categories