jQuery selectable causes full postback in ASP.NET Ajax application

Question

I want my selectable to work as an autopostback control, when something is selected the script clicks on a button and postback the values of the selectable. But it doesnt play to well with my ASP.NET Ajax and UpdatePanels. Sometimes a full postback occurs, and not a partial one.

My conclusions from my debugging is that jQuery does something behind the scene while the stop function runs. If I add an alert to halt the stop function, the partial postback works fine.

To add some more confusion, this works in IE9 and Chrome , but not in IE7 or IE8 . So it also might be browser specific.

jQuery version is: v1.6.2

Script:

<script language="javascript">
    $('.selectable').live("mouseover", function () {
        if (!$(this).data("selectable-init")) {
            $(this).data("selectable-init", true);

            $(this).selectable({
                filter: '.item',
                stop: function () {
                    $("#<% =btnPostback.ClientID %>").click();                        
                }
            });
        }
    });    
</script>

HTML:

<div class="selectable">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:Literal ID="litIsPostback" runat="server"></asp:Literal>
        <asp:Button ID="btnPostback" runat="server" OnClick="btnPostback_OnClick" />
    </ContentTemplate>
</asp:UpdatePanel>

Code behind:

protected void btnPostback_OnClick(object sender, EventArgs e)
{
    litIsPostback.Text = ScriptManager.GetCurrent(this).IsInAsyncPostBack.ToString();
}

Answer 1

This is the closest to a solution I've come up with.

        $('.selectable').selectable({
            filter: '.item',
            stop: function (event, ui) {
                $('.ui-selectable-helper').remove();

                setTimeout(function () {
                    $("#<% =btnPostback.ClientID %>").click();
                }, 1);
            }
        });

By removing the helper (lasso) before the postback, I'm able to drag from top to bottom, but I cant do it the other way. In jQuery the helper is removed after the stop event.

Im not sure why setTimeout works, but it fixes the problem with full postback aswell.