CODEWITHSUNDEEP
jqueryasp.netupdatepanel
Wahtever
Wahtever

Reputation: 3678

jquery and asp.net update panel conflict

i have a text-box within an update panel that is called on a button click, and this is done by jquery but becuase the text-box has an ontextchanged event i added to the update-panel and the jquery doesn't only works one time after that it stopped.

here is my aspx code:

<asp:UpdatePanel ID="up2" runat="server">
            <ContentTemplate>
                <asp:TextBox ID="notepad" runat="server" AutoPostBack="true" OnTextChanged="insNotes"  
                    TextMode="MultiLine" CssClass="notepad"  />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="notepad" EventName="TextChanged" />
            </Triggers>
        </asp:UpdatePanel>

and here is my jquery:

$(function () {
$("#padToggle").toggle(function (pad) {
    $(".notepad").css("z-index", "4").animate({ top: "5px" }, 1000);
    $("#padToggle").css("z-index", "4").animate({ top: "5px" }, 1000);
    $(".notepad").focus();
}, function (pad) {
    $(".notepad").animate({ top: "95%" }, 1000);
    $("#padToggle").animate({ top: "92.5%" }, 1000);
});
$(".notepad").blur(function (pad) {
    $(".notepad").animate({ top: "95%" }, 1000);
    $("#padToggle").animate({ top: "92.5%" }, 1000);
    $(".notepad").blur();
});

});

i tried to add a pageLoad() Ajax function but still didn't work, also tried to bind() and unbind() but it still didn't work.

what is the problem , thanks.

Upvotes: 0

Views: 2327

Answers (2)

Kon
Kon

Reputation: 27451

Try using live(): 

$(".notepad").live ('blur', function () {
    $(".notepad").animate({ top: "95%" }, 1000);
    $("#padToggle").animate({ top: "92.5%" }, 1000);
    $(".notepad").blur();
});

This will trigger the event handler for lost focus of the existing notepad element, as well as any created (via update panel refresh) in the future.

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1039438

The reason why this might happen is because once you use the UpdatePanel it refreshes the textbox from the DOM which removes all events you have associated with it. One possibility is to use the .live() method to subscribe for events with this textbox.

For example instead of:

$(".notepad").blur(function (pad) {
    $(".notepad").animate({ top: "95%" }, 1000);
    $("#padToggle").animate({ top: "92.5%" }, 1000);
    $(".notepad").blur();
});

you could try this:

$('.notepad').live('blur', function (pad) {
    $('.notepad').animate({ top: "95%" }, 1000);
    $('#padToggle').animate({ top: "92.5%" }, 1000);
    $('.notepad').blur();
});

In fact the .delegate() method is recommended to be used compared to .live().

Upvotes: 2

Related Questions