1

このチュートリアルに従って、

カスタム ダイアログ ボックス

私はすでにASP.Netページ用の3つのaspコンテンツプレースホルダーを持っており、それらはすでに私が推測するある種のスクリプトを使用していますが、これはここでは問題ではありません。

問題は、「OnClientClick」属性を使用して関数を呼び出すことができますが、この関数には別の .js ファイルに複数の関数があります。他の関数を呼び出す前にアラートを入れると機能しますが、最初の機能に行った後では機能しません。

チュートリアルには、すべての JavaScript コードがリストされています。ASP.Net コンテンツの場所で使用して機能させるコードは次のとおりです。

<asp:Content ID="Content4" ContentPlaceHolderID="cphSubmit" runat="server">
 <script type="text/javascript" src="/_layouts/1033/jquery.js"></script>
 <script type="text/javascript" language="JavaScript" src="CustomDialog.js"></script>
 <script type="text/javascript" language="JavaScript">
        function ShowMessage()
        {
            alert("1");
            SetText('Yes','No');
            alert("2");
            DisplayConfirmMessage('are you sure',180,90)
            SetDefaultButton('btnConfOK');
            return false;
        }
 </script>
            <div id="divConfMessage" runat="server" style="BORDER-RIGHT:black thin solid; BORDER-TOP:black thin solid; DISPLAY:none; Z-INDEX:200; BORDER-LEFT:black thin solid; BORDER-BOTTOM:black thin solid">
            <div style="BACKGROUND-COLOR: #6699cc;TEXT-ALIGN: center" id="confirmText">
            </div>
            <div style="Z-INDEX: 105;HEIGHT: 2%;BACKGROUND-COLOR: white;TEXT-ALIGN: center">
            </div>
            <div style="Z-INDEX: 105;BACKGROUND-COLOR: white;TEXT-ALIGN: center">
                <asp:Button ID="btnConfOK" Runat="server" Text="OK"></asp:Button>
                <asp:Button ID="btnConfCancel" Runat="server" Text="Cancel"></asp:Button>
            </div>
        </div>
<hr />


    <asp:Button ID="btDelete" runat="server" 
    OnClientClick="ShowMessage();"
    Text="Delete" UseSubmitBehavior="False" Width="200px"  />

現時点で他のいくつかのコントロールを削除しました。アラート「1」は表示されますが、「2」には到達しません。

これが CustomDialog スクリプトです。

var divWidth = '';
var divHeight = '';
var txtFirstButton = 'OK';
var txtSecondButton = 'Cancel'
    function DisplayConfirmMessage(msg,width,height)
    {
            // Set default dialogbox width if null
            if(width == null)
            divWidth = 180 
            else 
            divWidth = width;

            // Set default dialogBox height if null
            if(height == null)
            divHeight = 90 
            else 
            divHeight = height;


            // Ge the dialogbox object
            var divLayer = document.getElementById('divConfMessage');
            // Set dialogbox height and width
            SetHeightWidth(divLayer)
            // Set dialogbox top and left
            SetTopLeft(divLayer);

            // Show the div layer
            divLayer.style.display = 'block';
            // Change the location and reset the width and height if window is resized
            window.onresize = function() { if(divLayer.style.display == 'block'){ SetTopLeft(divLayer); SetHeightWidth(divLayer)}}
            // Set the dialogbox display message
            document.getElementById('confirmText').innerText = msg;
    }

    function SetTopLeft(divLayer)
    {
        // Get the dialogbox height
        var divHeightPer = divLayer.style.height.split('px')[0];

         // Set the top variable 
        var top = (parseInt(document.body.offsetHeight)/ 2) - (divHeightPer/2)
        // Get the dialog box width
        var divWidthPix = divLayer.style.width.split('px')[0];

        // Get the left variable
        var left = (parseInt(document.body.offsetWidth)/2) - (parseInt(divWidthPix)/2);
        // set the dialogbox position to abosulute
        divLayer.style.position = 'absolute';

        // Set the div top to the height 
        divLayer.style.top = top

        // Set the div Left to the height 
        divLayer.style.left = left;
    }
    function SetHeightWidth(divLayer)
    {
        // Set the dialogbox width
        divLayer.style.width = divWidth + 'px';
        // Set the dialogbox Height
        divLayer.style.height = divHeight + 'px'
    }
    function SetText(txtButton1,txtButton2)
    {
            // Set display text for the two buttons
            if(txtButton1 == null)
            document.getElementById('btnConfOK').innerText = txtFirstButton;
            else
            document.getElementById('btnConfOK').innerText = txtButton1;

                            // Set display text for the two buttons
            if(txtButton2 == null)
            document.getElementById('btnConfCancel').innerText = txtSecondButton;
            else
            document.getElementById('btnConfCancel').innerText = txtButton2;

    }
    function SetDefaultButton(defaultButton)
    {
            // Set the focus on the Cancel button
            document.getElementById(defaultButton).focus();
    }

この機能まで上がることに気づきました

function SetText(txtButton1,txtButton2)
    {
            alert("2");
            // Set display text for the two buttons

その後、迷子になり、txtButton1 から値を取得しようとしています。つまり、ASPX ページの Div タグが適切にレンダリングされませんでした:(

                if(txtButton1 == null)
            document.getElementById('btnConfOK').innerText = txtFirstButton;
            else
            document.getElementById('btnConfOK').innerText = txtButton1;

            alert("3");

* *編集* SetText 関数を削除すると、表示されますが、「OnClick」メソッドがトリガーされず、ページが更新されるだけです***

        <asp:Button ID="Button1" runat="server" CausesValidation="False" CssClass="gradientbutton"
    OnClick="btDelete_Click" OnClientClick="ShowMessage();this.disabled=true;this.value='Wait...';"
    Text="Delete" UseSubmitBehavior="False" Width="200px"  />

確認ボックスが表示されていても、ページでエラーが発生することに気付きました

findElementbyid(..) が null またはオブジェクトではないと言います

4

2 に答える 2

1

これだと思います

document.getElementById('btnConfOK')

.NETコントロールであるため、実際のIDではなくClientIDを使用する必要があります。IDは書き換えられます。だからそれは

document.getElementById('<%=btnConfOK.ClientID%>')
于 2012-05-02T10:44:43.190 に答える
0

たぶん、何らかの理由で、URL に「/」なしで src が追加されています...

この行を変更します。

<script type="text/javascript" language="JavaScript" src="CustomDialog.js"></script>

に：

<script type="text/javascript" language="JavaScript" src="./CustomDialog.js"></script>

これが機能しない場合は、コードに問題があるか、別の場所に配置しました 0_0

于 2012-05-02T10:19:25.003 に答える