Duplicate code in $(document).ready() and prm.add_endRequest()

Question

edit: after i update the latest code and now i see there are two "characters count" instead of showing only one. does it mean its executing twice the same code? document.ready and add_endrequest?

  $('[id*="txtNewComments"]').charCount({
            allowed: 300,
            warning: 15,
            counterText: 'Characters left: '
        });

i am using asp.net page with updatepanel and some jquery when i start using updatepanel my jquery and javascript function stop working and i dont see any action ... after i searched i found this: jQuery $(document).ready and UpdatePanels? link which is very informative but i have a question.

below is the code that does not work if i have a updatepanel...

$(document).ready(function() {

     $('[id*="txtNewComments"]').charCount({
            allowed: 300,
            warning: 15,
            counterText: 'Characters left: '
        });

     ..........
     ..........
});

//update:

function UpdateEmployee(....) {}

so if i go ahead with the recommended way then i have to have two set of each script one is within the docuement.ready and other set of script is with in the endRequest some thing like this below is working with update panel if i follow this pattern.

$(document).ready(function() {
    // bind your jQuery events here initially
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    // re-bind your jQuery events here
});

my question is: is there a way to have one set of script rather then one in document.ready and another in endrequest ?... its a pain to maintain two set of scripts.

any thoughts?

update with update panel

<asp:ScriptManager runat="server" />
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <asp:Repeater runat="server" ID="Repeater1" OnItemCommand="OnItemCommand" OnItemDataBound="OnItemDataBound">
                <HeaderTemplate>
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <th></th>
                            <th>First Name</th>
                            <th>Last Name</th>
                        </tr>
                </HeaderTemplate>
                <ItemTemplate>
                    <tr>
                        <td>
                            <asp:ImageButton ID="Edit" ImageUrl="~/Images/EditDocument.png" runat="server" CommandName="edit" />
                            <asp:ImageButton ID="Delete" ImageUrl="~/Images/Delete_black_32x32.png" runat="server"
                                CommandName="delete" />
                        </td>
                        <td>
                            <asp:Label runat="server" ID="firstName"><%# Eval("FirstName") %></asp:Label>
                            <asp:PlaceHolder runat="server" ID="firstNameEditPlaceholder" />
                            <input type="hidden" runat="server" id="firstNameHidden" visible="false" />
                        </td>
                        <td>
                            <asp:Label runat="server" ID="lastName"><%# Eval("LastName") %></asp:Label>
                            <asp:PlaceHolder runat="server" ID="lastNameEditPlaceholder" />
                            <input type="hidden" runat="server" id="lastNameHidden" visible="false" />
                        </td>
                    </tr>
                </ItemTemplate>
                <FooterTemplate>
                    <tr>
                        <td>
                            <asp:ImageButton ID="Delete" ImageUrl="~/Images/112_Plus_Blue_32x32_72.png" runat="server"
                                OnClick="OnAddRecord" />
                        </td>
                        <td><asp:TextBox runat="server" ID="NewFirstName" /></td>
                        <td><asp:TextBox runat="server" ID="NewLastName" /></td>
                    </tr>
                    </table>
                </FooterTemplate>
            </asp:Repeater>
        </ContentTemplate>
    </asp:UpdatePanel>

Since you're already using jQuery, why not replace the `UpdatePanel` with a `$.ajax()` call? — jrummell, May 15 '12 at 14:38
If you include how you are using your `UpdatePanel`, I can point you in the right direction. — jrummell, May 15 '12 at 14:49
How are you using the UpdatePanel? That is, why did you choose to use a partial postback over a full page postback? — jrummell, May 15 '12 at 14:53

score 2 · Accepted Answer · answered May 14 '12 at 19:36

Try this:

$(document).ready(function() {
    bindJqueryFeatures();
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    bindJqueryFeatures();
});


function bindJqueryFeatures(){
    //bind your jQuery events here initially 
}

Now, if you want to change or add some jQuery features just insert code in bindJqueryFeatures() function so you don't need to dublicate your code in both methods: $(document).ready() and prm.add_endRequest().

Also it can be usefull.

Is that what you need?

Duplicate code in $(document).ready() and prm.add_endRequest()

1 Answers1