I am trying to bring a Dialog Box using jQuery-UI where I am facing one issue.
Dialog box is opened in screen with its Tiltle and close button.However I am not able to close the dialog.I understand the issue is, the dialog opened is not recognized and hence the close button is not working.I am able to select elements in parent page which should not happen.
I done several researches in Google and could not find a solution for that.
Please help me to sort out this issue. I am pretty new into Java Scripts and jQuery.
The following are my codes.
Using jQuery UI - v 1.9.0.
HTML code
<div id="dialog">
<p>This is test Dialog Box Message !!</p>
</div>
Controller.js
There is a button in my page and inside of this button click event,I have
$("#dialog").dialog({
autoOpen: false,
title: "Test Tiltle",
height: 300,
width: 350,
modal: true,
show: 'fade',
hide: 'fade',
close : function() {
$(this).dialog( "close" );
}
});
$("#dialog").dialog( "open" );
You left of a "
http://jsfiddle.net/uDYcJ/1/
$("#dialog").dialog({
autoOpen: false,
title: "Test Tiltle",
height: 300,
width: 350,
modal: true,
show: 'fade',
hide: 'fade',
close : function() {
$(this).dialog( "close" );
}
});
$("#dialog").dialog( "open" );
You can see from the colour formatting in your code block that you're missing a closing double quotes in your title:
title: "Test Tiltle,
Just close up that string:
title: "Test Tiltle",
Related
I have a page where I call a java script to open a popup. This pop up is defined as a Kendo().Window in common .js file for an application.
On the page I have a jQuery that opens a pop up om .Ajax success:
var dialog = $("#myWin").data("kendoWindow");
$("#dWin").html(result);
dialog.open();
And in a common .js file I define the window:
$("#myWin").kendoWindow({
visible: false,
modal: true,
//title: "Details Report",
open: function (e) { $("html, body").css("overflow", "hidden"); },
close: function (e) { $("html, body").css("overflow", ""); },
draggable: false,
width: 850,
height: 430,
position: {
top: 100,
left: 500
},
resizable: false
});
Before, I had this code on each page, where I was able to define its oww window with a title. Now, I moved it to a common file and need to set the specific title related to each page. I looked up in the inspect element window, that the title id is win_wnd_title and tried to set the title like that:
$('#win_wnd_title').val("Specific Title");
But that did not work.
What is the best way I can accomplish something like that?
Just figured out the answer:
$('#win_wnd_title').text("Specific Report");
I have a page on which I use blockUI to block some elements. When the user clicks a button on the page, a dialog appears, but the blocks on the underlying page are "showing through" on the dialog. I have tried using z-index, such as in the following, but that hasn't worked. How can I stop the blocks from appearing on the dialog?
function showDialog() {
$("#imageGallery-modal").dialog({
width: 1200,
height: 600,
modal: true,
resizable: false,
zindex: 900000,
show: 'clip'
});
}
I removed the z-index, blocked the page before opening the dialog, and unblocked the page after the dialog closes.
function showDialog() {
$.blockUI();
$("#imageGallery-modal").dialog({
width: 1200,
height: 600,
modal: true,
resizable: false,
show: 'clip'
});
$.unblockUI();
}
I am building an MVC 4 app with lots of cells in a table which the user will click for additional data about the contents of that cell, so I pop up a modal jQuery dialog. I don't claim to have done this correctly but I have an Ajax form that contains nothing but a hidden field to send off the id of the clicked cell contents to the controller.
#Html.Hidden("selectedStatusId")
Then on clicking I get the id and put it into that hidden:
$(".statusCell").click(function () {
var statusId = this.id;
document.getElementById("getStatusDataForm").selectedStatusId.value = statusId;
$("#getStatusDataForm").submit();
$("#StatusData").dialog("open");
});
The next to the last line is submitting the form which returns a partial to the empty div:
<div id="StatusData" title="Status Details" class="selectedStatusDetail" style="display: none"></div>
Then I configure my dialog:
$(function () {
$("#StatusData").dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: true,
width: 800,
show: {
effect: "fade",
duration: 100
},
hide: {
effect: "fade",
duration: 100
},
create: function (event, ui) {
// Center the dialog each time it re-opens
$(this).dialog('widget')
.css({ position: 'fixed' })
.position({ my: 'center', at: 'center', of: window, collision: 'fit' });
},
open: function (event, ui) {
// Remove the closing 'x' from the toolbar and replace it with the text 'Close'
$('.ui-dialog-titlebar-close')
.removeClass("ui-dialog-titlebar-close")
.html('<span style="float:right; margin-right: 10px; font-weight: normal;">Close</span>');
},
});
So the first time I click on one of the cells the dialog displays 107px below where it displays every time from then on. Other than that it works perfectly.
I have read about how you don't want to display before the dialog is loaded and I suspect that might be happening since the call to the db is async and I create the dialog before I know I get the data back. But this is the only way I have been able to get all of the rest to work.
Do I need to refactor the whole mess or is there a fix?
I am unable to drag or resize a dialog box. I have downloaded all dependencies and tried various settings in options, but still no joy:
<script type="text/javascript">
function dialog(){
$("#paragraph").dialog({
title: 'This is a title',
width: 300,
height: 50,
modal: true,
draggable: true,
autoOpen: false,
buttons: {
'Remove': function () { // remove what you want to remove
// do something here
alert("this is a test alert!");
$(this).dialog('close');
$("#flex1").flexReload();
},
Cancel: function () {
$(this).dialog('close');
}
}
});
$("#paragraph").dialog("open");
};
</script>
<p id="paragraph">This is some paragraph text</p>
Downloads of the jQuery UI library are customizable. If your copy doesn't include the 'Draggable' and 'Resizable' interactions, your dialog will not be draggable or resizable.
Well maybe add resizable option and set it to true.
Also the dialog is draggable by the title bar not the entire dialog body.
Any good?
I would like to update jQuery dialog after receiving ajax response.
Here is my definition
var $dialog = jQuery('<div>Wait</div>') .html('Sending your message...<img src="../images/AjaxWait.gif" style="float: left; padding-left: 50px;"/>')
.dialog({
modal: true,
width: 160,
autoOpen: false,
resizable: false,
draggable: false,
});
$dialog.siblings(".ui-dialog-titlebar").hide();
and before ajax send:
$dialog.dialog('open').dialog('option', 'height', 50);
And once receiving ajax response I am trying following:
jQuery('.ui-dialog-content').dialog('option', 'buttons',
{ "Ok": function() { jQuery(this).dialog('close'); } } );
....but nothing happens......
any idea?
I think you cannot modify an existing dialog in this way. To accomplish the task you're faced with just include the button in the first call, but immediately hide it. Once the ajax request has finished just unhide the button. For a proper visual experience just use hide/unhide the whole button pane:
var $dialog = jQuery('<div>Wait</div>') .html('Sending your message...<img src="../images/AjaxWait.gif" style="float: left; padding-left: 50px;"/>')
.dialog({
modal: true,
width: 160,
autoOpen: false,
resizable: false,
draggable: false,
buttons: { "Ok": function() { jQuery(this).dialog('close'); }
})
;
// hide buttons
$dialog.children('.ui-dialog-buttonpane').hide();
In the event handler for ajax complete just do
// unhide buttons
$dialog.children('.ui-dialog-buttonpane').show();
Optionally you may provide an easing identifier to animate the unhiding process.