I have a dialog box that is supposed to pop up if the user is not logged in, and presses the "vote up" link on this page: http://www.problemio.com
I have some JavaScript here: problemio.com/js/problemio.js and I declare that popup in the global variables like this:
var $dialog = $('#loginpopup')
.dialog({
autoOpen: false,
title: 'Login Dialog'
});
var $problemId = $('#theProblemId', '#loginpopup');
$("#newprofile").click(function ()
{
$("#login_div").hide();
$("#newprofileform").show();
});
but not exactly sure if the #newprofile code is right, or how to make it global, or whether it can't be global. This confusion stems from me being kind of new at this.
The JavaScript console in Chrome does not show any errors relevant to this, which is even more confusing.
Any ideas on what I might be doing wrong?
Thanks!!
Try using
$("#loginpopup").dialog();
A call to
$(foo).dialog()
will initialize a dialog instance and will auto-open the dialog by
default. If you want to reuse a dialog, the easiest way is to disable
the "auto-open" option with:
$(foo).dialog({ autoOpen: false })
and open it with
$(foo).dialog('open')
. To close it, use
$(foo).dialog('close')
jQuery UI Dialog
I'm a bit confused, not sure if your question is complete. However, you have autoOpen: false set on the dialog, so you have to manually open it with:
$("#loginpopup").dialog("open");
in your "vote up" click handler.
Related
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;";
}
}
});
}
});
I am creating a system for hotel management that manages guests and checkins.
I am having trouble with the response time of my modals.
I have a cancel button inside the modal which closes the modal BUT DOESN'T reload the page. Here's what I got in the cancel button:
$("#cancel").click(function(event) {
event.preventDefault();
jQuery(".ui-dialog").dialog().dialog('close');
jQuery(".ui-widget-overlay").dialog().dialog('close');
});
Here's the problem:
When the modal appears (by clicking another button), I click cancel and the code above is to be executed. I did this numerous times (Open modal and cancel) and the page became unresponsive. You have to wait minutes before it closes the modal after doing it for over 5 times. You can't even close the tab of the browser.
Any ideas would be very much welcome. Thank you.
PS.
I uploaded the system to the web for you to see.
http://greenenergiesllc.com/temp
Login: joel
Password: 1234
PHP file that creates some of my modals: https://www.dropbox.com/s/azi51w0pzp69kgh/checkin.php
Code snippet on how I create a modal:
jQuery( "#ex4").dialog({
height: 'auto',
width: 450,
modal: true,
closeOnEscape: false,
open: function(event, ui) {
jQuery(this).parent().children().children('.ui-dialog-titlebar-close').hide();
}, position: ["center", 100],
resizable: false
});
EDIT:
This is what I've done so far. I solved the DOM problem of creating too many objects by adding .remove after the close call.
$("#cancel").click(function(event) {
event.preventDefault();
jQuery(".ui-dialog").dialog().dialog('close').remove();
jQuery(".ui-widget-overlay").dialog().dialog('close').remove;
});
However, after closing the modal for the first time, it won't open for the second time and I got this error.
--> UPDATE: Using remove won't bring the modal back when called. I am completely confused now what to do. I need to remove those DOM elements when called by using .remove() but I need to bring them back when called.
Uncaught TypeError: Cannot call method '_focusTabbable' of undefined
Dont need to use like that way. Try
$(".ui-dialog").dialog( "close" );
$("#cancel").click(function(event) {
event.preventDefault();
$(".ui-dialog").dialog( "close" );
$(".ui-widget-overlay").dialog('close');
});
It's not appear to be a problem with the close function.
When you click on link, the modal appears. In this moment, you create one modal in the DOM. See:
If you click many times, you have created many others modals in the DOM. See:
The problem is in your function that trigger this modal. With many HTML in your DOM, more slower the "close" function will be.
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)
I have an ASP.net page with a link to open a jquery-based modal window (that uses colobox jquery plugin). The content of that window in loaded from another aspx file (it loads an iframe). I want to close that window when the user presses an asp:button and if some condition in my code-behind went well.
I tried many ways to close that window from code-behind like these ways:
Page.RegisterStartupScript("X", #"$(this).dialog('close');");
Page.RegisterStartupScript("X", #"var win = window.open('','_self'); win.close();");
btnDone.Attributes.Add("onclick", #"var win = window.open('','_self'); win.close();");
btnDone.Attributes.Add("onclick", #"window.open('../px/nsk.aspx', '_self', null); window.close(); ");
System.Web.HttpContext.Current.Response.Write("<SCRIPT LANGUAGE='JavaScript'>");
System.Web.HttpContext.Current.Response.Write("self.close();");
System.Web.HttpContext.Current.Response.Write("</SCRIPT>");
but non of them can close that modal window. I'm testing on latest version of firefox.
the code behind can be supposed as sth like this:
// do some database works
if (condition)
{
// close this modal window
}
I also tried methods from jquery but none of them were a success.
Can you please telling me how can I close this window?
The other answers given provide specifics; this 'answer' attempts to be more conceptual/consultative.
Closing the Window
Closing the colorbox window is done on the client side. Both #KennyZ and #Farshid provide details on how to do this. By default, ColorBox is going to close on the press of ESC or its EXIT ui element (if used.) It's also possible to close the box programmatically, which sounds like what you need to do.
Where is the Close Action Invoked?
#KennyZ proposes an Ajax call to determine if "some condition in my code-behind went well"; that presumes you cannot tolerate a full page refresh (which seems reasonable to me) but it's something for you to decide.
If the determination of "went well" can only be done on the server, then you're looking at Ajax or a full page refresh.
Alternatively, if there is a way to make the determination on the client side, you won't need to reach back to the back end at all. Just close the colorbox window using js.
If you can provide more details about what the action is that controls closing/not closing the ColorBox window, maybe the community can help even more.
The problem seams to be solved this way:
Page.ClientScript.RegisterStartupScript(GetType(),
"CloseKey", "parent.$.colorbox.close();", true);
Use jQuery dialog with a div instead of an iframe.
Then you can use an Ajax post to run the serverside code and look at the results to decide what to do with the dialog.
Declare the dialog:
$(document).ready(function () {
jQuery("#MyDialog").dialog(
{
bgiframe: true,
autoOpen: false,
modal: true,
width: 800,
position: ['center', 100]
}
);
});
Populate the dialog and open it:
$('#OpenMyDialog').click(function () {
$.post($('url_for_dialog_contents'), function (data) {
$("#MyDialog").empty();
$("#MyDialog").append(data);
}, null, "html");
$('#MyDialog').dialog('open');
return false;
});
Submit the dialog:
$('#SubmitMyDialog').click(function () {
$.post($('url_for_dialog_action'), function (data) {
if (data.success == true) { $('#MyDialog').dialog('close'); }
}, null, "json");
});
I'm sure you'll need a lot more code in the submit dialog, but this is the general idea.
I am trying to get a modal loading dialog to pop up while I make an ajax call but it is not showing up in the onClick function. If I slow it down with firebug and step through the loading panel will show up. Is this just javascript running ahead of itself? Is there a better way to do this?
$(function(){
$("#loading_panel").dialog({
modal:true,
position:'center',
minHeight:40
});
$("a.view-in-frame").click(function(){
$("#loading_panel").dialog('open');
$("#tabs").hide();
var blog = $(document.createElement('div')).attr('id', 'blog').load(('blog_reader.php?blog='+this.href)), $("#loading_panel").dialog('close'));
$("#content_wrap").append(blog);
return false;
});
})
Just an idea, try setting the 'autoOpen' to false when creating the dialog:
$("#loading_panel").dialog({
modal:true,
position:'center',
minHeight:40,
autoOpen:false
});
At the moment you are telling the dialog to open when it is created. This should prevent that behaviour.
#ErsatzRyan
Have you tried set your javascript function to load after your document is ready?
Like this:
$(document).ready(function(){
//Your functions
});
And as #Nat Ryall said, you must set your autoOpen to false, otherwise your dialog won't open twice.
And another thing, try to call your $(".selector").dialog("open") after you done everything. You're telling your function to call your dialog before it has loaded it's content.