IE7, JQuery UI Dialog - javascript

I'm using JQuery UI Dialog. In this form, I validate something.I call this function;
MessageBox('this is message', 'Error', OpenDialog());
In Chrome, Firefox,IE8,IE9; It works correctly but in IE7, only dialog's header shows like this. When I click 'Okey' button, It only shows header
How to solve this?
MessageBox function
function MessageBox(text, title,Func) {
var dv = document.createElement('div');
$(function () {
dv.id = 'Dialog';
dv.innerHTML = '<table style="font-family:Calibri;"><tr><td>' + text + '</td></tr></table>';
document.forms[0].appendChild(dv);
var dlg = $('#Dialog').dialog({
autoOpen: false,
width: 400,
title: title,
modal: true,
resizable: false,
buttons: [
{
text: "Okey",
width: 80,
click: function () {
DialogClose_('Dialog');
}
}],
open: function () {
$('.ui-dialog-buttonpane').find('button:contains("Okey")').addClass('ButtonDefault');
},
close: Func,
beforeClose: function () {
var dv2 = document.getElementById("Dialog");
dv2.parentNode.removeChild(dv2);
}
});
dlg.parent().appendTo(jQuery('form:first'));
$('#Dialog').dialog("option", "minWidth", 400);
$('#Dialog').dialog('option', 'position', 'center');
$('#Dialog').dialog('open');
});
return;
}
OpenDialog function like this;
function OpenDialog() {
$(document).ready(function () {
$("#dialog").dialog("open");
});
}

Having a look around there seems to be quite a few issues with the height on dialog boxes in IE7.
You could try specifying a height, but that would take away the nice auto-height feature you get.
Alternatively you could just set the height of the browser just after where you set the "dlg" variable is IE7:
if ($.browser.msie && parseInt($.browser.version, 10) == 7) {
$('#Dialog').dialog("option", "height", 100);
}
You can replace the "100" with what you think. If you have a container element in your dialog box you can always use that to set the height, eg:
$("#container").height();
There is also more suggestions on StackOverflow.
Hope that helps.

Related

How to get jquery dialog box to close after one click

My dialog box only closes after two clicks and not one. I am not sure why it won't close on the first button click. Does the dialog box need to be hidden? I tried dialog.dialog.hide(); as well right after close, but that gives me no luck. This is what I have for my dialog.
var dialog = $('<p>Cannot post. </p>').dialog({
height: 150,
width: 300,
buttons: {
"Ok": function(event) {
event.preventDefault();
dialog.dialog('close');
$(this).display = 'none';
}
}
});
Consider the following: https://jsfiddle.net/Twisty/eo4z5gaj/
JavaScript
$(function() {
var dialog = $('<p>Cannot post. </p>').dialog({
height: 150,
width: 300,
buttons: {
"Ok": function(event) {
$(this).dialog('close');
}
}
});
});
It's better to refernce $(this) for .dialog(). Essentially they are the same.
If this code is still requiring two clicks of "Ok", then you should look at your browser or console. Code above works with single click in FireFox.
You may also consider: https://jsfiddle.net/Twisty/eo4z5gaj/8/
JavaScript
$(function() {
var dialog = $('<div>', {
title: "Error"
}).html("<p>Cannot Post.</p>").dialog({
height: 160,
width: 300,
buttons: {
"Ok": function(event) {
$(this).dialog('close');
}
}
});
});
Hope that helps.

How to display a dialog box once returning null to onbeforeunload?

I am returning nothing to window.onbeforeunload which results in the default pop-up box not displaying.
Like so:
window.onbeforeunload = function() {
return;
}
Brilliant.
Now my issue is, I want to call another function which displays a custom dialog box as such:
window.onbeforeunload = function() {
dialogBox() // function that generates a custom dialog box.
return;
}
I positioned the function above the return. This displays the dialog box momentarily and continues with the refresh. How can I pause the refresh completely when the dialog box is displayed?
Thank you all for your time.
Edit: My Dialog box does not return anything.
Here's the code for that:
function dialogBox(){
$( "#dialog" ).dialog({
modal: true,
width: 500,
buttons: {
"Save": function() {
},
Cancel: function() {
$(this).dialog("close");
},
"Close": function() {
window.location.href = document.referrer;
}
}
})
}

Clicking on element from jQuery dialog generated by function

