Jqueryの.load（）関数がブランクに読み込まれることがあります。

Question

私は心が捻っている問題があります。私はJqueryでの経験があまりないので、皆さんが私に光を与えてくれることを願っています。

基本的に私はSpring + Thymeleafを持っており、一度に多くのリクエストをDBに送信しないようにするにはJquery.load（url）を使用してください（ここで 'url'は私の "th：電話番号の各部門 "）。これは、実際には機能します。問題は、時折、電話番号を入力する必要があるポップオーバーが空白であることです。それから私が数分待ってページをリフレッシュすれば、突然働き始めます！

HTMLページ、クリックの上、（）Jquery.loadを呼び出すJavaScriptの関数を呼び出す：「PhoneListとして

<a class="popover-birthday" th:onclick="'retrievePhones(__${birthday.idUser}__)'"><i class="fa fa-search-plus search-def"></i></a> 
    <div class="webui-popover-content"> 
      <div id="phoneList"></div> 
    </div> 

私はIDのdiv要素にロードするフラグメントを以下

は、符号化です「：

<div th:each="pho : ${phone}"><span th:text="|(${pho.numArea}) ${pho.number}|"></span></div> 

コントローラ方法：

@RequestMapping(value = "/birthday/phone/{idUser}", method = RequestMethod.GET) 
public ModelAndView showPhoneList(@PathVariable Long idUser) { 
    ModelAndView mv = new ModelAndView("user/birthday/resultsTel"); 
    mv.addObject("phone", users.getPhonesByIDUser(Integer.parseInt(idUser.toString()))); 
    return mv; 
} 

IDを取得し、しかしJquery.load（）HTMLを読み込む処理するJavaScriptコード：また

<script> 
    function retrievePhones(idUser) { 
     $(document).ready(function(){ 
      var url = '/user/birthday/phone/'+ idUser; 
      console.log(">>>"+ url); 
      var result = $("#phoneList").empty().load(url); 
      return result; 
     }); 
    } 
</script> 

、私が利用していたWeb-UI-ポップオーバープラグインの定義：

<script type="text/javaScript"> 
     $(document).ready(function(){ 
      $('.popover-birthday').webuiPopover({title:'Numbers:',placement:'bottom',animation:"pop"}); 
     }); 
</script> 

を

プラグインは言われては、この1：https://github.com/sandywalker/webui-popover

私はJquery.loadのJavascriptを（）（ウェブ-UI-ポップオーバーは、それ自体を作成する前にクリックしたときに時々webuipopoverをロードしている可能性を考えていますクラ

$('.popover-birthday').webuiPopover({title:'Numbers:',placement:'bottom',animation:"pop"}); 
     }); 

上記コードブロックで表示されているように）。

私はこの記事にこのコードをベースとしている：あなたは内部$(document).ready()が含まれている場合、私はのModelAndViewと「断片」にモデルを変更しますがhttp://xpadro.blogspot.com.br/2014/02/thymeleaf-integration-with-spring-part-2.htmlは「phoneList.html」

Answer 1

私の推測がある、ちょうどHTMLページであることを機能、コード$(document).ready()は、ドキュメントの準備が完了する前に親機能が起動した場合にのみ起動します。文書の準備が整った後でretrievePhones()関数が起動すると、何も起こりません。これはあなたが見ている散発的な行動を引き起こすかもしれません。あなた `retrievePhones（）`関数は、あなたの `$（ドキュメント）.ready（）`ではなく、その逆の内にある必要があります

function retrievePhones(idUser) { 
    var url = '/user/birthday/phone/'+ idUser; 
    console.log('>>>' + url); 
    var result = $('#phoneList').empty().load(url); 
    return result; 
}