Jak sprawić, aby JQuery DatePicker działał po załadowaniu dynamicznym w widoku częściowym?

Question

Zgubiłem jquery funkcjonalność datepicker w tym scenariuszu ...

1- Początkowo miałem normalnego widoku, który pracował w porządku, mając ten kod daty wejścia ...

<input type="text" name="date_start" id="date_start" 
         value="@(Model.TimeStart)" /> 
<script language="javascript" type="text/javascript"> 
    $("#date_start").datepicker(); 
</script> 

2- Następnie , konwertowane to widok w częściowym widoku, który jest dynamicznie obciążonego ...

$('#TargetEmptyDiv').load("/MyController/MyAction"); 

3- częściowym rzucie obciążenie ok, dane mogą być (ręcznie) rozpoczęło i wszystko jest w porządku. Jedynym problemem jest to, że datepicker jquery przestał działać. Próbowałem go przypisać po załadowaniu, używając tego ...

$('#TargetEmptyDiv').load("/MyController/MyAction", 
          function() { $("#date_start").datepicker(); }); 

To nie zadziałało.

4- Później nauczyłem się, że jquery udostępnia funkcje live() i delegate(), które są w stanie dołączyć kod javascript do elementów załadowanych "teraz iw przyszłości". Tak, ja tryed to w inicjalizacji dokumentu ...

<script type="text/javascript"> 
    $(document).ready(function() { 
      $("#date_start").live("click", function() { $(this).datepicker(); }); 
    }); 
</script> 

a później także ... którego

<script type="text/javascript"> 
    $(document).ready(function() { 
      $("#date_start").delegate("click", function() { $(this).datepicker(); }); 
    }); 
</script> 

żaden pracował, może dlatego, że bezpośrednio odwoływać się do „kliknięcia” imprezy, ale datepicker jest "dołączony" (jeśli jest to właściwy termin) do całego elementu.

Pytanie brzmi: Jak ustawić datakicker jquery na elementach ładowanych po obciążeniu dynamicznym ???

Dziękujemy za poświęcony czas!

rozwiązany: Problem polegał na tym, że w dolnej części _Layout.cshtml jest ta linia ...

@Scripts.Render("~/bundles/jquery") 

..which ładuje minified wersję bibliotek jquery (już odwołanie przez siebie). Tak więc biblioteki zostały załadowane dwa razy i zostały niepoprawne, powodując błąd "datepicker() nie jest funkcją".

Po prostu komentowanie lub usuwanie tej linii, sprawia, że ​​wszystko działa dobrze!

Answer 1

Twoje podejście w # 3 wygląda na to, że powinno zadziałać, więc wygląda na to, że musisz trochę debugować. Spróbuj tego:

1. Get rozszerzenie Firebug, jeśli używasz przeglądarki Firefox (Chrome posiada narzędzia dev wbudowane)
2. dodać debugger linię do kodu (patrz poniżej na przykład)
3. Załaduj swoją stronę z Chrome lub Firebug/Firefox (lub dowolne inne narzędzie programistyczne przeglądarki)

Co powinno się stać, że przeglądarka zatrzyma się w tym momencie. Jednakże, jeśli coś nie działa zgodnie z oczekiwaniami, może nie trafić w ten kod, a wtedy nie będzie żadnej przerwy.

Jeśli pojawi się pauza, użyj konsoli do sprawdzenia wartości $("#date_start"); Możliwe, że selektor jQuery nie chwyta tego, co myślisz, że jest.

Oto debugger przykład z kodem:

$('#TargetEmptyDiv').load("/MyController/MyAction", function() { 
    debugger; 
    $("#date_start").datepicker(); 
}); 

Answer 2

miałem ten problem przed. W mojej sytuacji miałem <script src='jQueryUI.js'></script> na dole strony. Przeniesienie odniesienia do góry strony naprawiło to dla mnie.

Answer 3

Wygląda na to, że # 3 powinno działać. Ale może można spróbować hacky sposób tak:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(this).on("mousedown", "#date_start", function (e) { 
      $(this).datepicker(); e.preventDefault();$(this).click(); 
     }); 
    }); 
