开发者

How to handle javascript on page with thousands of checkboxes in IE6

I am having problems with code written in ASP.NET with some javascript, doing a postback to the server for changes made to a grid of approximately 8,000 checkboxes. The this is, while I was testing it, everything seemed ok with approximately 1,000 checkboxes with IE6. But now, having imported the real data, I am stuck with the slowness of IE6 and the reality that the code I wrote is not going to cut it.

I have to use IE6 to test it because unfortunately, the client demands the web app to be fully functional with it. How can I boost speed of the page?

EDIT

I counted the rows and colums: 66 * 110 = 7260 checkboxes on the page.

CODE

[...]

<asp:Repeater ID="repChkAssociations" runat="server" DataSource="<%#Failures%>">
<ItemTemplate>
    <td style="text-align: center;">
        <asp:CheckBox ID="cbEqClassFailure" runat="server" Enabled="<%#AllowEditAssociations%>"
            ToolTip='ommited code'
            Checke开发者_如何学编程d='ommited code'
            OnClick="setIsDirty(true);"
            >
        </asp:CheckBox>
    </td>
</ItemTemplate>

[...]

<script src="~/Scripts/jquery-1.6.1.min.js"></script>

<script type="text/javascript">

    var isDirty;
    var identifiter;

    function SaveAssociation() {
        setIsDirty(false);
    }

    // check if the page has been modified
    function CheckIsDirty(_id) {
        setID(_id);
        if (getIsDirty() == true) {
            ShowConfirmPopup();
        } else {
            ShowGridPopup(); 
        }
    }

    function ShowGridPopup() {
        if (getID() == "EqClasses") {
            ShowClassPopup();
        } else if (getID() == "Failures") {
            ShowFailurePopup();
        }
    }

    // isDirty setter        
    function setIsDirty(changeVal) {
        isDirty = changeVal;
    }

    // isDirty getter
    function getIsDirty() {
        return isDirty;
    }

function ClickSaveButton() {
    var _id = $('a[id$="butSaveAssociation"]').attr("ID");
    __doPostBack(_id.replace("_", "$"), '');
}

function ShowClassPopup() {
    var _id = '<%= eqClassPopup.BehaviorID %>';
    var modal = $find(_id);
    modal.show();
}

function ShowFailurePopup() {
    var _id = '<%= failurePopup.BehaviorID %>';
    var modal = $find(_id);
    modal.show();
}

function ShowConfirmPopup() {
    var _id = '<%= confirmPopup.BehaviorID %>';
    var modal = $find(_id);
    modal.show();
}
</script>


Granted, I don't know what you're doing, but having 8,000 check boxes on one page seems pretty user-unfriendly to me. Consider adding pagination & filtering to keep the number of check boxes per page under, perhaps, 100?

EDIT - You also seem to think this is an IE6 problem. I'd hazard a guess that any browser would have troubles with the volume you're talking.

DOUBLE EDIT - Okay, after looking over your code, I'm certain the only way to improve speed is to reduce the number of controls on the website. You're not doing anything crazy in the JS.


Echoing @Matt Grande - you're trying to do something impossible. IE6 runs javascript really, really slowly. It's also going to be proportionally slower on the likely ancient hardware your end-user may be working on. It's damn near impossible to avoid memory leaks no matter what you do. This just isn't a good approach.

If you really need 6,000 checkboxes on a page, then consider an alternative approach. For example, use a single image with all the checkboxes pre-rendered. Capture mouse click events, figure out which box they checked using the mouse position, render a checkmark with VML, and save the information as an array or JSON in a hidden field.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