I am not sure what I am doing wrong. The dialog box comes but it does not follow any of the settings I specified.
function voteToday(id,userid){
$(".pleaseLogin").dialog({
autoOpen:false,
bgiframe: true,
resizable: false,
width:200,
height:75,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
}
});
$(".pleaseLogin").dialog('open');
}
You generate two different dialogs, one doesn't open but has options, one does open but has no options.
If you give more information where you got this dialog from, I could answer how to fix it.
EDIT
I was wrong, but found out that this code works fine. The only option that doesn't seem to work is autoOpen: false, but you open the box after you give that option.
function voteToday(id,userid){
$(".pleaseLogin").dialog('open');
}
$(document).ready(function(){
$(".pleaseLogin").dialog({
autoOpen: false,
bgiframe: true,
resizable: false,
width:500,
height:75,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
}
});
$('.something').click(voteToday);
});
why not use the autoOpen: true setting? seems like the problem stems from calling .dialog() twice. You'll want to create the dialog when the DOM is ready, and then simply call the open method on it within your voteToday function.
Related
My page has two jquery dialogs. There is no issue if both open in different time. The issue only comes when two dialog opens together. In my case first dialog opens by user action and second dialog open by system(this dialog will trigger when session timeout happened). Now first open by user and immediately second dialog opened now I need restrict user to click anything on dialog 1. Basically we should restrict user to do any action dialog one.
I tried with resizable: false, draggable: false But these not helped. Is there any way to fix this issue.
Dialog 1
$('.status-dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
closeOnEscape: false,
buttons: [{
text: yes,
click: fun1
},
{
text: no,
click: fun2
}]
});
Dialog 2
$('body').append('<div title="Timeout" id="timeout-dialog">' expired </div>');
$('#sessionTimeout-dialog').dialog({
autoOpen: false,
resizable: false,
draggable: false,
width: 400,
modal: true,
closeOnEscape: false,
open: function () { $(".ui-dialog").hide(); },
buttons: {
"Continue": function () {
$(this).dialog('close');
}
}
});
Maybe have your code to close all other dialogs right before the system triggers one for itself? You can certainly add this condition somewhere between your codes where the dialog will be triggered system-wise.
I am trying the tagsinput plugin to work in a textarea which is inside a div that is loaded by the jquery dialog plugin call.
Plugin used is the /xoxco/jQuery-Tags-Input.
I did an initial check if the textarea element is ready. It is while before being called.
The textarea doesn't get displayed as tags by the tagsinput plugin. However when I try the same from firebug in the browser:
$('#textarea').importTags('guava','cherry'); // this works
Code below:
jsp file:
<div id="mydialog">
<textarea name="tags" id="textareaId">
</div>
javascript file:
$(document).ready(function(){
$("#mydialog").dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"YES": function() {
$(this).dialog("close");
}
}
});
$('#textarea').tagsInput({
'autocomplete_url': '',
'autocomplete': {
source: ['apple','banana'],
autofill:true
},
'height':'100px',
'width':'300px',
'interactive':true,
'defaultText':'add a tag',
});
$('#textarea').importTags('guava','cherry');
});
Any help why?
$('#textarea') was not yet ready in the document before the tagsinput was called. I delayed my invocation for tagsinput and it worked Ok.
I want to disable some buttons (with some additional conditions) on jquery dialog show and I am unable to do this. I tried many different ways and none of them worked. I am out of ideas.
Example code attached (in coffeescript):
$('#messages').dialog({
height: 500,
width: 800,
resizable: false,
modal: true,
show: 'fade',
hide: 'clip',
buttons: [
{
id: "msg-close",
text: "Close",
click: ->
$('#msg-close').prop('disabled', true) //this one works
}
],
open: ->
$('#msg-close').prop('disabled', true) //this one doesnt work
});
$('#msg-close').prop('disabled', true) //this one doesnt work
open expects a function like this
open: function () {
$('#msg-close').prop('disabled', true);
}
I have a site in which there are alot of confirm pages and need for a dialog window. Im am wondering if there is a better way to write my code so that i dont have to spell out all of the dialog parameters every single time. Each dialog may have 1 thing different. usually the complete button is different function.
for example:
$('#dialogA').dialog(
{
autoOpen:false,
width: 800,
modal: true,
resizable: false,
closeOnEscape: false,
buttons:
{
"Complete": function()
{
//DO SOMETHING FOR A(possible print results of something)
}
}
});
and another
$('#dialogB').dialog(
{
autoOpen:false,
width: 800,
modal: true,
resizable: false,
closeOnEscape: false,
buttons:
{
"Complete": function()
{
//DO SOMETHING FOR B (possibly some ajax call)
}
}
});
so the only thing that changes is what the Complete button does. in laymen's terms i guess is I want to set a variable the contains all the dialog parameters....
Extend jQuery:
(function ($) {
$.fn.extend({
confirmDialog: function (options) {
var defaults = {
autoOpen:false,
width: 800,
modal: true,
resizable: false,
closeOnEscape: false,
buttons:
};
var options = $.extend(defaults, options);
$(this).dialog(options);
}
}
})(jQuery);
and call it like this:
$('#dialogB').dialog({Complete: function() { … }; });
You can also override the defaults when call the dialog...
Am I able to include as an include, an external jquery.dialog.js file that consists of the following?
$(document).ready(function(){
$(function() {
location.hash = 'PAGETOP';
});
$("#dialogou").dialog({
autoOpen: false,
closeOnEscape: false,
resizable: false,
modal: true,
draggable: true,
position: ["center", 100],
buttons: {
'Ok': function() {
$(this).dialog("close");
closeReq();
}
}
});
});
and then pass this in using the script include notation:
<script type="text/javascript" src="../jquery.dialog.js"></script>
This doesn't seem to work for me.
as long as you include the jQuery's .js file before this dialog one, it should work
I believe $(document).ready(function(){}); and $(function() {}); (a short-hand version) are equivalent, so you should simplify it to just:
$(document).ready(function(){
location.hash = 'PAGETOP';
$("#dialogou").dialog({
autoOpen: false,
closeOnEscape: false,
resizable: false,
modal: true,
draggable: true,
position: ["center", 100],
buttons: {
'Ok': function() {
$(this).dialog("close");
closeReq();
}
}
});
});
Also, install Firebug so you can see what's being included and from where. It will tell you if you are including your script wrong (probably a 404).