</script> 

Answer 4

mam ten pracuje

metody działania:

public ActionResult GetControl() 
{ 
    return View("_partial"); 
} 

Widok główny

<div id="TargetEmptyDiv"></div> 

<script type="text/javascript"> 
    $(function() { 
     $('#TargetEmptyDiv').load("/Home/GetControl"); 
    }); 
</script> 

Częściowy Widok:

@{ 
    Layout = ""; 
} 

<input type="text" name="date_start" id="date_start" /> 

<script type="text/javascript"> 
    $(function() { 
     $("#date_start").datepicker(); 
    }); 
</script> 

oczywiście trzeba pamiętać, aby obejmować jQuery ui.js w układzie

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script> 

Answer 5

Podejrzewam, że JS jest wykonywany, ale masz nieprawidłowo odwołuje jQuery UI. Zalecam dodanie wszystkich bibliotek jquery na wyższym poziomie niż częściowy widok. Spróbuj umieścić znacznik <script src="jquery-ui.js"> na stronie lub układzie, a nie na widoku częściowym. Jeśli to nie rozwiąże problemu, spróbuj umieścić alert("test"); w kodzie javascript, aby upewnić się, że jest wykonywany.

Answer 6

Wszystko, co potrzebne do pracy Datepicker to kroki 1-3.

Oto próbka: http://jsfiddle.net/delrosario/Xd8py/

Masz datepicker do pracy bez ładowania znaczników dynamicznie i pseudo kod do dynamicznej wersji jest dźwięk z kroków 1-3. Rzeczą, którą musisz sprawdzić teraz, jest upewnienie się, że twoje zależności są ładowane przed twoim głównym programem (w tym przypadku upewnij się, że jquery i jquery ui są dostępne przed uruchomieniem konfiguracji request + datepicker).

1) jquery obciążenia 2) obciążenie jQuery UI 3) czekać aż dom jest gotowy lub element, który będzie zawierał swój ładunek jest gotowy 4) wykonanie głównej aplikacji, które wykonuje kroki 1-3 z opisem.

To byłoby coś takiego.

<!doctype html> 
<html> 
    <head> 
    <link rel="stylesheet" href="path-jquery-ui-css" /> 
    <script src="path-to-jquery"></script> 
    <script src="path-to-jquery-ui"></script> 
    <script id="main_app"> 
     (function() { 
     // wait till dom is ready before executing our code, 
     // in this case steps 1-3. 
     }); 
    </script> 
    </head> 
    <body> 
    <div id="datepicker_target">datepicker target</div> 
    </body> 
</html> 

Answer 7

Na częściowego stronie powiedzieć "/ MyController/MyAction"

Częściowa Code Page:

<div> 
    <form> 
     <!--Other Elements--> 
     <input type="text" id="adate" name="adate" title="date" /> 
    </form> 
    <script type="text/javascript"> 
     $(document).ready(function(){  
      $("#adate").datepicker(); 
     }); 
    </script> 
</div> 

Cała strona (strona z którego dzwonisz Ajax żądanie) Kod:

<div id="TargetEmptyDiv"></div> 
<script type="text/javascript"> 
function abc(){ 
$.ajax({ 
     type: "POST", 
     url: "/MyController/MyAction", 
     success: function(response) 
     { 
      $("#TargetEmptyDiv").html(response); 
     } 
}); 
} 
</script> 

zadzwoń do funkcji abc, a skończysz. Zakładając, że masz już załadowane wszystkie pliki jquery.

Answer 8

Miałem dokładnie ten sam problem. Jeśli używasz ajax, powiąż poniższą funkcję jquery z dokumentem. Za każdym razem, gdy wykonywany jest ajax, to się uruchamia. Sprawdź doc api tutaj - http://api.jquery.com/category/ajax/global-ajax-event-handlers/

