How to Window.Open inside a jQuery Modal - javascript

I have my Modal Div as:
<div id="dialog-modal" title="Open File">
<img alt="progress" src="images/ajax-loader.gif"/>
</div>
On Click of Button I am able to see Modal and then see the progress icon.
<script type="text/javascript">
$(function () {
$('#button1').click(function () {
$('#dialog-modal').dialog("open");
});
$("#dialog-modal").dialog({
autoOpen: false,
height: 140,
modal: true,
});
});
</script>
But How can I do a operation or function on Load of Modal Window??
Let's say , I want to download a file from server , when the modal window appears (..showing the progress icon)

You can hook into the dialogopen function:
$( "#dialog-modal" ).on( "dialogopen", function( event, ui ) {
console.log('Wayhay!!');
window.open("http://www.google.com");
} );
See jsFiddle:
http://jsfiddle.net/3Y63f/1/
Further info here:
http://api.jqueryui.com/dialog/#event-open

Related

popup close icon click event custom

Jquery popup close icon click event is not working?
http://jsfiddle.net/ymssceqv/1888/
JS:
//Set up the dialog box
$("#myDialog").dialog({
autoOpen : false,
modal : true,
title : "A Dialog Box"
});
//Open the dialog box when the button is clicked.
$('#clickMe').click(function() {
$("#myDialog").dialog("open");
});
$(document).on('click', '#myDialog .ui-dialog-titlebar-close', function (e) {
e.preventDefault()
alert('you clicked the x!');
});
You can set z-index for below divs. So that close event will be called on close button.
.ui-front{
z-index: 1;
}
#myDialog{
z-index: 2;
}
You can use beforeClose property of the dialog box:
$("#myDialog").dialog({
autoOpen : false,
modal : true,
title : "A Dialog Box",
beforeClose: function () {
customFunction();
}
});
function customFunction() {
alert('Custom function called');
}
I don't know how to modify the behaviour of the default close button. But a workaround is hiding that button and adding a new one:
$("#myDialog").dialog({
dialogClass: "no-close", // Add a class to hide default close button
buttons: [ //Add your own button
{
text: "New button",
click: function() { //Add your own click event
test();
}
}
],
autoOpen: false,
modal: true,
title: "A Dialog Box"
});
//Open the dialog box when the button is clicked.
$('#clickMe').click(function () {
$("#myDialog").dialog("open");
});
function test() {
alert("close icon clicked");
//Some function script...............
}
/* Hide default button */
.no-close .ui-dialog-titlebar-close {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="myDialog">
This is the content of my modal dialog box
<input type="text" id="myTextBox" />
</div>
<button id="clickMe">Click Me</button>
In this way you can have a button, but in a different position. You can play with css to move it if you like.
Anyway, I don't understand why you want a dialog that doesn't close....

Close button X not removed

I'm using jqueryui dialog, I want to hide the X button there at the top.
I tried the code below, but it didn't work.
$( '.ui-dialog-titlebar-close').remove();
My JS:
$(function () {
$("#dialog").dialog({
closeOnEscape: false,
...
});
HTML:
<div id="dialog" title="Confirmation Message" class="dialogboxstart">
<fieldset>
<div class="dialogRow">
<span class="dialogHeading" id="confirmMsg"></span>
</div>
</fieldset>
</div>
Try doing that in the open function of dialog.
JS:
$(function () {
$("#dialog").dialog({
open: function () {
$('.ui-dialog-titlebar-close').remove(); //Remove here.
}
});
});
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/459/
You probably need this
$(".ui-dialog-titlebar-close").hide();
Use the remove in document.ready.
$(document).ready(function(){
$( '.ui-dialog-titlebar-close').remove();
});
Here is the fiddle.

javascript popup window as iframe, div,or window always on top on changing links

in web page, is it possible to open 'popup' frame as:
div or iframe or even window, so :
1. the user can see both , the pop window and the 'main' page ?
on change link in specific domain, the popped frame will remain always on top
( with additional code if needed)
the user can see both the frame and the main a
and get focus with mouse click on the popped and main
possibility to access objects/events from popped and main.
(in iframe even on different origin)
in standard desktop application, we can achieve it, as MDI forms, for example.
code sample or link will help.
Example:
$("#simple").dialog(
{
autoOpen: false,
open: function()
{
$("#withIframe").dialog( "moveToTop" );
},
focus: function( event, ui ) {
$("#withIframe").dialog( "moveToTop" );
}
});
$("#withIframe").dialog(
{
autoOpen: false,
open: function(ev, ui){
$('#if').attr('src','http://www.jQuery.com');
$(this).dialog( "moveToTop" );
}
});
$(".link").click(function() {
$("#simple").dialog('option','modal',$('#isModal').prop('checked')).dialog( "open" );
});
$(".link_iframe").click(function() {
$("#withIframe").dialog( "open" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<label><input type='checkbox' id='isModal' /> Is Modal? </label>
<a href='#' class='link'>link</a>
<a href='#' class='link_iframe'>link (iframe)</a>
<div id='simple'>
<h2>
Simple dialog
</h2>
</div>
<div id='withIframe'>
<iframe id='if' src=''></iframe>
</div>

Why does my jquery function not work on div in page loaded by ajax

I'm just starting out with jquery. Already learned some things and like it, but I have been struggling with the following issue for a few days.
I copied the "dialog-confirm"-function from https://jqueryui.com/. I placed this script between the tags on my index.php page.
<script type = "text/javascript">
$(document).ready(function(){
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
$(window).resize(function() {
$('#scrollpage').height($(window).height() - 250);
});
$(window).trigger('resize');
$('.container').on('click', '.mainmenu', function(event){
event.preventDefault();
var url = $(this).attr('href');
$.get(url, function(data) {
//alert(data);
$("#div1").load(url);
});
$( this ).parent().addClass('current_page_item');
$( this ).parent().siblings().removeClass('current_page_item');
});
$('.container').on('click', '.rapport', function(event){
event.preventDefault();
//$(".dialog-confirm").dialog( "open" );
var url = $(this).attr('href');
$.get(url, function(data) {
//alert(data);
$("#div1").load(url);
});
});
});
</script>
If i place the matching div in the same index.php page. It works fine, the div pops up.
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Blablabla</p>
</div>
However when i place the div in a page which is loaded by ajax in the div1, then I cant get it to work.
<div class="scrollpage" id="scrollpage">
<div class="container" class="page" id="div1">
</div>
</div>
Can anyone explain to me why this is, and how I can fix this?
What's happening is that your $(document).ready() function executes as soon as the DOM is loaded. This DOM contains just what it is in the html file. At that time, there's no div with an id equal to 'dialog-confirm'. Loading pieces of HTML with ajax doesn't trigger a DOMReady event. What you've got to do is to call the .dialog() jQuery function AFTER you've loaded the div with Ajax:
$("#div1").load(url, function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
Here is what happens in your program(loading div with ajax):
First, your script initiates dialog window container by looking an element with id dialog-confirm.
Since, you don't have an element with that id yet, dialog container cannot be prepared.
There are two ways you can make it work:
Call dialog() after ajax requests,
Place div statically on page and change content with ajax request.
Solutions:
1- Use the code below instead of $("#div1").load(url);
$("#div1").load(url, function(){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
2- Place divs statically on your page:
<div class="scrollpage" id="scrollpage">
<div class="container" class="page" id="div1">
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Blablabla</p>
</div>
</div>
</div>
Then load just <p>... with $("#dialog-confirm").load(data); instead of $("#div1").load(url);.
Your jquery is executed only once after your page is loaded. Then is initiating everything needed for the tool!
This means every .container is being 'transformed'.
If you later add a new div.container it is not 'transformed' yet. You have to execute the jquery again after your div is appended!

How to dynamically load content from an external url, inside of a jquery ui modal dialog widget?

I asked this question before, but I don't think I explained properly for what I am trying to accomplish.
There are multiple links on my website and I want to open the content from the link in a jquery ui modal dialog widget.
I'm trying to use 'this' to reference the link that the user selects dynamically.
What am I doing wrong here?
The code I'm using is below:
comment #1
comment #2
comment #3
<div id="somediv"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#somediv").load(this.getTrigger().attr("href")).dialog({
autoOpen: false,
width: 400,
modal: true
});
$("#test").click(function(){$( "#somediv" ).dialog( "open" );});
});
</script>
http://jsfiddle.net/qp7NP/
A couple changes: changed ID to Class and used IFrame.
comment #1<br>
comment #2<br>
<a href="http://ask.com/" class="test" >comment #3</a><br>
<div id="somediv" title="this is a dialog" style="display:none;">
<iframe id="thedialog" width="350" height="350"></iframe>
</div>
<script>
$(document).ready(function () {
$(".test").click(function () {
$("#thedialog").attr('src', $(this).attr("href"));
$("#somediv").dialog({
width: 400,
height: 450,
modal: true,
close: function () {
$("#thedialog").attr('src', "about:blank");
}
});
return false;
});
});
</script>
In case you want to pull in the HTML instead of IFrame, you will have to use Ajax (XMLHttpRequest), something like this: http://jsfiddle.net/qp7NP/1/
You can't have multiple elements with the same Id.
Change your links to to class="test" instead and therefore your click event to $('.test').click().
Also if you still have problems, and I remember I had some similar issues because how JQUery Dialog behaves itself with the DOM. It will literally rip your #somediv out of content and append it to the bottom of a page to display that dialog. I solved my dynamic dialog loading issues with wrapping it in another div.
<div id="somediv-wrap">
<div id="somediv">
</div>
</div>
<script>
$(document).ready(function() {
$("#somediv-wrap").dialog({
autoOpen: false,
width: 400,
height:200,
modal: true
});
$(".test").click(function(event)
{
event.preventDefault();
var link = $(this).attr('href');
$("#somediv").load(link,function(){
$( "#somediv-wrap" ).dialog( "open" );
});
});
});
</script>

Categories