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

Question

I'm 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 jquery and jqueryui 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 won't appear anymore. My best guess is the javascript included in the loaded html doesn't 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 that's not the case, then where's my problem?

ArjanW · Accepted Answer · 2009-09-30 14:24:25Z

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)

veggerby · Accepted Answer · 2009-09-30 06:58:48Z

0

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>

edited Sep 30, 2009 at 6:58

answered Sep 29, 2009 at 21:20

veggerby

9,0402 gold badges36 silver badges43 bronze badges

1 Comment

ArjanW Over a year ago

sounds right, but this makes the link get the partial and display it on a new page (where datepicker wont work)

takepara · Accepted Answer · 2009-09-30 14:12:55Z

0

jQuery live events might be useful.

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

answered Sep 30, 2009 at 14:12

takepara

10.5k3 gold badges36 silver badges31 bronze badges

2 Comments

ArjanW Over a year ago

it probably might be yes, nontheless, even live events binding wont get executed if the javascript of the binding itself is dynamicly loaded, see my own answer for the actual problem here:)

takepara Over a year ago

sorry, live not support load events(support :click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup).

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related