I am having a rather strange issue with jQuery/Javascript. (This happens in IE, FF and Chrome)
I have a (asp.net) webpage as follows:
Header with lots of buttons (generated at PreRender)
Hidden div with buttons doing postbacks (generated OnLoad) & a div to use as a dialog
Page with an iFrame
Lets say I have a Button with '1234_stuff' as its CLIENTID in the Hidden div.
I have a button in the Header that has a OnClientClick = "$('#1234_stuff').click();return false;";
When I click the button that is in the header this works perfectly. Good.
I have an other button in the header (lets call it PopupStarter) that has a OnClientClick = "Popup('Titel', 'Description', '1234_stuff');return false;";
The javascript Popup function is as follows:
function Popup(title, description, buttonid) {
$('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
var buttonsToShow;
if (buttonid!= null) {
buttonsToShow = {
'ClickMe': function () {
$('#' + buttonid).click();
$(this).dialog('close');
},
'Cancel': function () {
$(this).dialog('close');
}
}
} else {
buttonsToShow = {
'Cancel': function () {
$(this).dialog('close');
}
}
}
$('#dialog-popup').dialog(
{
resizeable: false,
width: 'auto',
modal: true,
draggable: false,
buttons: buttonsToShow
});
}
When I click the 'PopupStarter' button the jQuery dialog shows as expected, no trouble there. However... when I click the ClickMe button nothing happens (besides closing the dialog).
I would think I did something wrong: so I tried it with a timer:
function Popup(title, description, buttonid) {
$('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
var buttonsToShow;
if (buttonid!= null) {
buttonsToShow = {
'ClickMe': function () {
setTimeout(""$('#"" + buttonid + ""').click();"", 100);
$(this).dialog('close');
},
'Cancel': function () {
$(this).dialog('close');
}
}
} else {
buttonsToShow = {
'Cancel': function () {
$(this).dialog('close');
}
}
}
$('#dialog-popup').dialog(
{
resizeable: false,
width: 'auto',
modal: true,
draggable: false,
buttons: buttonsToShow
});
}
This works!! Now that is odd. So I called the parent jQuery
parent.$('#' + buttonid).click();
This also does not work.
And to top it all off, when I enter each of the lines manually in the console of the browser they all work!
Try using this:
$(document).on('click', '#' + buttonid, function(){
Your functions here;
});
Any items that do not exist on page load, will need to have the event listeners applied to the document, the body, or any parent selector that existed in the DOM on page load. Javascript does not attach listeners to objects that are not present when the DOM is loaded. Hope this helps!

jQuery UI dialog - text not selected second time shown

I am trying to simulate the internal javascript function prompt with the jQuery UI dialogs.
Almost work perfectly - just one minor error :-)
When the dialog is shown a second time (without a page reload) the text in the input field is not selected - why.
I use this code:
function modalprompt(text, title, prompt, callback) {
var newDiv = $("<div title='" + title + "'/>");
function okreply() {
newDiv.dialog("close");
if (callback) callback($("#promptid").val());
}
function cancelreply() {
newDiv.dialog("close");
if (callback) callback(false);
}
newDiv.keyup(function (e) {
if (e.keyCode == 13) {
okreply();
}
});
/*
newDiv.focus(function()
{
this.select();
});
*/
var htmltext = "<p>" + text + "</p>";
htmltext += "<input id='promptid' type='text' name='promptid' value='" + prompt + "' style='width: 100%; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box;'>";
newDiv.html(htmltext).dialog({
modal: true,
width: 480,
show: "blind",
hide: "blind",
focus: function (event, ui) {
$("#promptid").select();
},
open: function (event, ui) {
$("#promptid").select();
},
create: function (event, ui) {
$("#promptid").select();
},
buttons: [{
text: $.alerts.okButton,
click: function () {
okreply();
}
}, {
text: $.alerts.cancelButton,
click: function () {
cancelreply();
}
}]
});
}
You can test it yourself here: http://pcrypt.dk/dev/login.php?logout
Just activate the link "ModalPrompt test" 2 times
Must be something relating to the fact that the second time shown the dialog is already created. All the $("#promptid").select(); calls do fire without any result so something must change this afterwards?
Thank you in advance!
Benny
OK I do not know why it dows not work, but adding this event handler:
close: function(event, ui) { newDiv.remove(); },
Does the trick. So somehow when there is more that one div created the selected call goes to the first div and does not affect the shown dialog.

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