Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
DR
3550
Jquery with Ajax
posted

I am using Jquery code,   txt.css("background", "red"); which I expect to color my WebNumericEditor  in red.

I put the DialogWindow in an Update panel, triggered by a button.

I press the button to show the dialog window.

 The window shows, but WebNumericEditor  is not red

Without the updatepanel, the code works properly.

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Pricer.aspx.cs" Inherits="OptionPricer.Pricer" %>

<%@ Register Assembly="Infragistics4.Web.v12.2, Version=12.2.20122.2054, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
    Namespace="Infragistics.Web.UI.EditorControls" TagPrefix="ig" %>
<%@ Register Assembly="Infragistics4.Web.v12.2, Version=12.2.20122.2054, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
    Namespace="Infragistics.Web.UI.ListControls" TagPrefix="ig" %>
<%@ Register Assembly="Infragistics4.Web.v12.2, Version=12.2.20122.2054, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
    Namespace="Infragistics.Web.UI" TagPrefix="ig1" %>
<%@ Register Assembly="Infragistics4.Web.v12.2, Version=12.2.20122.2054, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
    Namespace="Infragistics.Web.UI.LayoutControls" TagPrefix="ig" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var txt = $("#txtStrikeAmount")          
            txt.css("background", "red");
        });  
    </script>
</head>
<body>
    <form id="form1" runat="server" >
    <ig1:WebScriptManager ID="WebScriptManager1" runat="server">
    </ig1:WebScriptManager>
    <asp:UpdatePanel ID="UpdatePanel4" runat="server">
        <ContentTemplate>
              <ig:WebDialogWindow ID="WebDialogWindow1" CssClass="EditDialog" runat="server"  InitialLocation="Centered"
        Modal="True"  ViewStateMode="Enabled" Top="0">
        <Header>
            <MaximizeBox Visible="True" />
            <MinimizeBox Visible="True" />
            <MaximizeBox Visible="True" />
            <MinimizeBox Visible="True" />
            <MaximizeBox Visible="True" />
            <MinimizeBox Visible="True" />
            <MaximizeBox Visible="True" />
            <MinimizeBox Visible="True" />
            <MaximizeBox Visible="True" />
            <MinimizeBox Visible="True" />
            <MaximizeBox Visible="True" />
            <MinimizeBox Visible="True" />
        </Header>
        <Resizer Enabled="True" />
        <Resizer Enabled="True" />
        <Resizer Enabled="True" />
        <Resizer Enabled="True" />
        <ContentPane BackColor="White">
            <Template>
                <div dir="rtl" class="Edit-container">
                    <div class="StrikePremContainer">
                     
                        <div float="right">
                        </div>
                        <div class="StrikePremEdit">
                            <ig:WebNumericEditor  ID="txtStrikeAmount" runat="server"
                                ClientIDMode="Static" MinValue="0" Nullable="False">
                            </ig:WebNumericEditor>
                        </div>
                    </div>
                </div>
            </Template>
        </ContentPane>
        <Resizer Enabled="True" />
        <Resizer Enabled="True" />
    </ig:WebDialogWindow>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ButtonAdd" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>
    <asp:Button runat="server" Text="Show Window"
        ID="ButtonAdd" onclick="ButtonAdd_Click" />
    </form>
</body>
</html>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using Infragistics.Web.UI.EditorControls;
using Infragistics.Web.UI.GridControls;


namespace OptionPricer
{
    public partial class Pricer : System.Web.UI.Page
    {

        //List<OptionValues> mOptionValuesLs;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
                WebDialogWindow1.WindowState = Infragistics.Web.UI.LayoutControls.DialogWindowState.Hidden;
        }
        protected void ButtonAdd_Click(object sender, EventArgs e)
        {
            WebDialogWindow1.WindowState = Infragistics.Web.UI.LayoutControls.DialogWindowState.Normal;
        }

 

    }
}
P   בידך להשפיע על איכות הסביבה - אנא שקול את נחיצות ההדפסה

  • 29417
    Verified Answer
    Offline posted

    Hello drpoalim,

     

    Thank you for posting in our forum.

     

    The function you set in  $(document).ready will only be executed on a full page postback. During a ajax postback not all of page’s Dom is re-rendered so that function will not be executed.

    You can hook an event for the PageRequestManager’s endRequest event. It will be fired right after the update panel is finished with its ajax request. For example:

     

    $(document).ready(function () {

             

                var txt = $("#txtStrikeAmount");

                txt.css("background", "red");

     

                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

                function EndRequestHandler() {

                    var txt = $("#txtStrikeAmount");

                    txt.css("background", "red");

                }

            });

     

    Let me know if you have any questions.

     

    Best Regards,

    Maya Kirova

    Developer Support Engineer II

    Infragistics, Inc.

    http://ko.infragistics.com/support