blockui over jQueryUI modal dialog - jquery-ui

I can't make BlockUI work over a modal dialog.
I tried to look after z-index issues, but without success...
In my web page, here is the head :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" ></script>
<script type="text/javascript" src="http://jquery.malsup.com/block/jquery.blockUI.js?v2.38" ></script>
<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" />
and the body:
<div id="dialog_test" title="Test">
TEST
</div>
GO
<script>
$(function() {
$( "#dialog_test" ).dialog({
autoOpen: false,
modal: true,
buttons: {
"Cancel": function() {
$( this ).dialog( "close" );
},
"Ajax": function() {
$.ajax({
"url" : "http://jquery.malsup.com/block/wait.php",
"success" : function(json) {
$( "#dialog_test" ).dialog( "close" );
}
});
}
}
});
$( "#go" ).click(function(event) {
event.preventDefault();
$( "#dialog_test" ).dialog( "open" );
});
});
$(document)
.ajaxStart(function() {
$.blockUI({
theme: true
})
})
.ajaxStop($.unblockUI);
</script>
Any idea?

You don't specify what you have tried with z-index.
The blockUI plugin has an option to change the z-index of the message it creates (documentation):
// z-index for the blocking overlay
baseZ: 1000,
jQuery UI Dialog as an option for specifying a z-index as well. Its default value is 1000. So you have to set a higher number for the BlockUI option, let's say 2000:
$.blockUI({
theme: true,
baseZ: 2000
})
DEMO

Thanks Didier for your answer, it helped get me on track. You'll notice that the jsfiddle in Didier's answer works the first time you open the dialog but any further open and ajax results in the blockUI elements appearing beneath the dialog. The dialog must recalibrate it's z-index to be the top dog every time it opens.
I've found two possible ways around this:
'destroy' the dialog when it is closed and recreate it when
it is opened.
rather than blocking the whole UI, just block the
dialog. This can be done using the widget method, like this:
$( ".selector" ).dialog( "widget" ).block({
theme: false,
message: '<h1>Wait for me please...</h1>',
css: { border: '3px solid #a00' }
});

Related

How to have a jQuery dialog stay inside a div

I have tried to get a dialog (#dialog) stay inside a container div (#dialogContainer), i.e. I don't want it to be possible to drag the dialog outside the boundaries of the container div in the ui, but no success. I thought that the "appendTo" setting would fix this, but not. Any help is appreciated!
Here is an example that shows that it is indeed possible:
https://jqueryui.com/dialog
Code:
<div id="dialogContainer" style="width:600px;height:500px;border:1px solid blue;"></div>
<div id="dialog" title="Dialog Title">
This is dialog content.
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#dialog").dialog({
position: {
my: 'left top',
at: 'left',
of: $('#dialogContainer')
},
draggable: true,
appendTo: "#dialogContainer",
modal:true
});
});
</script>
You can use the following code to restrict the dialog so it can't be dragged outside a container:
$("#dialog").dialog({
...
})
.parent().draggable({
containment: '#dialogContainer'
});
See here for a Fiddle.

jQuery dialog always opens top left

My jQuery dialog always opens in the top left corner of my browser window.
The following shows my code after simplification.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>
<body>
<input id='submit' type="submit" value="Submit">
<div id='dialog'></div>
<script>
$('#submit').click(function(event){
$(function() {
$('#dialog').dialog({
autoOpen: false,
width:500,
height:500,
position:'center'
});
});
$('#dialog').dialog('open');
});
</script>
</body>
</html>
Any ideas on what I need to do so that it opens positioned in the center?
It is highly1 unlikely that this is the cause of your problem, but I was having the same issue, and found this bit of code in jquery-ui.js :
// /1.10.0/jquery-ui.js:
target = $( options.of )
...
// line 12053
if ( target[0].preventDefault ) {
// force left top to allow flipping
options.at = "left top";
}
That bit of code checks to see if the target element has the preventDefault function defined. By default, target[0] is going to equal the window object, which does not have preventDefault. However, in my case, I had defined a function called preventDefault in the window object's global scope. My window.preventDefault caused the if-block to evaluate to true, thus overriding the default options.at value of "center".
As I said, it's highly1 unlikely that you have defined the function window.preventDefault, but that is what caused it for me.
1 EDIT: based on the comments, it is actually not so unlikely. Glad I could help everyone.
Use this
<input id='submit' type="submit" value="Submit">
<div id='dialog'></div>
<script>
$('#submit').on('click', function(event){
$(function() {
$('#dialog').dialog({
autoOpen: false,
position:'center'
});
});
$('#dialog').dialog('open');
});
</script>​
Greetings.
Use next dialog options
$('#dialog').dialog({
autoOpen: false,
width:500,
height:500,
position:
{
my: "center",
at: "center",
of: window
}
});
JSFiddle DEMO
the answer is pretty simple, Just we need to add the jquery file jquery-1.11.1.js and it's all
I was having an issue where it would be centered in IE11, but on IE7 it would be top left corner even with the position attribute.
I am using jqueryUI 1.11.2, and it appears support for IE7 and older was removed in 1.8.2 or somewhere around there. Anyways, the solution was to put double quotes around my values like so:
$('#dialog').dialog({
autoOpen: false,
modal: true,
width: '200',
title: 'Confirm Delete',
position: {
my: "center",
at: "center",
of: $("body"),
within: $("body")
},
buttons: {
'Delete': function () {
$('#btnDeleteAll').click();
$(this).dialog('close');
},
Cancel: function () {
$(this).dialog('close');
}
}
});
I just tried single quotes and those work too.

