ASP.NET MVC.NET JQueryUI datepicker inside a div loaded/updated with ajax.actionlink

Question

Im trying to incorporate jqueryUI's datepicker inside a partialview like this:

  <% using (Ajax.BeginForm("/EditData", 
                            new AjaxOptions { HttpMethod = "POST", 
                                             UpdateTargetId = "div1"   }))
  {%>
    Date: 
   <%= Html.TextBox("date", String.Format("{0:g}", Model.date), new { id = "datePicker"})%>
   <% } %>

        <script type="text/javascript">

        $(function() {
            $("#datePicker").datepicker();
        });
        </script>

when i directly call the url to this partial view, so it renders only this view the datepicker works perfectly. (for the purpose of testing this i added the needed jquerry and jquerryui script and css references directly to the partial view)

But if i use a Ajax.Actionlink to load this partial view inside a div (called div2, submitting the above form should update div1) like this:

      <div id="div1">
    <%= Ajax.ActionLink("Edit", "/EditData", new { id = Model.id }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "div2" } )%>                  

</div>
<div2>placeholder for the form</div>

the datepicker wont apear anymore. My best guess is the javascript included in the loaded html doesnt get executed, ($(document).ready(function() { $("#datepicker").datepicker(); }); doesnt work either

if that's the case how and where should i call the $("datepicker").datepicker(); ? (putting it in the ajaxoptions of the ajax.actionlink as oncomplete = "$(function() { $('#datepicker').datepicker();});" still doesnt work.

if thats not the case, then where's my problem?

Answer 1

I don't know why that does not work, but you could skip using the Ajax.ActionLink and instead use JQuery on itself to do this task, i.e.:

<div id="div1">
    <%= Html.ActionLink("Edit", "/EditData", new { id = Model.id } )%>                  
</div>
<div2>placeholder for the form</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("#div1 a").click(function() {
            $.get(
                $(this).attr("href"),
                null,
                function (data) { 
                    $("#div2").html(data); 
                    $("#datepicker").datepicker();
                });
            return false; // to prevent link
        });
    });
</script>

Answer 2

jQuery live events might be useful.

http://docs.jquery.com/Events/live

Answer 3

The answer given by veggerby probably will be working in the given scenario, therefor i marked it as correct answer.

My problem here was that the javascript is in a portion of html being dynamicly loaded thrue ajax. Then the loaded javascript code wont be picked up by the javascript interpreter (or whatever im supposed to call the javascript handling on the clientside).

In my case veggerby's sollution wouldnt work either but that's because in my app i even loaded that piece of html+javascript thrue ajax. which results in the same problem.

i didnt feel like putting the javascript in the first normally loaded page, since it doesnt always load the same piece of app (thus possibly executing code when its not needed).

i resolved this by creating a sepperate .js script which is included in the site.master:

function rebindJQuery(data) {
    jQuery('#div2').html(data.get_data());
    jQuery('#datepicker').datepicker();
    return false; //prevent original behavior, in this case folowing the link
}

which gets executed by

<%= Ajax.ActionLink("Edit", "/EditData", new { id = Model.id }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "div2" , oncomplete="rebinJQuery"  } )%>

i have yet to find a way to get the UpdateTargetId into my rebindJQuery(data) function, so this can be more generic. Nontheless this solves my problem. (and a couple of compairable questions asked here on stackoverflow)

Answer 4

Here is my solution to make any dynamically loaded JavaScript (including MVC2 Client Validation) seamlessly work:

http://adammcraventech.wordpress.com/2010/06/11/asp-net-mvc2-ajax-executing-dynamically-loaded-javascript/