JQuery Dialog() can't open again after close - javascript

Following code is a pretty simple and complete JQuery Dialog. Everything works.
Problem is as mentioned at the title in js1.js: (see its comment)
It always try to load the page by calling horsedlgcontainer.load('page2.html'); never hits the else horsedlg.dialog('open'); statement.
Any idea please? Thank you very much!
page1.html ...
<!DOCTYPE html>
<head>
<link href="Site.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.8.21.custom.css" rel="Stylesheet" type="text/css" />
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<script src="js1.js" type="text/javascript"></script>
</head>
<body>
<div id="horse-link">
[<a id="horse-link-show-dialog">Click Me</a>]
</div>
<div id="horse-link-dialog-container"></div>
</body>
page2.html ...
<script src="js2.js" type="text/javascript"></script>
<div id="horse-dialog" title="Horse!">
Q: When is a horse not a horse?<br />
A: It depends, when a white horse is not a horse.<br />
</div>
js1.js ...
$(document).ready(function () {
var horselnk = $('#horse-link'),
horsedlg = $('#horse-dialog'),
horsedlgcontainer = $('#horse-link-dialog-container'),
showdlgbtn = $('#horse-link-show-dialog');
$.ajaxSetup({ cache: false });
showdlgbtn.click(showHorseDialog);
function showHorseDialog() {
if (horsedlg.length==0)
horsedlgcontainer.load('page2.html');
else //to improve performance, open it again, don't load the same page
horsedlg.dialog('open'); //Why never come here?!?
}
});
js2.js ...
$(document).ready(function () {
var horsedlg = $('#horse-dialog'),
horselnk = $('#horse-link');
horsedlg.dialog({
modal: true, autoOpen: true, resizable: false,
height: 500, width: 350, closeOnEscape: true,
show: {effect:'puff',percent:150,duration:250},
hide: {effect:'puff',percent:110,duration:250}
});
});

You're only evaluating horsedlg = $('#horse-dialog') once, and it's before the content is loaded, so its .length property is always zero.
I suspect you'll also run into problems with loading a secondary JS file when you load the dialog content. A single JS file would be cleaner:
$(document).ready(function () {
var options = {
modal: true, autoOpen: true, resizable: false,
height: 500, width: 350, closeOnEscape: true,
show: {effect:'puff',percent:150,duration:250},
hide: {effect:'puff',percent:110,duration:250}
};
var loaded = $.Deferred();
$('#horse-link-show-dialog').on('click', function() {
var state = loaded.state();
if (state === 'resolved') {
$('#horse-dialog').dialog('open');
} else if (state === 'pending') {
// do nothing
} else {
$('#horse-link-dialog-container').load('page2.html')
.fail(loaded.reject);
.done(function() {
$('#horse-dialog').dialog(options);
loaded.resolve();
});
});
}
});
});
This uses a jQuery deferred object to indicate whether the dialog box has finished loading or not.
NB: code untested - jsfiddle isn't good for testing AJAX.

As metnioned by #Alnitak the issue is you are trying to search for #horse-dialog even before the element is available in the dom..in your case it will be available after the page2.html load.
Tweak your code to as below and you can do away with js2.js:
$(document).ready(function () {
var horsedlgOptions = {
modal: true, autoOpen: true, resizable: false,
height: 500, width: 350, closeOnEscape: true,
show: {effect:'puff',percent:150,duration:250},
hide: {effect:'puff',percent:110,duration:250}
};
var horselnk = $('#horse-link'),
horsedlg = $('#horse-dialog'),
horsedlgcontainer = $('#horse-link-dialog-container'),
showdlgbtn = $('#horse-link-show-dialog');
$.ajaxSetup({ cache: false });
showdlgbtn.click(showHorseDialog);
function showHorseDialog() {
if (horsedlg.length==0)
horsedlgcontainer.load('page2.html');
horsedlg = horsedlgcontainer.find("#horse-dialog");
horsedlg.dialog(horsedlgOptions);
else //to improve performance, open it again, don't load the same page
horsedlg.dialog('open');
}
});

The variable horsedlg is locally defined within the first $(document).ready function - so when that code is executed horsedlg.length equals 0 as the DOM element with the id of horse-dialog isnt present on the page.
You cannot change that locally defined variable - so the length always equals 0.
You could do this instead :
function showHorseDialog() {
var horsedlg = $('#horse-dialog');
if (horsedlg.length == 0) {
horsedlgcontainer.load('page2.html');
} else { //to improve performance, open it again, don't load the same page
horsedlg.dialog('open'); //Why never come here?!?
}
}

Related

Undefiend functions after slider initialization bxslider

