Implementing an Ajax Live Form with NetAdvantage WebClient Controls - ASPX Code

Craig Shoemaker / Friday, November 21, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type="text/css">

    body

        font-family:Arial, Helvetica, Sans-Serif;

        margin-top:25px;

        font-size:1.8em;

        text-align:center;

    #published

        position:absolute;

        top:159px;

        width:140px;

        left:405px;

    #date, #dateControl

        position:relative;

        width:150px;

        margin-left:auto;

        margin-right:auto;

    .big

        font-size:4em;

    .none

        display:none;

    .liveInput, .liveInputDirty, .liveInputEdit

        border:1px solid #fff;

        text-align:center;

    .liveInput:hover

        border:1px solid #6c3;

    .liveInputDirty, .liveInputDirty *

        color:#ccc;

        border:1px solid #fcc;

    .liveInputEdit, .liveInputEdit *

        border:1px dashed #666;

    </style>

    <script type="text/javascript">

        var oldVal = "";

        var newDate = "";

        // title functions

        function txtTitle_Focus()

            var ctl = igedit_getById("<%= txtTitle.ClientID  %>");

            oldVal = ctl.getValue();

        function txtTitle_Click()

            var ctl = igedit_getById("<%= txtTitle.ClientID  %>");

            removeCssClass(ctl, "liveInput");

            addCssClass(ctl, "liveInputEdit");

        function txtTitle_Blur()

            var ctl = igedit_getById("<%= txtTitle.ClientID  %>");

            var val = ctl.getValue();

            addCssClass(ctl, "liveInput");

            removeCssClass(ctl, "liveInputEdit");

            if (val != oldVal)

                PageMethods.UpdateTitle($get("bookID").value, val, titleSuccess, fail);

                removeCssClass(ctl, "liveInput");

                addCssClass(ctl, "liveInputDirty");

        function titleSuccess(response)

            var ctl = igedit_getById("<%= txtTitle.ClientID  %>");

            removeCssClass(ctl, "liveInputDirty");

            addCssClass(ctl, "liveInput");

            if (!response)

                ctl.setValue(oldVal);

                alert("The server encountered an error while trying to update the title.");

        function fail(reponse)

            alert("Fail " + reponse);

        // date functions

        function date_Click(date)

            var dateControl = $get("dateControl");

            addCssClass(date, "none");

            removeCssClass(dateControl, "none");

            addCssClass(dateControl, "liveInputEdit");

        function wdcPublishDate_ValueChanged(oDateChooser, newValue, oEvent)

            var dt = new Date(newValue);

            newDate = (dt.getMonth()+1) + "/" + dt.getDate() + "/" + dt.getFullYear();

            var dateControl = $get("dateControl");

            removeCssClass(dateControl, "liveInputEdit");

            addCssClass(dateControl, "liveInputDirty");

            PageMethods.UpdatePublishDate($get("bookID").value, newValue, dateSuccess, fail);

        function dateSuccess(response)

            var dateControl = $get("dateControl");

            var date = $get("date");

            removeCssClass(dateControl, "liveInputDirty");

            removeCssClass(date, "none");

            addCssClass(dateControl, "none");

            if (response)

                date.innerText = newDate;

            else

                alert("The server encountered an error while trying to update the publish date.");

        // utility functions

        function addCssClass(ctl, cssName)

            var c = (ctl.Element) ? ctl.Element : ctl;

            c.className += (" " + cssName + " ");

        function removeCssClass(ctl, className)

            var c = (ctl.Element) ? ctl.Element : ctl;

            var classes = c.className.split(" ");

            var cssClass = "";

            for (var i = 0; i < classes.length; i++)

                if (classes[ i ] != className)

                    cssClass += classes[ i ] + " ";

            c.className = cssClass;

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <asp:ScriptManager EnablePageMethods="true" runat="server" />

        <input type="hidden" id="bookID" value="<%= this.book.ID.ToString() %>" />

        <div><igtxt:WebTextEdit

            ID="txtTitle"

            onfocus="txtTitle_Focus();"

            onblur="txtTitle_Blur();"

            onclick="txtTitle_Click();"

            CssClass="liveInput big"

            Width="800"

            runat="server" /></div>

        <div id="published">Published:</div>

        <div id="dateControl" class="none">

            <igsch:WebDateChooser Width="300px" ID="wdcPublishDate" runat="server" >

                <ClientSideEvents ValueChanged="wdcPublishDate_ValueChanged" />

            </igsch:WebDateChooser>

        </div>

        <div id="date" class="liveInput" onclick="date_Click(this);">

            <%= this.book.PublishDateShort %>

        </div>

    </form>

</body>

</html>