1

サイドバーとグリッドを備えた 2 列のレイアウト ページがあります。

サイドバーにはフィルターが含まれており、ユーザーがフィルターをクリックすると、ajax 要求が行われ、グリッドが新しいデータで更新されます (グリッドのみが再作成されます)。

すべてがすべてのブラウザーで完璧に機能しますが、IE9 ではユーザーがフィルターをクリックするたびにサイドバーとヘッダーが適切にレンダリングされません (ヘッダーが消え、サイドバーが部分的に表示されます)。

前：

ここに画像の説明を入力

後：

ここに画像の説明を入力

ウィンドウのサイズ変更が役立つことがわかったので、ユーザーが IE9 でフィルターをかけるたびにウィンドウのサイズを変更する js 関数を作成しました。

var isResized = false;
//Solves a bug with IE rendering where the header dissappears after filtering 
function resizeWindow(){    
    if ( $.browser.msie)
    {
        isResized = true;
        window.resizeTo(window.outerWidth,window.outerHeight - 10); 
    }
}

//Solves a bug with IE rendering where the header dissappears after filtering
$(window).resize(function(){
    try{
        //this will only be true if the resize was made by the script, if a user resized
        //the browser this would e false and nothing will happen
        if(isResized){
            isResized = false;
            window.resizeTo(window.outerWidth,window.outerHeight + 10); 
        }
    }
    catch(err){}
});

問題は、機能する場合と機能しない場合があることです。より良い方法はありますか？JS でページを再レンダリングすることは可能ですか?

サイドバー HTML フラグメント:

<section>
                <div id ="mySelections" class="selection">
                    <h3>
                        <label I18N="MY_SELECTION"></label>
                        <span></span>
                    </h3>
                    <a href="#" id="clearAll" data-role="button" data-theme="g" I18N="CLEAR_ALL"></a>
                    <ul id="filterList">
                        <li class="status">
                        </li>
                        <li class="serviceFilter">

                        </li>
                        <li class="favorites">

                        </li>
                    </ul>
                    <!-- end .status -->
                </div>
                <!-- end .selection -->
                <div class="contractsSummary">
                    <h3 I18N="CONTRACTS_LIST_SERVICES_TITLE"></h3>
                    <div id="status" data-type="int" data-operator="eq" >
                        <p id ="red" class="filter">
                            <label data-color="red" data-col="ServiceComplianceCurrentPeriod/Severity" data-val="1" I18N="STATUS_RED"></label>
                            <span class="circle red"></span>
                            <span class="quantity"></span>
                            <span class="percentage" ></span>
                        </p>
                        <p id = "yellow" class="filter">
                            <label data-color="yellow" data-col="ServiceComplianceCurrentPeriod/Severity" data-val="2" I18N="STATUS_YELLOW"></label>
                            <span class="circle yellow"></span>
                            <span class="quantity"></span>
                            <span class="percentage"></span>
                        </p>
                        <p id="green" class="filter">
                            <label data-color="green" data-col="ServiceComplianceCurrentPeriod/Severity" data-val="3" I18N="STATUS_GREEN"></label>
                            <span class="circle green"></span>
                            <span class="quantity"></span>
                            <span class="percentage"></span>
                        </p>
                        <!--<p id="all" class="filter">
                            <label data-color="" data-col="" data-val="" I18N="ALL"></label>
                            <span></span>
                        </p>-->
                    </div>
                    <!-- end #status -->
                    <div id="favorites" data-type="favorite" data-operator="eq">
                        <p class="filter">
                            <label data-num="" data-col="Id" I18N="FAVORITES"></label>
                            <span></span>
                        </p>
                    </div>
                </div>
                <!-- end .contractsSummary -->
                <div class="filters">
                    <ul>
                        <li>
                            <div data-role="fieldcontain" class="textFilter" id="serviceFilter" data-col="Name" data-type="string" data-operator="eq" data-text="COLUMN_HEADER_SERVICE"> 
                                <input placeholder="" data-type="search" class="filter" value="" I18N="FILTER_ITEMS" id="service-search"/>
                            </div>
                            <!-- end #textFilter -->
                        </li>
                    </ul>
                </div>
                <!-- end .filters -->
            </section>
4

1 に答える 1

0

それを見つけた ：）

私がする必要があったのは、それを非表示にしてから再度表示することだけでした:

$('section').hide();
$('section').show();
于 2012-11-19T09:24:02.720 に答える