I have a problem with BxSlider. After initialization I tried to call default methods from BxSlider, but in console I'm getting error "TypeError: mainSlider.reloadSlider is not a function". Also with console.dir I'm not getting default methods from object, just jQuery methods. Any Help?
$(document).ready(function(){
var singleSlide = $('.bxslider li').length == 1;
var sliderSpeed = $('.bxslider').data('speed')?$('.bxslider').data('speed'): 5000;
//bx-slider function
mainSlider = $('.bxslider').bxSlider({
auto: !singleSlide,
touchEnabled: true,
pause: sliderSpeed,
adaptiveHeight: true,
onSliderLoad: function(){
$('.bxslider').css("visibility", "visible");
resizeHomeSlider();
}
});
mainSlider.reloadSlider();
}
Changes:
Added var to mainSlider to keep it in local scope not global
auto is a Boolean
- pause is an Interger (Took a second look, and I see that's ok.)
Define resizeHomeSlider outside the bxSlider scope then callback from within the bxSlider scope.
This is of course untested since not every detail was provided.
$(document).ready(function() {
var singleSlide = $('.bxslider li').length;
var sliderSpeed = $('.bxslider').data('speed') ? $('.bxslider').data('speed') : 5000;
//bx-slider function
var mainSlider = $('.bxslider').bxSlider({ // Include a var so mainSlider is not global
auto: true, //------auto is a Boolean (true/false, 0/1...)[it operates on it's own.]
touchEnabled: true,
pause: sliderSpeed,
adaptiveHeight: true,
onSliderLoad: resizeHomeSlider
});
// Define the function outside of bxSlder block
resizeHomeSlider(idx) {
// It doesn't matter if you use idx, but you should have it declared.
$('.bxslider').css("visibility", "visible");
// Do resizing magic...
}
mainSlider.reloadSlider();
});
<link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<ul class="bxslider" data-speed='5000'>
<li></li>

jQuery UI Modal Dialog Closes Immediately on JSP

We are opening a simple jQuery UI dialog from a JSP.
We see it for a split second, and it closes immediately. The dialog needs to stay open.
JSP code:
<%# taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
function openPopUp() {
alert('OpenPopUp() called');
$("#dialog-1").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
maxHeight: 300,
});
}
});
}
</script>
Down below in the JSP, the Div and then the button that opens the popup:
<html:html>
<div id="dialog-1" title="Dialog Title goes here..." style="display: none;">This my first jQuery UI Dialog!</div>
...
<button id="disregard_1" onclick="openPopUp();">Open Dialog</button>
</html:html>
Your initialization should be separate imo.
Check the API/examples on jQuery UI and more in detail the modal form.
// init
var dialog = $('#selector').dialog({/*your options*/});
// bind event
$('#event-trigger').click(function(){
dialog.dialog('open');
});
To wrap this up in your situation:
// dom ready
$(function(){
var myPopup = $('#dialog-1');
// custom function
function openPopUp() {
alert('OpenPopUp() called');
myPopup.dialog('open');
}
// init
myPopup.dialog({
autoOpen: false, // prevent it from opening by default
width: 600,
height: 400,
open: function(event, ui){
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
maxHeight: 300,
});
}
});
});
I hope you see the difference between initializing onClick and calling something that has been initialized already.

Updating child (Popup or Lighbox) and parent window events for session timeout

I want to implement the "sessionTimeout" functionality, so the even if the User has open a secondary window or a lightbox the user should get the SessionTimeout popup and according to user's response, both Parenta nd child window should get the SessionTimeout event notification:
I am using sessionTimeOut Plugin from "https://github.com/ehynds/jquery-idle-timeout" and implemented on the Main page (Parent window) from where both Lightbox and Popup opens, Its working fine on the "Main" page. But even if I am working on the Lightbox or Popup window, the main window session expires.
Can you please suggest what should I do so even if I am working on child window the sessionTimeout should not prompt and if not working for sometime the prompt should appear on child window and should close the child window and logoff the Parent window.
Please find the code mentioned below:
Code for Session Expiry Msg:
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="~/Scripts/js/jquery.idletimeout.js"></script>
<script src="~/Scripts/js/jquery.idletimer.js"></script>
<body>
<div id="dialog" title="Your session is about to expire!">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 50px 0;"></span>You will be logged off in <span id="dialog-countdown" style="font-weight: bold"></span>seconds.</p>
<p>Do you want to continue your session?</p>
</div>
</body>
<script type="text/javascript">
// setup the dialog
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 400,
height: 200,
closeOnEscape: false,
draggable: false,
resizable: false,
buttons: {
'Yes, Keep Working': function() {
$(this).dialog('close');
},
'No, Logoff': function() {
// fire whatever the configured onTimeout callback is.
// using .call(this) keeps the default behavior of "this" being the warning
// element (the dialog in this case) inside the callback.
$.idleTimeout.options.onTimeout.call(this);
}
}
});
// cache a reference to the countdown element so we don't have to query the DOM for it on each ping.
var $countdown = $("#dialog-countdown");
// start the idle timer plugin
$.idleTimeout('#dialog', 'div.ui-dialog-buttonpane button:first', {
idleAfter: 600,
pollingInterval: 2,
serverResponseEquals: 'OK',
onTimeout: function() {
window.location = "/Home/Index/";
},
onIdle: function() {
$(this).dialog("open");
},
onCountdown: function(counter) {
$countdown.html(counter); // update the counter
}
});
</script>
Popup Window Code:
function basicPopup(url) {
var popupWindow = window.open(url, 'popUpWindow', 'height=800,width=1350,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no, status=yes');
}
Code for Lightbox:
//Lightbox Function
$(document).ready(function () {
$(".various").fancybox({
maxWidth: 1000,
maxHeight: 800,
fitToView: false,
width: '80%',
height: '80%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
});
});
Let me know if you need any other detail.
Please suggest

