Django的Javascript和調試

我想在我的模板中添加使用jQuery的JS datepicker，但我不能爲我的生活得到它的工作。Django的Javascript和調試

我header.html中（主模板）：

[...] 
    <script src="{% static 'js/jquery.js' %}"></script> 
    <script src="{% static 'js/jquery-ui.js' %}"></script> 
    <script> 
     $(function() { 
      $("#datepicker").datepicker({ 
       showOn: "button", 
       buttonImage: "{% static 'images/calendar.gif' %}", 
       buttonImageOnly: true, 
       buttonText: "Select date" 
      }); 
     }); 
    </script> 
    <title>{% block title %}{% endblock %}</title> 
</head>

包含腳本模板：

[...] 
    <div class="form-group"> 
     <div class="col-sm-offset-2 col-sm-10"> 
      <span class="text-danger small">{{ field.errors }}</span> 
     </div> 
     <label class="control-label col-sm-2"> 
      {{ field.label_tag }} 
     </label> 
     <div class="col-sm-10"> 
      <input type="text" id="datepicker"> 
     </div> 
    </div> 
[...]

如果我做一個完全裸露片，並使用腳本，它的工作原理找到。如果我把所有的代碼放在主要的header.html模板上，它不起作用。如果我完全擦掉header.html並將所有代碼替換爲腳本源代碼，它就可以工作。我看不到我的代碼如何阻止腳本工作。我在這裏錯過了什麼？另外，當開發服務器是遠程時，什麼是排除故障的好方法？

來源

2016-10-23 Flibertyjibbet

調試好辦法是打開Chrome瀏覽器開發工具，尋找在控制檯中的錯誤。 – serg

是的，這是相當標準的。我已經這樣做了，但是在這種情況下，它並沒有給我提供任何有關這個問題的富有成效的答案：（ – Flibertyjibbet

需要開始處理它。然後查看頁面源代碼以確保你的代碼全部存在，添加'console.log $（「#datepicker」））'看看它是否可以找到這個div – serg

調試HTML：

公開賽在火狐的頁面（不是其他瀏覽器），並查看源代碼（在Linux或Windows在Mac上，命令-U CTRL-U）。查看源代碼時，Firefox將突出顯示HTML中的錯誤。

要查看錯誤，您必須使用Firefox並通過「查看源代碼」選項查看源代碼 - 不要使用瀏覽器控制檯/檢查器，因爲檢查器顯示的是實時DOM，而不是HTML源代碼。

如果您安裝了HTML tidy，那麼您可以保存頁面的源代碼並運行tidy my-file.html來掃描它的語法錯誤。它會顯示這樣的錯誤：

來源

2016-10-24 05:46:14 Josh

這是顯示相同的我在Chrome瀏覽器上看到的東西，沒有錯誤突出顯示。通過點擊標籤中的所有鏈接，我確實找到了jquery.js的鏈接，但修復它並沒有解決我的問題。我比較了工作原始頁面和破損頁面上的來源，並沒有看到任何區別。 – Flibertyjibbet

開始懷疑我是否應該強制使用HTML5並使用似乎它會使用日期選擇器自動填充。感覺像是一個壞主意，但嘿..我們在技術行業：P – Flibertyjibbet

是的，這是一個壞主意。似乎這是一個Chrome的東西。 Firefox沒有內置日期選擇器，或者它只是無法識別HTML5元素類型。 – Flibertyjibbet

Django的Javascript和調試

回答

相關問題