2017-05-22 14 views
0

ASP.NETページにあるUpdatePanelのasp:PanelにJQueryスクリプトがあります。これがコードです。ASP.NETのUpdatePanelのjQueryエラー

<asp:UpdatePanel runat="server"> 
    <ContentTemplate> 
     <asp:Panel runat="server" ID="ImagePanel"> 
      <img id="photo" src="/Icons/Factory Layout.png" style="display:none"/> 
      <script type="text/javascript"> 
       $(document).ready(function() { 
        var factoryImage = $("#photo");     
        factoryImage.attr("src",document.getElementById('<%= FactoryImageFileNameHF.ClientID %>').value); 
        factoryImage.show(); 
        $('#photo').imgAreaSelect({ 
         handles: true, 
         show: true, 
         onSelectEnd: function(img, selection) { 
          var X1 = document.getElementById('<%= X1HF.ClientID %>'); 
          var Y1 = document.getElementById('<%= Y1HF.ClientID %>'); 
          var X2 = document.getElementById('<%= X2HF.ClientID %>'); 
          var Y2 = document.getElementById('<%= Y2HF.ClientID %>'); 
          X1.value = selection.x1; 
          X2.value = selection.x2; 
          Y1.value = selection.y1; 
          Y2.value = selection.y2;        
         }       
        }); 
       }); 
      </script> 
     </asp:Panel> 
    </ContentTemplate> 
</asp:UpdatePanel> 

私はウェブフォームの先頭に次のリンクがあります。

<script type="text/javascript" src="/Scripts/jquery.imgareaselect.pack.js"></script> 

は、私はjQueryのに新しいですと、私はエラーがどこにあるのは本当にわからない、次のエラー

Uncaught ReferenceError: jQuery is not defined 
at eval (eval at <anonymous> (jquery.imgareaselect.pack.js:1), <anonymous>:1:10852) 
at jquery.imgareaselect.pack.js:1 
FactoryLayoutSettings.aspx:543 Uncaught TypeError: $ is not a function  
at FactoryLayoutSettings.aspx:555  
(anonymous) @ FactoryLayoutSettings.aspx:555 

を持っています。それはUpdatePanelの結果ですか?最初は画像が表示され、その後ポストバックが失敗し、上記のエラーが表示されるためですか?

+0

jquery.imgareaselect.pack.jsをインポートする前にjqueryをインポートする必要があります –

答えて

1

scriptタグの前にもう1つのscriptタグがある必要があります。このタグでは、 jQueryのを参照することになります。あなたがjQueryのを利用していますが、それを使用する前に、ライブラリをロードしていないようである。

<script type="text/javascript" src="..."></script> 

src...でのjQueryへのパスに置き換えてください。

+0

実際にはマスターページ最初にページやマスターをロードするのは何ですか? –

+1

@EmptyWaterHolesマスターページには、作成する各ページの内容を追加するセクションがあります。正しいことを覚えていれば、 ' 'の終了タグの後にこのスクリプトタグがあると思われます。その場合は、jQueryを必要以上にロードします。 – Christos

+0

jquery.min.jsは働いていたjQueryです。 jquery-3.0.0.min.jsがうまくいかなかった理由があります。サードパーティのプラグインは、jquery.min.jsを提案しました。あなたが最初だったので、私はあなたの答えを正しいものとして選ぶつもりです。みんなあなたの助けをありがとう。 –

1

使用しているコードにJQueryが必要です。

は、あなたのページに別のスクリプトリソースを追加します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
1

は、あなたが実際にそれを使用する前にはJQueryを含める必要があります。

まず、あなたはすべてのページにしたいあなたのjQueryのスクリプトに必要なバンドルを作成します。

public static void RegisterBundles(BundleCollection bundles) 
{ 
    bundles.Add(new ScriptBundle("~/js/required").Include(
     "~/Scripts/jquery-2.0.2.js")); 

    //other bundles 
} 

は今、それはあなたの問題を解決する必要があり、あなたのPAGE-

<body> 
    @RenderBody() 
    @Scripts.Render("~/js/required") //Here add your jquery include 
    @RenderSection("scripts", false) //Here you add scripts at the bottom of the page 
</body> 

にこのバンドルが含まれています。

関連する問題