I am trying to load another page in a jquery ui modal
This is my Js File
function eventWindow(url) {
getElementById("eventviewer").style.display="block";
$("#eventviewer").load(url).dialog({
modal:true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
}
this the markup
<!doctype html>
<html>
<head>
<title><?php echo "Date:".$firstDayArray['month']." ".$firstDayArray['year'];?>
</title>
<link href="../css/main.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="event.js" type="text/javascript"></script>
</head>
<body>
.....
<?php
echo "<td class=\"days\">".$dayArray["mday"]."<br/>".$event_title."</td>\n";
?>
<div id="eventviewer"></div>
......
</body
</html>
when i use window.open it works and opens in separate window.
But i am not able to open it in a jquery ui modal dialog.
There are multiple ways you can do this but I am not sure which one is the best practice. You can append an iFrame in the dialog container like this:
$("#dialog").append($("<iframe />").attr("src", "your link")).dialog({dialogoptions});
OR:
Working Fiddle
$(function () {
var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>');
var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
width: "auto",
height: "auto",
close: function () {
iframe.attr("src", "");
}
});
$(".thumb a").on("click", function (e) {
e.preventDefault();
var src = $(this).attr("href");
var title = $(this).attr("data-title");
var width = $(this).attr("data-width");
var height = $(this).attr("data-height");
iframe.attr({
width: +width,
height: +height,
src: src
});
dialog.dialog("option", "title", title).dialog("open");
});
});
Related
Two problems with jquery-ui dialog:
it always open at the top left of the screen, I need it to be centered
The close box (X) and the close button work only the first time the
dialog is opened.
When the openNewEvent function is called again after closing the first instance of the dialog, the dialog opens but can't be closed, because the buttons do not work. No errors on the console.
Maybe it is worth to mention that the code runs inside a Office 365/SharePoint environment.
The function for opening a specific web page in a jquery-ui dialog looks like this:
function openNewEvent() {
var page = "http:/mypageurl";
var dialog = jQuery('#dialogdiv')
.html('<iframe style="border:0px;" src="' + page + '" width="1160" height="1900"></iframe>')
.dialog({
title: "Page",
autoOpen: false,
dialogClass: 'ui-dialog,ui-widget-header',
modal: false,
resizable: false,
position: { my: "center", at: "center", of: "window", collision: "none"},
height: 1020,
minHeight: 1020,
width: 1200,
buttons: {
"Ok": function () {
jQuery(this).dialog("close");
}
},
create: function (event, ui) {
jQuery(event.target).parent().css('position', 'fixed');
}
});
dialog.dialog('open');
}
You can test it with this HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
function openNewEvent() {
var page = "http://code.jquery.com";
var dialog = jQuery('#dialogdiv')
.html('<iframe style="border:0px;" src="' + page + '" width="300" height="500"></iframe>')
.dialog({
title: "Page",
autoOpen: false,
dialogClass: 'ui-dialog,ui-widget-header',
modal: false,
resizable: false,
position: { my: "center", at: "center", of: "window", collision: "none"},
height: 550,
minHeight: 550,
width: 350,
buttons: {
"Ok": function () {
jQuery(this).dialog("close");
}
},
create: function (event, ui) {
jQuery(event.target).parent().css('position', 'fixed');
}
});
dialog.dialog('open');
}
</script>
<div id="dialogdiv"></div>
<button onClick="openNewEvent()">Click me</button>
</body>
</html>
Both things working, check jQuery version you're using is 3.3.1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
function openNewEvent() {
var page = "http://code.jquery.com";
var dialog = jQuery('#dialogdiv')
.html('<iframe style="border:0px;" src="' + page + '" width="300" height="500"></iframe>')
.dialog({
title: "Page",
autoOpen: false,
dialogClass: 'ui-dialog,ui-widget-header',
modal: false,
resizable: false,
height: 550,
minHeight: 550,
width: 350,
buttons: {
"Ok": function() {
jQuery(this).dialog("close");
}
},
create: function(event, ui) {
jQuery(event.target).parent().css('position', 'fixed');
}
});
dialog.dialog('open');
}
</script>
<div id="dialogdiv"></div>
<button onClick="openNewEvent()">Click me</button>
</body>
</html>
I am using google docs viewer to display word and PDF files in dialog in my application. But my client need that document should not get download. So want to hide 'Pop-out' option. Please help me for it. Below is my code snippet :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#btnShow").click(function () {
$("#dialog").dialog({
modal: true,
title: '',
width: 750,
height: 450,
buttons: {
Close: function () {
$(this).dialog('close');
}
},
open: function () {
var object = "<iframe id='resViewer' src='https://docs.google.com/viewer?url=my_file.pdf&embedded=true' style='width: 700px; height: 700px;' frameborder='0'></iframe>";
$("#dialog").html(object);
}
});
});
});
</script>
<input id="btnShow" type="button" value="Show PDF" />
<div id="dialog" style="display: none">
</div>
Please help me.
If anyone knows any other way to display word and PDF file both give me way or suggest for this.
Thanks.
The following CSS will remove the pop out button.
div[aria-label="Pop-out"] {
display: none;
}
div["aria-label=toolbar"] {
width: 52px;
}
But to get the CSS to apply to the iframe your going to have to do some trickery. See jQuery, select element inside iframe, which is inside an iframe and How to apply CSS to iframe?
How do I add php variable to Jquery UI dialog modal box,
for instance I have a form that has contain information's to be inserted in database, when user click the submit button the insert query will execute and once successful I will have JQuery UI modal box appear on page and ask user if they want to insert new items, but how do I redirect the page with php value?
this is my actual link that modal box needs to redirect: home/purchase_order_pricing?code=eGx8t6gc2SI7
here's my code:
$code = $this-input->post('code');
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>jQuery UI Dialog - Modal confirmation</title>
<link rel='stylesheet' href='//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css'>
<script src='//code.jquery.com/jquery-1.10.2.js'></script>
<script src='//code.jquery.com/ui/1.11.0/jquery-ui.js'></script>
<script>
$(function() {
$( '#dialog-confirm' ).dialog({
height: 50,
width: 350,
modal: true,
resizable: true,
dialogClass: 'no-close success-dialog',
buttons: {
'Yes': function() {
window.location = 'home/purchase_order_pricing?code = $code';
},
No: function() {
$( this ).dialog( 'close' );
}
}
});
});
</script>
</head>
<body>
<div id='dialog-confirm' title='Add more items?'>
<p>asd</p>
</div>
<div id='popup-msg'>
<div id='loading'>
<h2>Loading...</h2>
<h3>Please wait a few seconds.</h3>
</div>
</div>
</body>
</html>
You can pass the php variable to the javascript like this:
<script>
var code = "<?php echo $code; ?>";
</script>
and the you can use the variable code in your javascript. Is that what you need?
For example:
window.location = 'home/purchase_order_pricing?code =' + code;
Can't get Fancybox-2 to show PDFs with Internet Explorer!
(It works fine in Chrome and Firefox)
In <head> I have this code:
<!DOCTYPE HTML>
<!-- Add fancyBox -->
<link rel="stylesheet" href="../../../js/fancybox/source/jquery.fancybox.css" type="text/css" media="screen"/>
<script type="text/javascript" src="../../../js/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox({
height: '100%',
// width: '50%',
//openEffect : 'none',
// closeEffect : 'none',
iframe: {
preload: false
},
afterShow: function () {
$(".fancybox-wrap").draggable();
},
beforeLoad: function () {
this.title = $(this.element).attr('caption');
}
});
});
</script>
then in <body> I have:
<a class="fancybox" data-fancybox-type="iframe" caption="my test" href="PDF/test.pdf" target="_blank" title="test PDF"><img style="border:0;" src="../img/pdficon.png "></a>
How can I get it to work, in your opinion?
I am learning how to use jQuery dialog. One link I found helpful is http://imperavi.com/redactor/examples/uidialog/. The code is listed below, but I don't know why it does not work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Dialog</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<p>Open</p>
<div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>
<script type="text/javascript">
function showDialog()
{
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
</body>
</html>
The dialog appears after adding jquery-ui and css, but "Lorem..." does not show.
One more thing... Is it possible to pass a string to "showDialog" such that it can show different content based on different link? For example, adding "Open 1" and "Open 2" to show different string?
I think, you forgot to add jquery UI.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Dialog</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="path_to_jq_ui"></script>
</head>
<body>
<p>Open</p>
<div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>
<script type="text/javascript">
function showDialog(text)
{
$("#dialog-modal").html(text)
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
</body>
</html>
Here is working fiddle: http://jsfiddle.net/bY3F4/3/
Download JqueryUI from here
Edit: Dynamic dialog content added to code
Dialog is a part of jQuery UI. You have to include it as well.
the Dialog is in the JQuery UI, you only required the JQuery.
insert this in the beginning:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Add jQuery UI Stylesheet
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />
Add jQuery + jQuery UI
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>