Search jQuery

jQuery Forum

ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work

in Using jQuery UI • 9 years ago

so at first I had a page I was loading with an ajax call. this page does an ajax post. I discovered this issue when do the post when the page returned the date pickers wouldn't change the dates in the text boxes, I had a lot of options setting on both the modal and the date pickers. in an attempt to isolate the problem. I strip out all the configurations, also I had read some thing about dialog doing funny things when they are not living on the base page, so I moved the modal to the base page.

user actions to duplicate issue

so I click the btn to load the modal works fine datepicker works.

close the modal and click the btn to open the modal again

the datepicker doesn't work the 2nd time the modal opens.

page setups

ui 1.10.2 jquery 1.9.1 and tried 2.0. 2 even thought I'm sure the issue is in my code or the ui code.

breaking in chrome and ie 9

and it html 5 doc type

code

//base page
<button id="modelbtn">click to load modal</button>
<div id="dialogModalCreate" />
<script type="text/javascript">
var modaldia;
$(document).ready(function () {
modaldia = $("#dialogModalCreate");
$("#modelbtn").click(function () {
modaldia.dialog({
autoOpen: false,
width: 750,
modal: true
});
modaldia.dialog('open');
modaldia.load("/home/Ajaxform", function () {
//tryed loading date picker here
//var startDate = $("#EffectiveStartDate");
//startDate.unbind();
//startDate.datepicker();
});
});
});
</script>
//ajax form page
<div >
<input id="" type="text" />
<input id="EffectiveStartDate" type="datetime" />
</div>
<script type="text/javascript" language="javascript">
//also tryed loading the date picker here
//var startDate = $("#EffectiveStartDate");
// startDate.unbind();
// startDate.datepicker();
</script>

if move the content from the ajax page and take the ajax loaded content out of the equation then every thing works fine. but this really doesn't help me so. what I need really is for the modal and the content to be on the ajax loaded page, but that has the same issue of the datepicker not working after and ajax post. or if the page is closed and reopened

Replies(7)

jakecigar

Re: ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work

9 years ago

Dialogs are meant to be reused.

<script>
$(function(){
var modaldia = $("#dialogModalCreate");
modaldia.dialog({ // make the dialog one time.
autoOpen: false,
width: 750,
modal: true
});
$("#modelbtn").click(function () {
modaldia.dialog('open'); // use it many times.
modaldia.load("/home/Ajaxform", function () {
$("#EffectiveStartDate").datepicker();
});
});
})
</script>

JΛ̊KE

heidenator

Re: ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work

9 years ago

changed the script to this on the base page NO dice it has noting to do with reusing the modal as soon as I make the content in the modal loaded by ajax the date picker doesn't work the 2nd time the modal is opened

var modaldia;
$(document).ready(function () {
modaldia = $("#dialogModalCreate");
modaldia.dialog({
autoOpen: false,
width: 750,
modal: true,
title: "New Tour Mapping",
buttons: [
{
text: "Next",
click: function () {
$(this).dialog("close");
}
},
{
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}]
});
$("#model").click(function () {
modaldia.dialog('open');
modaldia.load("/home/testAjaxLoad", function () {
var startDate = $(this).find("#EffectiveStartDate");
startDate.unbind();
startDate.datepicker();
});
});
});

jakecigar

Re: ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work

9 years ago

Did you look at my post? It's very different from your code.

And it works @ http://cors.jejaju.com/home/

JΛ̊KE

heidenator

Re: ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work

9 years ago

