почему jautocalc.js не работает на странице содержимого asp.net? - PullRequest
Новая
       40

почему jautocalc.js не работает на странице содержимого asp.net?

0 голосов
/ 16 января 2019

Я исследовал стек-поток, чтобы узнать, как использовать jautocalc.js на информационной странице проекта vb.net.

на обычной странице aspx работает нормально, но как только я обращаюсь к главной странице и внедряю элементы управления содержимым, форма больше не вычисляется автоматически.

Я работаю с SQL Server 2008 и VS9.

Ниже моя страница содержания aspx 

<%@ Page Title="Consultation" Language="VB" MasterPageFile="Site.Master" AutoEventWireup="true" CodeFile="Test.aspx.vb" Inherits="Test" %>
<asp:Content ID="Header" ContentPlaceHolderID="Header" runat="server">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script type="text/javascript" src="<%=ResolveUrl("~/dist/jautocalc.js")%>"></script>
    <script type="text/javascript">
    <!--
        $(document).ready(function() {

            function autoCalcSetup() {
                $('form[name=cart].ClientID').jAutoCalc('destroy');
                $('form[name=cart] tr[name=line_items].ClientID').jAutoCalc({ keyEventsFire: true, decimalPlaces: 2, emptyAsZero: true });
                $('form[name=cart].ClientID').jAutoCalc({ decimalPlaces: 2 });
            }
            autoCalcSetup();


            $('button[name=remove]').click(function(e) {
                e.preventDefault();

                var form = $(this).parents('form')
                $(this).parents('tr').remove();
                autoCalcSetup();

            });

            $('button[name=add]').click(function(e) {
                e.preventDefault();

                var $table = $(this).parents('table');
                var $top = $table.find('tr[name=line_items]').first();
                var $new = $top.clone(true);

                $new.jAutoCalc('destroy');
                $new.insertBefore($top);
                $new.find('input[type=text]').val('');
                autoCalcSetup();

            });

        });
    //-->
    </script>


 </asp:Content>
    <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="container">
        <h1>jQuery AutoCalc: Do Calculations On Fields Example</h1>
    <form name="cart">
        <table name="cart" class="table table-striped table-bordered">
            <tr>
                <th></th>
                <th>Item</th>
                <th>Qty</th>
                <th>Price</th>
                <th>&nbsp;</th>
                <th>Item Total</th>
            </tr>
            <tr name="line_items">
                <td><button name="remove" class="btn btn- 
                danger">Remove</button></td>
                <td>Stuff</td>
                <td><input type="text" name="qty" value="1"></td>
                <td><input type="text" name="price" value="9.99"></td>
                <td>&nbsp;</td>
                <td><input type="text" name="item_total" value="" 
                jAutoCalc="{qty} * {price}"></td>
            </tr>
            <tr name="line_items">
                <td><button name="remove" class="btn btn- 
                danger">Remove</button></td>
                <td>More Stuff</td>
                <td><input type="text" name="qty" value="2"></td>
                <td><input type="text" name="price" value="12.50"></td>
                <td>&nbsp;</td>
                <td><input type="text" name="item_total" value="" 
                 jAutoCalc="{qty} * {price}"></td>
            </tr>
            <tr name="line_items">
                <td><button name="remove" class="btn btn- 
                danger">Remove</button></td>
                <td>And More Stuff</td>
                <td><input type="text" name="qty" value="3"></td>
                <td><input type="text" name="price" value="99.99"></td>
                <td>&nbsp;</td>
                <td><input type="text" name="item_total" value="" 
                jAutoCalc="{qty} * {price}"></td>
            </tr>
            <tr>
                <td colspan="3">&nbsp;</td>
                <td>Subtotal</td>
                <td>&nbsp;</td>
                <td><input type="text" name="sub_total" value="" 
                jAutoCalc="SUM({item_total})"></td>
            </tr>
            <tr>
                <td colspan="3">&nbsp;</td>
                <td>
                    Tax:
                    <select name="tax">
                        <option value=".06">CT Tax</option>
                        <option selected value=".00">Tax Free</option>
                    </select>
                </td>
                <td>&nbsp;</td>
                <td><input type="text" name="tax_total" value="" 
                jAutoCalc="{sub_total} * {tax}"></td>
            </tr>
            <tr>
                <td colspan="3">&nbsp;</td>
                <td>Total</td>
                <td>&nbsp;</td>
                <td><input type="text" name="grand_total" value="" 
                jAutoCalc="{sub_total} + {tax_total}"></td>
            </tr>
            <tr>
                <td colspan="99"><button name="add"  class="btn btn- 
             primary">Add Row</button></td>
            </tr>
          </table>
       </form>
     </div>

 <script type="text/javascript">

     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-36251023-1']);
     _gaq.push(['_setDomainName', 'jqueryscript.net']);
     _gaq.push(['_trackPageview']);

     (function() {
         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();

 </script>
  </asp:Content>

Ниже приводится содержание моей главной страницы 

 <head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %>New Page with Form</title>

<asp:PlaceHolder runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="icon" style="width:10px; height:10px;" href="images/jkhfavicon.gif" type="image/gif" >
<script type="text/javascript" src="~/Scripts/jscripts/tabcontent.js"> 
</script>
<script type="text/javascript" src=" 
<%=ResolveUrl("~/dist/jautocalc.js")%>"></script>
<link rel="stylesheet" href="tabcontent.css" type="text/css" />
  <script type="text/javascript">
      $(function () {
          $("#content").content({ active: 5, collapsible: true });
      });
 </script> 
 </head>
 <body>
 <form runat="server">
    <asp:ScriptManager runat="server">
        <Scripts>
            <%--To learn more about bundling scripts in ScriptManager see 
            http://go.microsoft.com/fwlink/?LinkID=301884 --%>
            <%--Framework Scripts--%>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="bootstrap" />
            <asp:ScriptReference Name="respond" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site Scripts--%>
            <asp:ScriptReference Name="jAutoCalc.js" Assembly="System.Web" Path="~/Scripts/jscripts/jautocalc.js" />
        </Scripts>
    </asp:ScriptManager>

Примечание: обратите внимание, что в Visual Studio jAutoCalc подчеркнут зеленым 

       <td><input type="text" name="item_total" value="" jAutoCalc="{qty} * 
        {price}"></td>

со следующим предупреждением при наведении мыши на 

         Validation (XHTML 1.0 Transitional): Attribute 'jAutoCalc' is not 
         a valid attribute of element input

Любые указатели или указатели решения будут высоко оценены и уважаться.

...