2017-03-16 21 views
0

私はJQueryテンプレート機能を使用してhtmlページのテンプレートをレンダリングしています。 私は(関数を呼び出しdisplayProducts)とJSON形式のデータを取得するために、AJAX呼び出してバックエンドのJavaサービスを使用していますボタンのヒットで今すぐ

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script> 

を使用してライブラリをロードしています。 responseJsonはバックエンドから戻ってくるデータです。

テンプレートファイル名はproductList.htmlです。そして成功すると、私はjqueryのtmpl関数を呼び出しています。しかし、それは次のエラーを示しています。

Uncaught TypeError: $.tmpl is not a function

私のコードで間違ったことを示唆しています。

function displayProducts() { 
    $.ajax({ 
       url : 'DisplayProducts', 
       data : { 
        searchKey : $('#searchText').val() 
       }, 
       success : function(responseJson) { 
        console.log(JSON.stringify(responseJson)); 
        $.get('template/productList.html', function(htmlTemplate) { 
         $.tmpl(htmlTemplate, responseJson).appendTo('#container2'); 
        });      
       } 
      }); 
} 

EDITED:

I>タグ<スクリプト内

var blogPosts = [ 
      { 
       postTitle: "How to fix a sink plunger in 5 minutes", 
       postEntry: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.", 
       categories: ["HowTo", "Sinks", "Plumbing"] 
      }, 
      { 
       postTitle: "How to remove a broken lightbulb", 
       postEntry: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.", 
       categories: ["HowTo", "Lightbulbs", "Electricity"] 
      }, 
      { 
       postTitle: "New associate website", 
       postEntry: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna." 
      } 
     ]; 
     $.get('template/sample.html', function(template) { 
      $.tmpl(template, blogPosts).appendTo('#container3'); 
     }); 

を使用しています。それは正常に動作しています。しかし、私が以前に投稿した方法を使用しているとき、エラーを示しています。

+2

のjQuery 1.4.4は、*非常に*時代遅れです。私は強くそれを更新することをお勧めします –

+2

5年前に終了したjquery.tmplのサポート。多少はサポートされているフォークがあります。それらを使用するか、より新しい何かに切り替えることをお勧めします。 –

+0

@ozilあなたの提案をお試しください。エラーが発生しました 未知のReferenceError:jQueryが定義されていません –

答えて

0

「jquery.tmpl.min.js」参照を追加する必要があります(ここではリンクファイルを確認してください)。 https://github.com/BorisMoore/jquery-tmpl

+0

オリジナルの投稿を編集しました –

0

コードのバージョン番号にはまったく問題はありませんでした。 HTMLテンプレートに欠落がありました。だからこそ私はエラーを受けていた。今すぐ修正しました。

0

私は私のプロジェクトでこのエラーを修正し、私はちょうどjQueryのリソースへのリンクを追加しました:ちょうどFYI

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 
関連する問題