thanks for your help I figured it out it had nothing to do with your change from $(document).ready(function(){ ..}); to $(function(){..}

both your code and my above code work just fine I am using MVC 4 as my server back end

in the controller I was not returning a Partial view but rather a full view. I'm not sure why that makes any difference since my view should return the same data since it didn't have a layout parent page defined.

the only thing that seemed to happen when looking at the html when I return the full view is that it seams to 2 modal and thus explain the issue.

jakecigar

Re: ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work

9 years ago

$(document).ready(function(){ ..}); is exactly the same as $(function(){..} , only shorter!

The key is what was in bold. Building the dialog with autoOpen: false, then opening it with .dialog("open"). Never unbinding or re-calling .datapicker() .

What does "seams to 2 modal" mean?

JΛ̊KE

[edited: I meant dialog("open") not datapicker("open")]

heidenator

Re: ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work

9 years ago

.datapicker("open") not sure what that does since it is not in the api and it throws an error? you do not have that in your test page or in your init response to me

http://api.jqueryui.com/datepicker/

plus .datapicker() worked just fine. the unbind is because I had read that on some other thread as a solution to my problem, your are correct on that it is not needed.

anyway the solution has to do with MVC and controller when I do this for the Ajax loaded content it works the first time but after reopening the date picker doesn't work again. I tried your code I copied it from your post into my page and it didn't work. with the controller like this below

public ActionResult testAjaxload()
{
return View();
}

once i Changed the controller to the code below your code work :) I then tried to create the date picker with out the open and it worked since I couldn't find it in the api I used this .datapicker() . I also tried it with the unbind and it still worked all thought it is unneeded.

public ActionResult testAjaxload()
{
return PartialView();
}

the cleaned up script I finished with

<script type="text/javascript">
var modaldia;
$(document).ready(function () {
modaldia = $("#dialogModalCreate");
modaldia.dialog({
autoOpen: false,
width: 750,
modal: true
});
$("#model").click(function () {
modaldia.dialog('open');
modaldia.load("/home/testAjaxLoad", function () {
$("#EffectiveStartDate").datepicker();
});
});
});
</script>

you comment is about "Never unbinding or re-calling .datapicker() ." you can call .datapicker() as much as you want on the same selector since all the ui controls use the widget factory so that you can extend them. the factory stores the instance of the jquery object in the $(selector).data("ui.datapicker") or what ever control (names space) your using. you can't have more then one instance of a date picker per html element because of this. all it does if you you call .datapicker() again and its all ready init then you get the current instance for that selector.

plus the actual date picker obj is a singleton thus there is only one.

here is code for the date picker from the jquery-ui.js that is called. even if you call .datapicker(option, value, get ). or any of the other calls that are in the api for after the control is initialization.

because the factory must first see if the control instance exist before it can chain the option calls

$.fn.datepicker = function(options){
/* Verify an empty collection wasn't passed - Fixes #6976 */
if ( !this.length ) {
return this;
}
/* Initialise the date picker. */
if (!$.datepicker.initialized) {
$(document).mousedown($.datepicker._checkExternalClick);
$.datepicker.initialized = true;
}
/* Append datepicker main container to body if not exist. */
if ($("#"+$.datepicker._mainDivId).length === 0) {
$("body").append($.datepicker.dpDiv);
}
var otherArgs = Array.prototype.slice.call(arguments, 1);
if (typeof options === "string" && (options === "isDisabled" || options === "getDate" || options === "widget")) {
return $.datepicker["_" + options + "Datepicker"].
apply($.datepicker, [this[0]].concat(otherArgs));
}
if (options === "option" && arguments.length === 2 && typeof arguments[1] === "string") {
return $.datepicker["_" + options + "Datepicker"].
apply($.datepicker, [this[0]].concat(otherArgs));
}
return this.each(function() {
typeof options === "string" ?
$.datepicker["_" + options + "Datepicker"].
apply($.datepicker, [this].concat(otherArgs)) :
$.datepicker._attachDatepicker(this, options);
});
};
$.datepicker = new Datepicker(); // singleton instance
$.datepicker.initialized = false;
$.datepicker.uuid = new Date().getTime();
$.datepicker.version = "1.10.2";

you may want to read this about the widget factory.

http://wiki.jqueryui.com/w/page/12138135/Widget%20factory

jakecigar

Re: ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work

9 years ago

Sorry I wrote datapicker instead of dialog in the text of my answer. I'm glad you finally got it working.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work

Replies(7)

Re: ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work

Re: ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work

Re: ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work

Re: ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work

Re: ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work

Re: ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work

Re: ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work

Statistics

Tags

Actions