jQuery UI dialog issue

I'm trying to create jquery dialog, but there is no use :(
here is my jQuery code:
$(document).ready(function() {
createDialog();
});
function createDialog() {
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-form").dialog(
{
autoOpen : false,
height : 475,
width : 350,
modal : true,
buttons : {
"submit" : function() {
var bValid = true;
allFields.removeClass("ui-state-error");
postText();
$(this).dialog("close");
}
},
cancel : function() {
$(this).dialog("close");
}
},
close : function() {
allFields.val("").removeClass("ui-state-error");
}
});
$(".add-org").click(function() {
$("#dialog-form").dialog("open");
});
}
here is html code:
<link href="<c:url value="/resources/styles/jquery-ui-1.8.21.custom.css"/>"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-1.7.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-ui-1.8.21.custom.min.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/myScript.js'/>"></script>
New
<div id="dialog-form" title="Add New ">
<p class="validateTips">All form fields are required.</p>
<form>
..................
</form>
</div>
and firebug says:
TypeError: $("#dialog:ui-dialog").dialog is not a function
$("#dialog:ui-dialog").dialog("destroy");
and on my page I see all the fields from the form.
so what is my problem?
Try this: Working demo http://jsfiddle.net/kEZkh/
Not sure if your source path are correct please include following scripts.
rest please feel free to play around with demo & hope it helps the cause :)
scripts
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
code
$("#forgot").click(function(e){
$("#dialog-form").dialog("open");
e.preventDefault();
});
$("#dialog-form").dialog({
modal: true,
autoOpen: false,
height: 255,
width: 300,
buttons: {
"Retrieve": function() {
document.forms["forgotform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
​
Check in Firebug/DevTools if the script file was loaded successfully. If it is, type this into the console (Firebug, DevTools) or better, put that line where your other code is executed:
console.debug(jQuery.ui)
If it shows undefined, then jQuery UI was not loaded (yet). Check if your code runs before everything was loaded, put it inside jQuery's $(document).ready();. If it is an object, inspect it and check for the dialog property.
If you configured a custom build on jqueryui.com, doublecheck if you included the dialog widget.
The destroy call should be on the same element as you already used when you created the dialog, not the .ui-dialog container that gets wrapped around your content:
$("#dialog-form").dialog('destroy');
Since your current code is throwing an exception, the subsequent lines which are supposed to create the dialog never get called.
If you want to destroy every dialog that might already be open, jQuery UI handily puts a .ui-dialog-content class on each content div:
$('.ui-dialog-content').dialog('destroy');

jquery dialog popup window problem

I added this code in my PopUpWindow.js File.. in my scripts folder
var window = "<div id='window' style='display: none;width:190px'></div>";
PopUpWindow = function (titles, message, redirectURL) {
document.getElementById('window').innerHTML = message;
$("#window").dialog({
resizable: true,
height: 180,
title: titles,
width: 500,
modal: false,
open: function () {
$('.ui-widget-overlay').show();
$('.ui-dialog-titlebar-close.ui-corner-all').hide();
},
buttons: {
"OK": function () {
$(this).dialog("close");
if (redirectURL) {
window.location = redirectURL;
}
}
}
});
};
I have Included this js file in Site.Master page.
But still i am not able to access this PopUpWindow function in any of my aspx page?
is that I am doing something worng?
I am not able to execte this PopUpWindow for showing the Popup Message
PopUpWindow("Field to Show","Message","URL redirect");
Thanks
Although "window" is being held in a variable, it is not added to the page anywhere before you try to get it by id.
var window = "<div id='window' style='display: none;width:190px'></div>";
PopUpWindow = function (titles, message, redirectURL) {
// Add to body (change the selector to whatever's relevant)
$('body').append( window );
// Set the innerHTML the jQuery way :)
$('#window').html( message );
$("#window").dialog({
resizable: true,
height: 180,
title: titles,
width: 500,
modal: false,
open: function () {
$('.ui-widget-overlay').show();
$('.ui-dialog-titlebar-close.ui-corner-all').hide();
},
buttons: {
"OK": function () {
$(this).dialog("close");
if (redirectURL) {
window.location = redirectURL;
}
}
}
});
};
I've only tested this on JSFiddle, and the CSS isn't there, so I can't guarantee there's not more wrong, but this does make a dialog appear if you change display to "block" on `#window'
It would seem that either you are loading this file wrong (bad url) or something else is going on. Could you check and let us know? It could even be a syntax error.
EDIT:
Did you forget to append window to your DOM?
var window2 = "<div id='window' style='display: none;width:190px'></div>";
$(window2).appendTo("body")

Categories

Resources