$ (document) .ajaxComplete (function() {// kod tutaj})

Answer 9

miałem ten sam problem rozwiązany przy użyciu poprzedniej wersji JQuery-UI. W moim przypadku używa wersji 1.9.2 i 1.10.3 do JQuery do JQuery. Znasz przyczynę, ale myślę, że najnowsze wersje przynoszą problemy z kompaktowością, więc zdecydowałem się używać zawsze wstecz do przeszłości. Mam nadzieję, że przyda się

Answer 10

Po wywołaniu ajaxa podłącz jquery do zdarzenia ajaxStop. (ZOBACZ: '@section Scripts')

$ (dokument) .ajaxStop obsługuje post ajax jquery call i teraz działa po wywołaniu ajax. tak ...

Uwaga: $ (document) .ready ... uchwyty początkowego ładowania strony datapicker dekorację, ale po reload formularza ajax, jquery datepicker nie został wykonany ...

@model Q_Admin.Models.AllQAViewModel 

<div id="mainContent"> 

    @using (Ajax.BeginForm("EAAll","Answer",new AjaxOptions { 
    UpdateTargetId = "mainContent", 
    HttpMethod = "POST", 
    InsertionMode = InsertionMode.Replace 
    })) 

    for (int i = 0; i < Model.VMs.Count; i++) 
    { 
    @switch (Model.QAVMs[i].qN.Node1.TypeAnswer.AnswerType.Trim().ToUpper()) 
    { 
    case "DATETIME": 
     @Html.TextBoxFor(m => m.VMs[i].CurrentNodeText, 
      new { @class = "datepicker", @id = "datepicker" }); 
     break; 
    case "DROPDOWNLIST": 
     @Html.DropDownListFor(m => m.QAVMs[i].AnswerRecord.AnswerID, 
      new SelectList(Model.QAVMs[i].answerNodes, "ID", "NodeText.Text", Model.QAVMs[i].SelectedNodeID), 
      "-- Select an Answer --", 
      new { @onchange = "$(this).parents('form:first').find(':submit')[0].click();" }) } 
     break; 
    default: 
     break; 
    } 
    } 
</div> 

@section Scripts{ 
<script type="text/javascript"> 
    $(document).ready(function() { 
     // debugger; 
     $("#datepicker").datepicker(
      { 
       dateFormat: "mm/dd/yy", 
       constrainInput: true 
      }); 
    }); 
    $(document).ajaxStop(function() { 
     // debugger; 
     $("#datepicker").datepicker(
      { 
       dateFormat: "mm/dd/yy", 
       constrainInput: true 
      }); 
    }); 
</script>} 

Answer 11

Umieść następujący jQuery w widoku bazowym, a nie częściowy widok

<script> 
    $(document).ready(function() { 
     $(document).on('focus', '.datefield', function() { 
      $(this).datepicker(); 
     }); 
    }); 
</script> 

to będzie działać, gdy częściowy widok jest dynamicznie ładowane i na stronie obciążenia.

Answer 12

<script type="text/javascript">$(function() {$("#datefield").datepicker();});</script> 

prostu załadować tę linię z treścią trzeba ładować przez ajax

Answer 13

hi: można umieścić poniżej kod w dokumencie obciążenie tagu skrypt wydarzenie w twoim częściowym widokiem:

$(function(){ 

$("#date_start").datepicker(); 

}) 

Answer 14

w moim case, id pola daty, w którym próbowałem podłączyć datepicker, nie było tym, co myślałem, że jest. Używam ViewModels i id został poprzedzony prefiksem nazwy ViewModel mojego częściowego widoku.

odpowiedź machineghost mnie do tego.

Więc teraz używać odpowiedź Charly, ale zamiast #BirthDate mam #IdentityModel_BirthDate:

<script> 
    $(document).ready(function() { 
     $(document).on('focus', '#IdentityModel_BirthDate', function() { 
      $(this).datepicker({ 
       format: 'MM/dd/yyyy', 
       changeMonth: true, 
       changeYear: true, 
       yearRange: "-90:+0" 
      }); 
     }); 
    }); 
</script>