Я пытаюсь включить jqueryUI datepicker в частичное представление, например:

  <% 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>

Когда я напрямую вызываю URL-адрес этого частичного представления, поэтому он отображает только это представление, средство выбора даты работает идеально. (Для тестирования я добавил необходимые jquery и jqueryui script и ссылки css непосредственно в частичное представление)

Но если я использую Ajax.Actionlink для загрузки этого частичного представления внутри div (называемого div2, отправка вышеуказанной формы должна обновить div1) следующим образом:

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

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

Датапикер больше не будет отображаться. Я предполагаю, что javascript, включенный в загруженный html, не выполняется,

($(document).ready(function() {
        $("#datepicker").datepicker();
    }); doesnt work either

В таком случае, как и куда мне позвонить $("datepicker").datepicker();? (поместив его в ajaxoptions ajax.actionlink как oncomplete = "$ (function () { $ ('# datepicker'). datepicker ();}); " по-прежнему не работает.

Если это не так, то в чем моя проблема?

0
ArjanW 30 Сен 2009 в 01:00

3 ответа

Лучший ответ

Я не знаю, почему это не работает, но вы можете пропустить использование Ajax.ActionLink и вместо этого использовать JQuery для выполнения этой задачи, то есть:

<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>
0
veggerby 30 Сен 2009 в 10:58
Звучит правильно, но это заставляет ссылку получать частичное и отображать его на новой странице (где datepicker не работает)
 – 
ArjanW
30 Сен 2009 в 02:01

Ответ, данный veggerby, вероятно, будет работать в данном сценарии, поэтому я отметил его как правильный ответ.

Моя проблема заключалась в том, что javascript находится в части html, динамически загружаемой через ajax. Тогда загруженный код javascript не будет получен интерпретатором javascript (или чем-то еще, что я должен вызвать обработку javascript на стороне клиента).

В моем случае решение veggerby тоже не сработает, но это потому, что в моем приложении я даже загрузил этот фрагмент html + javascript через ajax. что приводит к той же проблеме.

Мне не хотелось помещать javascript на первую нормально загружаемую страницу, поскольку он не всегда загружает одну и ту же часть приложения (таким образом, возможно, выполняется код, когда он не нужен).

Я решил это, создав отдельный сценарий .js, который включен в 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
}

Который выполняется

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

Мне еще предстоит найти способ добавить UpdateTargetId в мою функцию rebindJQuery (data), так что это может быть более общим. Тем не менее, это решает мою проблему. (и пара сопоставимых вопросов, заданных здесь, в stackoverflow)

1
ArjanW 30 Сен 2009 в 18:24

Могут быть полезны живые события jQuery.

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

0
takepara 30 Сен 2009 в 18:12
Это, вероятно, может быть да, тем не менее, даже привязка живых событий не будет выполняться, если javascript самой привязки динамически загружается, см. мой собственный ответ на актуальную проблему здесь :)
 – 
ArjanW
30 Сен 2009 в 18:29
Извините, live не поддерживает события загрузки (поддержка: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup).
 – 
takepara
30 Сен 2009 в 19:04