2

ここでの私の最初の質問なので、優しくしてください:)。

要素の css の変更とその更新にこの問題があります。ajax リクエストを使用して webforms アプリケーションを作成しています。私の問題は、誰かがツリー ビューからレポートを選択すると、読み込み中のサインを含む gif が表示され、データが受信された後にそれが表示されることです。Firefox と Opera では正常に動作しますが、雑用やサファリでは動作しません。コードは次のとおりです。

これは、誰かがツリー ノードをクリックしたときに起動されるメソッドです。 this.hideElements(); var id = node.getId().substr(2);

var client = new CAjaxClient();
var data;

client.addParameter(new CKeyValuePair('ReportID', id));

client.postCallBack('/ajaxpages/Reports.aspx', 'GetReportFilters', this.dataRecieved);

filterGenerator.setReportID(id);

これはメソッド hideElements()

$('#FiltersContainer').css('visibility', 'hidden');
$('#ActionsContainer').css('visibility', 'hidden');
$('#loadingDiv').css('visibility', 'visible');
$("input[id$='Date']").parent().css('visibility', 'hidden');

これは ajax postBack メソッドです

if (this.readyState == 4 && this.status == 200) {
$('#FiltersContainer').css('visibility', 'visible');
$('#ActionsContainer').css('visibility', 'visible');
$('#loadingDiv').css('visibility', 'hidden');
var data = eval(this.responseText);
filterGenerator.processFiltersData(data);

データとすべてが順番に返されます。リクエスト時にブラウザがフリーズし、データが返されたときに css 状態がプロセス全体の最後になります。読み込み中の div は表示されません。domelement.style を変更して再描画を強制しようとしましたが、効果はありませんでした。chromeデバッガーでコードを1行ずつ実行すると、すべてが完全にうまくいきます。できれば助けてください。

Html コード (vio:TreeView は独自の ASP コントロールです):

<div id="pageHeader" style="display:inline-block">

        <div id="headerImageDiv" style="float:left; margin-left:15px; margin-top:5px;">
            <img src="style/default/printerLarge.png" alt="" />
        </div>

        <div id="pageTitleDiv" style="float:left">
            <span style="display:block; margin-top:20px;margin-left:10px;color:#78b4bb; font-size:20px;">Reports And Analyses</span>
            <span style="display:block; margin-top:20px;margin-left:10px;font-size:18px;">Select a report</span>   
        </div>

    </div>
    <br />
    <div id="mainPane" style="display:inline-block;width:100%;">
        <div id="readerTreeContainer" style="float:left;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right:none; border-width:1px; overflow : auto;width:300px;height:auto; background-color:white;">
             <vio:TreeView ID="TreeView" runat="server"
                     Width="298" Height="500"
                     ActionListener="ReportsGeneralListener"
                     ActionListenerScript="ReportsGeneralTree.js"
                     GlobalTreeviewName="reportsTreeview">
             </vio:TreeView>

        </div>

        <div id="FiltersContainer" style="position:relative;visibility:hidden;float:left;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left:solid 1px; border-width:2px; overflow : auto;width:30%;height:500px; background-color:#dbdae4;">
            <div id="filterColumnOne" style="float:left;width:50%;height:100%;border-right:solid 1px;border-left:none;">

            </div>
                <div id="filterColumnTwo" style="float:left;width:49%;height:100%;">
            </div>
            <div id="loadingDiv" style="z-index:10;position:absolute;top:50%;left:50%;margin: -35% 0 0 -35%;z-index:100001;height:316px;width:396px;">
                <div  style="position:relative;display:block">
                     <img src="style/default/loading.gif" alt="" style="position:absolute;left:0px;top:0px;z-index:-1;"/>
                    <span style="display:block;text-align:center;padding-top:80px;font-size:25px;font-weight:bold;">Loading Report</span>
               </div>
            </div>
        </div>

        <div id="ActionsContainer" style="visibility:hidden;float:left;border-left-style:none;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-width:2px; overflow : auto;width:200px;height:200px; background-color:#abe9e7;">
              <div style="display:block;border-bottom:solid 1px;height:50%">
                  <div style="position:relative; height:100%;">
                      <div style="position:absolute;top:50%;left:50%; height:72px;margin: -35px 0 0 -35%;">
                          <img src="style/default/document.png" alt="" style="float:left;margin-right:10px;"/>
                          <button type="button" style="margin-top:18%;height:30px;" onclick="print();">Print</button>
                      </div>
                  </div>

              </div>

              <div style="display:block;border:none;height:49%;">
                  <div style="position:relative; height:100%;">
                      <div style="position:absolute;top:50%;left:50%; height:72px;margin: -35px 0 0 -35%;">
                          <img src="style/default/application_pdf.png" alt="" style="float:left;margin-right:10px;height:72px;"/>
                          <button type="button" style="margin-top:18%;height:30px;">PDF</button>
                      </div>
                  </div>
              </div>
        </div>

    </div>
4

1 に答える 1

0

代わりに .hide と .show を試してください。それらはクロスブラウザで動作します。

jQuery APIを見る

あなたの問題は次のとおりだと思います：

<div stuff I'm hiding>
    <div loading screen>

あなたが提供したものの実際のデモについては、こちらを参照してください。スタイルから inline visibility:hidden を削除し (CSS ファイルに分割することをお勧めします。読めないようになっています)、隠していた div 内から読み込み div を取得しました。

于 2012-12-13T14:31:34.473 に答える