I am displaying a modal dialog to get "delete this service" or "cancel" options. When I first click on the button that opens the dialog the two buttons are missing. The red x is icon is displayed in the upper right corner and displays the help text without having to hover over the icon.
If I close it and reopen the dialog both buttons appear as they should. I'm not seeing any errors in the console.
I'm using jquery 3.1.1 and jquery ui 1.12.1. I'm calling the dialog out of a toolbar built in paramquery grid.
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Delete this service": function () {
var serviceid = grid.getRecId({rowIndx: rowIndx});
$.ajax($.extend({}, ajaxObj, {
context: grid,
dataType: 'text',
url: "/utilities/ajax_delete_service.php",
data: {serviceid: serviceid},
success: function () {
$("#services_grid").pqGrid("refreshDataAndView");
},
error: function () {
this.removeClass({rowIndx: rowIndx, cls: 'pq-row-delete'});
}
}));
$(this).dialog("close");
},
Cancel: function () {
grid.removeClass({rowIndx: rowIndx, cls: 'pq-row-delete'});
$(this).dialog("close");
}
}
});
UPDATED: I've created a fiddle that shows the problem. Run the fiddle, click on the top row of the grid and select "Delete Service" The buttons don't show. close the dialog. Click on "Delete Service" again and the buttons show.
The function for displaying the dialog is at the top of the fiddle.
JSFiddle
Related
I have a jQuery UI Dialog that is displayed when there are form errors.
Heres the code:
function alert_field_errors (errors)
{
$('<div></div>').dialog({
modal: true,
title: "Error",
open: function () {
$(this).html('The following are required:<br /><br />'+errors+'<br />Please complete these in order to continue.');
},
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
}
the errors variable would contain something like First Name<br />Last Name<br />Email Address<br />
It works great, except for the fact that it is not centered. It seems to be positioning itself before the content is loaded, so that when it is displayed, the bottom margin of the dialog is closer to the bottom of the window compared to the top margin of the dialog.
I tried using the position option, but nothing seems to work.
Any help would be greatly appreciated.
Heres how I fixed it:
I created an empty div on the page with the id of error-dialog and gave it css display: none;.
Then I changed my code to this:
$('#error-dialog').html('The following are required:<br /><br /><i>'+$errors+'</i><br />Please complete these in order to continue.');
$('#error-dialog').dialog({
modal: true,
title: "Error",
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
Now it is populating the dialog with content before display it, therefore allowing it to center itself properly.
I have a dropdown menu which contains 3 options. This menu is shown inside a modal jQuery UI dialog.
I can open open the dialog and choose one of the three options. The chosen option is stored in a variable. This works fine. But if I open the dialog again and choose another option, the variable does not change - it contains the value of first selection.
$("#button").click(function()
{
var diag = "<select id='diagDropdown'>"
+"<option>Option 1</option>"
+"<option>Option 2</option>"
+"<option>Option 3</option>"
+"</select>";
$(diag).dialog(
{title: "Choose Option"},
{autoOpen: "false"},
{modal: "true"},
{draggable: "false"},
{ buttons: {OK: dialogOK} });
function dialogOK()
{
var chosenOption=$("#diagDropdown option:selected").val().toLowerCase();
//working with chosen option
$(this).dialog("close");
});
Hope you can help me. Thanks in advance!
The problem is that each time you click on your element with id "button", you are creating a new dropdown with id "diagDropdown" in a new dialog.
Then your code :
var chosenOption=$("#diagDropdown option:selected").val().toLowerCase();
is always selecting the first dropdown with id "diagDropdown" in the DOM.
Try this :
<input type="button" value="click me" id="button"/>
<script type="text/javascript">
// On DOM ready
$(function() {
var dropdown =
$('<select id="diagDropdown"> ' +
'<option>Option 1</option>' +
'<option>Option 2</option>' +
'<option>Option 3</option>' +
'</select>');
// Create the dialog (only once)
dropdown.dialog({
title: "Choose Option",
autoOpen: false,
modal: true,
draggable: false,
buttons: {
"OK": function() {
var chosenOption=$('#diagDropdown option:selected').val().toLowerCase();
//working with chosen option
$(this).dialog('close');
}
}
});
// Bind click event : on click just open the existing dialog
$('#button').click(function() {
$('#diagDropdown').dialog('open');
});
});
</script>
When I create a modal box everything works perfectly. However when I want to open another modal box by clicking the OK button from the first modal box this will open up the next modal box but the CSS for applying the image background with recude opactiy does not seem to be used once this happens.
Has anyone ever tried this and if so is there some way I can make this style still apply when the second modal box opens and the first one closes.
Thanks
Rory
$('#dialog1').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
$('#dialog2').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
$('#dialog2').dialog('open');
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
I managed to fix this by simply adding the overlay to the <body> via JQuery
I am using a jQuery-UI dialog box that has three fields on it together with an 'Update' and 'Cancel' buttons.
When the dialog is opened, I would like to have the focus set to the first field in that dialog, say it was calle 'ID' but from the looks of it, the focus is set to my 'Cancel' button.
How can I override this and have the focus set to 'ID' field when opened?
here the open function is called after the dialog box open happens.
$( ".selector" ).dialog({
open: function(event, ui) {
$('#yourText').focus();
}
});
To set default focus on cancel button pass the index of the button. The default focus is on first button ie index 0. To set focus on second element you can use following code
$(this).parents('.ui-dialog-buttonpane button:eq(1)').focus();
Source code to create a dialog with two buttons and set focus on a button
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog" ).dialog({
modal: true,
minHeight:200,
minWidth:190,
buttons: {
Delete: function() {
// do something
},
Cancel: function() {
$( this ).dialog("close");
}
}
});
//to set focus on cancel button
$(this).parents('.ui-dialog-buttonpane button:eq(1)').focus();
});
I have a div:
<div id="mproEmailAccountPopUp"></div>
I declare a Dialog
var popupdiv = $( '#mproEmailAccountPopUp' );
popupdiv.dialog({
width: 650,
autoOpen: false,
modal: false
});
I then get some html form stuff (this works fine) from a server and update the dialog content:
function ShowEdit(accountId) {
$.ajax({
type: "POST",
async: false,
url: "<%=EmailHandler %>?action=GetEmailAccountEdit",
data: { accountId: accountId },
success: function (result) {
alert("Success GetEmailAccountEdit");
popupdiv.html(result);
popupdiv.dialog("open");
//popupdiv.dialog( "moveToTop" )
}
});
}
This works beautifully the first time, but if you press the close button, and then recall the function. The dialog is updated with the new html, but you can't type in ANY of the text boxes. I have narrowed it down to the modal overlay (as it works with modal:false). The z-index seems to be 1 less than the modal form, and I have even deleted (via firebug) the modal overlay div, but I can still not edit the text boxes.
If I turn modal:false then it works fine, modal:true is causing these problems.
As you can see, i have tried the "moveToTop" method, no effect.
I have also tried destroying the popup, and reinitialising it entirely from within the ShowEdit function.
Anyone have any clue about what I can do to fix this?