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")
Related
I have js/jquery dialog that has an some html input buttons that allow the user to select a color. The button when clicked should call the javascript function changeColor. I have reduced the code to a minimal set, yet when clicking the one of the color buttons I get an html "Reference Error: can't find variable: changeColor" error. Not sure what I am missing.
function changeColor(themeColor) {
var a = 1;
}
$('#change-theme').on('click', function() {
$('#theme').dialog({
width: 500,
resizable: false,
show: 'slide',
autoOpen: false,
modal: true,
buttons: [{
text: "Save",
tabIndex:-1,
'class':'dialog3_buttons',
click: function(event) {
$(this).dialog("close");
return true;
}
}, {
text: "Cancel",
tabIndex:-1,
'class':'dialog3_buttons',
click: function(event) {
$(this).dialog("close");
return false;
}
}]
})
.height("auto");
$("#theme").dialog( "option", "title", "Theme Picker - click a color to preview" );
$("#theme").html(
"<input type='button' class='color-button white-btn' id='color-button' name='white' onclick='javascript:changeColor()' >" +
"<input type='button' class='color-button black-btn' id='color-button' name='black' onclick='javascript:changeColor()' >"
);
$('#theme').dialog('open');
});
You have to assign the function to a globally available scope if you want to call it from html like you do in your example
Add this line to your code
window.changeColor = changeColor;
See this working example https://jsfiddle.net/09ghrhap/1/
I guess you need to place the function into the <head></head>
When my page loads it automatically reloads the page due to the dialog functions having window.location.reload() in one of them. I am new to making jquery dialogs so any corrections will help
Here is the code
$("#CancelConfirmDialogDiv").dialog({
autoOpen: false,
width: 600,
resizable: false,
modal: true,
buttons:
{
"Yes": function () {
$(this).dialog("close");
// redirect to the base admin/station page
var url = '#Url.Action("Users", "Admin")';
window.location.reload();
}
,
"No": function () {
$(this).dialog("close");
}
}
});
Thanks in advance
When window.location.reload() is commented out the page no longer refreshes the page
It was a version compatibility issue thanks Radio
I was looking at this answere jQuery how to close dialog from iframe within dialog?.
I have the same situation i.e. a page that calls a jqueryui dialog in this way:
var message = '<div id="pickDialog"><iframe frameborder="0" src="/Anagrafica/Pick?where=TipoAnagrafica=\'P\'"></iframe></div>'
$(message).dialog({
modal: true,
width: 'auto',
title: 'Seleziona'
});
In the Anagrafica page, when the user press a button I run another jqueryui dialog as follows
var message = '<div>Hai selezionato ' + value + '.</div><div>Confermi?</div>'
$('<div></div>').html(message).dialog({
modal: true,
title: 'Conferma',
buttons: {
"Si": function () {
window.parent.setCodice(value);
$(this).dialog("close");
window.parent.closePick();
},
"No": function () {
$(this).dialog("close");
}
}
});
Function closePick in main page is:
function closePick() {
$('#pickDialog').dialog('close');
return false;
}
This code works... but only first time! When I open the iframe id="pickDialog" the second time, when I press Si button the dialog doesn't close.
The function closePick is executed and I haven't errore in Javascript console.
What could it be?
I've solved this issue placing in the html page this
<div id="pickDialog" style="display:none"></div>
and then the jquery function becomes
function pickDialog() {
var message = "<iframe width="100%" height="100%" frameborder="0" src="/Anagrafica/Pick?where=TipoAnagrafica=\'P\'"></iframe>"
$("#pickDialog").dialog({
modal: true,
width: dWidth,
height: dHeight,
title: 'Seleziona'
}).html(message);
}
The other code is unchanged. I don't know why but this solved the issue.
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!
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.