i have tow pages one is mange.aspx and other is pop-up.aspx
in mange.aspx i load the other page with ajax and display it in jquery ui Dialog
my problem is when i load page the jquery ui Datepicker inside that page not working
this is my code
$(function () {
$("#datepicker").datepicker({
showOn: "button",
buttonImage: "../images/calendar-icon.png",
buttonImageOnly: true
});
$('#Add').click(function () {
var $dialog = $('<div id="MyDialog"></div').appendTo('body')
.load("../Pop-up.aspx #pop-up")
.dialog({
position: 'center',
width: 550
// code .....
});
});
});
You need to create the datepicker after you load the popup. Creating the datepicker before will do nothing.
function createDatePicker() {
$("#datepicker").datepicker({
showOn: "button",
buttonImage: "../images/calendar-icon.png",
buttonImageOnly: true
});
}
$(function () {
$('#Add').click(function () {
var $dialog = $('<div id="MyDialog"></div').appendTo('body')
.load("../Pop-up.aspx #pop-up", createDatePicker)
.dialog({
position: 'center',
width: 550
});
// code .....
});
});
Your datepicker creation code is now inside its own function, and is set as the callback when the popup page is loaded. This way, the datepicker will be created as soon as the page is loaded.
Related
Just a little preface... I am fairly new to jQuery so if something looks wrong or redundant please feel free to offer any helpful suggestions.
Now for the issue. I have 2 modals that are initiated from 2 separate links on the page.
The first modal was fairly problem free. It is a simple form that posts back to the same page. If you are wondering what the items in the "close:" section are, they are form fields that I want to clear the values on when the dialog is closed.
Once I added the second one I have had problems. This modal calls a coldfusion page into a modal to display pictures. The problems occur after opening up the second one. I can not close the second modal from the "close" button. I get the following error.
Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
I have to close it from the "x" in the upper right hand corner of the modal. After I close it, I get an error when trying to open up the first on.
Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
Here is the code for it.
$(document).ready(function() {
$(".dig").click(function() {
//based on which we click, get the current values
var cItemName = $("#checklistItemName").attr( "title");
var c2id = $("#check2id").attr( "title");
$("#ItemName").html(cItemName);
$("#ItemID").html(c2id);
$("#objCheckItemName").val(cItemName);
$("#objCheck2ID").val(c2id);
console.log(cItemName);
console.log(c2id);
});
$( "#image-form" ).dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
buttons: {
"Submit": function() {
$('#mForm').submit();
return true;
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$('#defaultSectionName')
.val('');
$('#defaultSectionDesc_hidden')
.val('');
$('#Photo')
.val('');
$('#objCheck2ID')
.val('');
$('#Check21')
.val('');
},
zIndex: 500
});
The next piece of code is where I believe the problems are occurring.
$( "#image_trigger" )
.click(function() {
$( "#image-form" ).dialog( "open" );
});
var dlg=$('#register').dialog({
title: 'Case Pictures',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:650,
height:450,
buttons: {
close: function() {
$( this ).dialog( "close" );
}
},
zIndex: 500
});
$('#reg_link').click(function(e) {
e.preventDefault();
var linkurl=('assets/includes/modalPictures.cfm' + '?'
+ 'id=' + $("#objCheck2ID").val()
);
dlg.load(linkurl, function(){
dlg.dialog('open');
});
});
jQuery UI: 1.10.1
jQuery: 1.9.1
Server Side: Coldfusion
The HTML is pretty extensive. If you need to see any part of it please let me know. Thanks for your help!
Upper case?
Close: function() {
You have to initialize your jquery dialog before calling the open function.
<script type="text/javascript">
$(document).ready(function () {
initializeDialog();
});
</script>
And change your js file to have the dialog code in initializeDialog() function.
function initializeDialog(){
$("#your-dialog-id").dialog({
autoOpen: false,
buttons: {
"Cancel": function() {
$(this).dialog("close");
}
},
modal: true,
resizable: false,
width: 600px,
height: 400px
});
}
Thanks #bpjoshi
I using jquery ui dialog with dynamic height. When it opens it’s centered, but when it loads the content it’s expanding toward the bottom of the page.
Here is my function:
$(this.document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this)
.attr("dialog-id"))
.dialog({
autoOpen: false,
title: $(this).attr("dialog-title"),
close: function () { $(this).remove() },
modal: true,
width: $(this).attr("dialog-width"),
heith: 'auto',
resizable: false,
draggable: false,
show: 'scale',
hide: 'puff',
position: ['center', 'middle']
})
.load(this.href).dialog("open");
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
I was able to fix this by setting autoOpen:false and creating the dialog content with my ajax call in the create method. Once that returned, and the content created, I called open on the dialog. Works great!
Above ans not work for me.
$(document).live("ajaxStop", function (e) {
$("#myDiagDiv").dialog("option", "position", "center");
});
I'm able to load and reopen jQueryUI Dialogs with a Datepicker as the first element in all browsers I've tried ... except IE 9.
If a Datepicker is the first element to receive focus when the Dialog opens, the Datepicker will auto launch. I'm able to suppress this behavior in FireFox and Chrome. IE 9 still launches the Datepicker on creation.
My open and close function for the Dialog are:
open: function (event, ui) {
$('#Date').blur(); // kill the focus
if ($('#Date').hasClass('hasDatepicker')) {
$("#Date").datepicker('enable');
}
else {
$("#Date").datepicker();
}
},
close: function (event, ui) {
$("#Date").datepicker('disable');
}
Here is the 'click' code
var dialogs = {};
$('#clicker').click(function (e) {
if (!dialogs['dlg']) {
loadAndShowDialog('dlg');
} else {
dialogs['dlg'].dialog('open');
}
});
var loadAndShowDialog = function (id) {
dialogs[id] = $('#dlg').clone().find('#ChangeMe').attr('id', 'Date').end()
.appendTo(document.body)
.dialog({ // Create the jQuery UI dialog
title: 'Testing',
modal: true,
resizable: true,
draggable: true,
width: 300,
open: see above
close: see above
};
jsfiddle showing this IE9 problem http://jsfiddle.net/stocksp/DdRLp/8/
What can I do to get IE to behave, short of not placing the Datepicker as the first element?
I don't have IE9 available at home so give this a try: http://jsfiddle.net/DdRLp/10/
I added a class to the datepicker input to make it easier to grab.
$(function() {
$(document).on("dialogcreate", "#dlg", function() {
$(".date_picker").datepicker();
$(".date_picker").datepicker("disable");
});
var dialogs = {};
$('#clicker').click(function(e) {
if (!dialogs['dlg']) {
loadAndShowDialog('dlg');
} else {
dialogs['dlg'].dialog('open');
}
});
var loadAndShowDialog = function(id) {
dialogs[id] = $('#dlg').clone().find('#ChangeMe').attr('id', 'Date').end().appendTo(document.body).dialog({ // Create the jQuery UI dialog
title: 'Testing',
modal: true,
resizable: true,
draggable: true,
width: 300,
open: function(event, ui) {
$("div#dlg form input").blur(); //takes focus off inputs
$(".date_picker").datepicker("enable");
},
close: function(event, ui) {
$(".date_picker").datepicker("disable");
}
});
};
});
I'm using jquery to open a dialog containing an iframe (don't ask!). I want to submit the form in the iframe on closing the dialog but it isn't working.
I'm probably making a simple error (I'm quite new to jquery) but this problem has been driving me round the bend.
Here is my code:
$(function() {
$( "#iframe" ).dialog({
modal: true,
autoOpen: false,
height: 500,
width: 700,
buttons: {
"Save and close": function() {
$( "#iframe").contents().find("#contentform").submit();
$( "#iframe" ).dialog( "close" );
},
Cancel: function() {
$( "#iframe" ).dialog( "close" );
}
}
});
$( "#openProfile" ).click(function() {
$( "#iframe" ).dialog( "open" );
$('#iframe').attr('src','file.asp');
return false;
});
});
However, if I do this instead of submitting the form:
"Save and close": function() {
var myformvalue = $( "#iframe").contents().find("#formfield").val();
alert(myformvalue);
$( "#iframe" ).dialog( "close" );
}
...it returns the correct value so I know it is recognising my form and its values.
Thanks in advance for your help.
I think you are running up against the jQuery V1.10(/9?) issue where they changed it so that the dialog container is moved out of the DOM, so you don't end up getting postbacks from the page in the iFrame. Reference this: https://stackoverflow.com/a/24663205/3334255 and An ASP.NET button click event is not firing
I have this link to close a jquery UI dialog box:
Close this window
And here is the jQuery:
$("#login-link").click(function() {
$("#login-box").dialog({
close: function(ev, ui) {
$(this).hide();
},
draggable: false,
height: 300,
modal: true,
position: ["center","center"],
resizable: false,
width: 1020
});
});
$("#close-login-box").click(function() {
$("#login-box").dialog("close");
});
Why doesn't the dialog box close when I click the link?
You don't need
close: function(ev, ui) {
$(this).hide();
},
Because $('#login-box').dialog('close'); will hide the dialog for you, there's no need to specify it yourself.