Tooltip won't show in Yii jquery button

If you create a jQuery UI button in Yii, the default behavior is that the text of the button should show as the tooltip. You can override this with the 'label' option, but neither of these works for me in Yii. Any suggestions? Here is the code I'm using:
<button id="btnClose"></button>
<script type="text/javascript" >
$(function() {
$("#btnClose").button({
text: false,
label: 'Close Wizard'
});
});
</script>
The button shows up just fine, just without a tooltip.
Thanks!
A tooltip is set in the title attribute.
The example you give us isn't Yii but plain jQuery.
<script type="text/javascript" >
$(function() {
$("#btnClose").button({
'text': false,
'title': 'Close Wizard'
});
});
</script>

Last jQuery modal dialog z-index overrides initial modal z-index

I have a need to show 2 dialog modals at once. Due to the contents of the first dialog needing to use some absolute positioning and z-indexing, the z-index of the overlay is important to me.
The problem I get is if I show a the first modal at z-index of 300, the overlay gets a z-index of 301. If I then show another modal with a z-index of 500, the new overlay gets a z-index of 501. If I close both of the modals and open the first modal again, instead of getting an overlay with z-index of 301, it is 503.
Here is some sample code.
<html>
<head>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#modal').hide();
$('#success-message').hide();
$('#show-modal-button').click(function(){
$('#modal').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 400
});
});
$('#modal-button').click(function(){
$('#success-message').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 500
});
});
});
</script>
</head>
<body>
<input type="button" id="show-modal-button" value="show modal"/>
<div id="modal">
<input type="button" id="modal-button" value="push"/>
</div>
<div id="success-message"><p>test</p></div>
</body>
</html>
UPDATE
I was able to get this to work by removing the widget from the DOM when closing using the code below. I feel like this is a hack and that it is either a bug or that I am doing something wrong in my approach. I'll post my solution as an answer if no one can tell me what I am doing wrong.
$('#modal-button').click(function(){
$('#success-message').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
$(this).dialog('widget').remove();
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 500
});
});
I was able to get this to work by removing the widget from the DOM when closing using the code below. I feel like this is a hack and that it is either a bug or that I am doing something wrong in my approach. I'll post my solution as an answer if no one can tell me what I am doing wrong.
$('#modal-button').click(function(){
$('#success-message').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
$(this).dialog('widget').remove();
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 500
});
});
Try setting the "stack" option to false:
'stack: false'
That might work for you
'stack: false' worked for me.
It seems setting it false stops the dialog recalculating its z-index when it is opened, or clicked or whatever.

jQuery Error - xyz is not a function

I am suddenly getting a most unwelcome error on this page:
Error: $("#accordion").accordion is not a function
My jQuery code is as follows:
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h4", autoHeight: false, collapsible: true });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
// controls the sidebar navigation action
$('.interior #subContent > ul > li > a.drop').click(function(){
$(this).parent().children('ul').toggle("slow");
return false;
});
$(window).ready(function() {
$('li.products ul').show();
$('li.technical ul').show();
$('li.tips ul').show();
});
});
</script>
I has worked for weeks and today...errors all the way.
I would appreciate any help in determining the cause of the error.
Thanks.
Found the problem:
This:
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>
does not link to anything anymore.
The requested URL
/svn/tags/latest/ui/ui.accordion.js
was not found on this server.

Resources