Can someone please help me with hiding/disabling a button on jQuery dialog box?
Scenario: On button click I am opening a dialog box with 'Add' and 'Update' button.
Inside the dialog I have 2 text box containing date and message.Both will populate data if data already present in database else they will be blank allowing user to add data.
Now, If text box has pre-populated data(message exist in db) I have to hide Add button as user can only update the message.I tried few tricks which I got from stackoverflow but none of them is working as I am opening dialog box on button click so I guess I am creating button dynamically and I cannot hide them on fly.
I also tried giving an id to dialog button and hiding/disabling it using below code:
$('#id').hide();
$('#id').attr('disabled','disabled');
I looked into the below fiddle which is exactly what I want but If I adopt this then I have to make a lot of code change. So, was wondering if anyone can provide me an easy solution.
[http://jsfiddle.net/kkh2a/1/]
Thanks in advance.
$('#dialog-form').dialog({width:350,height:300,
resizable:false,
modal:true,
closeOnEscape: true,
draggable:false,
show:{effect:"fade"},
buttons:{
Add:{
text:'Add',
id:'AddMsg',
click:function(){
}},
Update:function(){
},
Cancel:function(){
$(this).dialog("close");
}
}});
Try this:
$('#dialog-form').dialog({
...
buttons : {...},
open : function() {
$('#dialog-form')
.dialog('widget')
.find('div.ui-dialog-buttonpane div.ui-dialog-buttonset button')
.eq(0)
.button('disable');
}
});
Hy all,
I use this way:
$("#myDivForLoadingDialog").dialog({
modal: true,
resizable: false,
height: "auto",
draggable: false,
closeOnEscape: false,
open: function (event, ui) {
$("#myDivForLoadingDialog").prev().hide();
}
})
without setting button in the option it does not show any button inside
set closeOnEscape: false to avoid your loading message been closed by "esc" button
in the opencallback hide alle the title box (and the close button it has inside).
I prefer to avoid drag, resize and all features not needed by loading message.
it works with jQuery 1.11.1 (and maybe with all previous version)
Related
I know that there are several questions which are similar, but none have worked for me.
I'll start by explaining how the jQuery Dialog is invoked. I have a page, where there is a button which is used to invoke the dialog:
<input type="button" class="..." value="..." onclick="forwardToEmail();"/>
On the same page I also have the following hidden div:
<div title="..." id="SendToemailDialog" style="display:none>
<p>...</p>
<input type="text" name="Email" id="SendToemail" />
</div>
The function forwardToEmail:
function forwardToEmail() {
//$('#SendToemail').val(''); --> Does not solve the problem
$('#SendToemailDialog').dialog({
resizable: false,
draggable: false,
height: 200,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
var email = $('#SendToemail').val();
//POST request removed to make example simpler
$('<div title="Information">Sent to: ' + email + ' </div>').dialog({
resizable: false,
draggable: false,
height: 140,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
});
},
"Cancel": function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
//Another thing tried to solve the problem wihtout luck
$('#SendToemailDialog').dialog("destroy");
}
});
return false;
}
The problem:
Whenever the button is clicked, the dialog pops up and allows the user to enter an e-mail. That's all good. Now, when the button is clicked subsequently the dialog pops up again as expected with an empty textbox allowing the user to send to a different e-mail address. This looks fine.
However, when OK is pressed it has actually sent an e-mail to the previously entered e-mail. The previous value of the textbox is not being overwriten by the new value.
Even if I do the following: $('#SendToemail').val('') after sending the e-mail, or before sending the e-mail a second time, it does not work because when you enter a value in the textbox the second time it will now remember the previous value as just "" (empty string).
I don't understand why it is insisting on using the previous value. If I refresh the page then it's OK the first time, but the second time the same problem will occur.
What I have tried:
As also hinted in the code as comments, I have tried to clear the textbox before the dialog is opened, and I have also tried various ways to destroy the dialog upon closing the dialog. Without luck.
I'm suspecting it has something to do with the way the hidden div is used to show the textbox. The code is not mine I'm just trying to debug it to fix the error.
I am using jQuery UI Dialog on the homepage with auto open set to true so it displays the popup as soon as the user comes to the website. here the development site
http://dev.startingpointnh.org/
As you can see the dialog box work perfectly but I just want to show it only once. Currently every time the user comes back to the homepage or reloads the page, the popup displays again.
I am wondering if there is way to display it one time once the close this message button or esc key is pressed like this site does
http://www.janedoe.org/
Any advise is appreciated.
Thanks
Store that information in your cookies. Check out some more details here.
Basically, add a variable that is stored as true when the user exits the dialog at the close function. Then store the variable:
document.cookie = "hasSeen: true"
Then on the page load, read the cookie:
var hasSeen = document.cookie
And set your autoOpen variable to that cookie:
if(hasSeen) {
$("#openDialog").dialog({
autoOpen: false
});
}
That'll do it!
Thanks Guys appreciate it. I have added a cookie like below and works perfectly when close this message button is clicked. but its still shows when the esc key or the x button at the top is clicked. How to reference these two also
<script type="text/javascript">
jQuery(document).ready(function(){
if( document.cookie.indexOf( "showOnce" ) < 0 ) {
jQuery('#dialog').dialog({
modal: true,
width: 740,
resizable: true,
buttons: {
"Close This Message": function() {
jQuery( this ).dialog( "close" );
document.cookie = "showOnce=true;";
}
}
});
}
});
In a web application that I am working on I have partial view that I display on a "details" page via a JqueryUI Dialog box. I am trying to add a JqueryUI tooltip for the close button, in the top right corner of the header, that comes stock with the dialog box. Below I have some of my code. I know the scripts will work from the location they are at currently in this web application due to my second function below. '.ui-dialog-titlebar-close' is the class that is applied to the close button in the dialog header (based off chrome firebug). The closest answer I've found to the solution was here https://forum.jquery.com/topic/tooltip-in-a-dialog-pop-up-without-hovering
Found this question similar to mine...
How to change the 'X' button in a jquery dialog box to read 'Close'
...any way I could manipulate the close button achieve what I asked like this? For example a ".addTitle()"?? About to tinker with this idea.
Any and all help or information is appreciated.
<script>
$(function() {
$('.ui-dialog-titlebar-close').tooltip({
content: function () {
return "test";
}
});
});
$(function () {
$('#testThing').tooltip();
});
</script>
With many thanks,
Rock
I would try using the create event on your dialog:
$("yourSelector").dialog({
create: function(){$(".ui-dialog-titlebar-close").attr("title","Your text goes here");}
});
This can be fixed by editing line which has
.addClass("ui-dialog-titlebar-close ui-corner-all")
in 'jquery.ui.dialog.js' or ('jquery.ui.all.js') page, It currently reads
.attr('role', 'button')
simply change it to
.attr({'role': 'button', 'title': "close (Esc)")
this will solve the issue
I think the easiest solution is to update the options configuration of jQuery UI dialog. Like:
$("#dialogConfirm").dialog({
autoOpen : false,
modal : true,
resizable : false,
dialogClass : "confirm-dialog",
closeText : "Click to Close the dialog" // Here is the Gem
});
I have just started working in jQuery and ASP.NET MVC. I want the same modal form mentioned in the example of JQuery site - http://jqueryui.com/demos/dialog/#modal-form
$("#divSchedule").dialog({
autoOpen: false,
show: "slide",
modal: true
});
$("#btn").click(function () {
$("#divSchedule").dialog("open");
return false;
});
Dialog appears on the page but user can click on any of the background controls. Can you please suggest something to disable(blur) the background? Is it something to do with CSS?
Basically you made a mess of your dialog definition, try this http://jsfiddle.net/tctc2/1/
The quick answer for his question is:
use modal: true in order to
make background darker
disable any interaction with background functionality
I am having quite a hard time trying to find some answers with this particular dialog box action. The problem is when the user presses the "enter" (keyCode = 13) button, the dialog closes...as if the 'esc' key was pressed. I want to keep the dialog box open even when "enter" is pressed.
Fairly simple code, simple dialog box from jquery (1.2.6).
I have an ajax request populating the dialog box
var div = $("`<div>`testing`</div>`");
$.ajax({
type :"GET",
dataType : "html",
cache : false,
async : false,
url : WorldWideInventory.baseURL+"/templates/invoice_invoicenumber_confirm.tpl.html",
error : function(){ alert("Failed to Connect to Server, Please try Again");},
success : function(response){
div.html(response);
}
});
div.appendTo("#APO_Wrapper").dialog({
width:662,
height:407,
closeOnEscape: true,
bgiframe: true,
modal: true,
title: "Confirm Invoice Number",
beforeClose: function(){return false;},
close: function(){return false;}
});
Thats it...this is driving crazy, anyone have any suggestions/answers to this problem? Good karma will be sent your way!!
The problem you're experiencing is because the close link is being given focus when the dialog is activated, so when the user hits enter it's effectively calling the close dialog command.
Try giving focus to another clickable element (such as a button, link, form element, etc) when the dialog is opened using the open event on the dialog, similar to:
div.appendTo("#APO_Wrapper").dialog({
width:662,
height:407,
closeOnEscape: true,
bgiframe: true,
modal: true,
title: "Confirm Invoice Number",
open: function(event, ui){ $("#someOtherSelector").focus(); }
});
See how you go with that. This doesn't happen with the current version of jQuery and jQuery UI though, so if you can update, I'd recommend that.