CODEWITHSUNDEEP
jqueryasp.netjquery-uicombobox
WraithNath
WraithNath

Reputation: 18013

jQuery ComboBox losing styling after postback

This is a follow up to this question: dropdownlist to combobox

I have a Drop Down List that is being converted to jQuery combobox after the page is loaded. I have amended the javascript to caused a post back when an item is selected with the code below (extract):

note: __doPostBack('<%= DropDownList1.UniqueID %>', '');

                 select: function (event, ui) {
                     ui.item.option.selected = true;
                     self._trigger("selected", event, {
                         item: ui.item.option
                     }
                     );
                     __doPostBack('<%= DropDownList1.UniqueID %>', '');
                 },

This works and fires my event in the code behind. however the ComboBox turns back to the asp.net DropDownList. The jQuery document ready does not fire again and restyle the combobox. Am I missing something??

full source: aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage2.aspx.cs" Inherits="Sicon.Web.WAP.App.Pages.TestPage2" %>

<%@ Register Src="../WebControls/AdminControls/UserItemValueBuilder.ascx" TagName="UserItemValueBuilder"
    TagPrefix="uc1" %>
<%@ Register Src="../WebControls/ModalMessageBox.ascx" TagName="ModalMessageBox"
    TagPrefix="uc2" %>
<%@ Register Src="../WebControls/PageControls/BookOnJob.ascx" TagName="BookOnJob"
    TagPrefix="uc3" %>
<!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>
    <link href="../App_Themes/Default/Style.css" rel="stylesheet" type="text/css" />
    <link href="../JavaScripts/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<script src="../JavaScripts/jquery.min.js" type="text/javascript"></script>
<script src="../JavaScripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
    (function ($) {
        $.widget("ui.combobox", {
            _create: function () {
                var self = this,
                     select = this.element.hide(),
                     selected = select.children(":selected"),
                     value = selected.val() ? selected.text() : "";
                var input = this.input = $("<input>")
                     .insertAfter(select)
                     .val(value)
                     .autocomplete({
                         delay: 0,
                         minLength: 0,
                         source: function (request, response) {
                             var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                             response(select.children("option").map(function () {
                                 var text = $(this).text();
                                 if (this.value && (!request.term || matcher.test(text)))
                                     return {
                                         label: text.replace(
                                             new RegExp(
                                                 "(?![^&;]+;)(?!<[^<>]*)(" +
                                                 $.ui.autocomplete.escapeRegex(request.term) +
                                                 ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                             ), "<strong>$1</strong>"),
                                         value: text,
                                         option: this
                                     };
                             }));
                         },
                         select: function (event, ui) {
                             ui.item.option.selected = true;
                             self._trigger("selected", event, {
                                 item: ui.item.option
                             }
                             );
                             __doPostBack('<%= DropDownList1.UniqueID %>', '');
                         },
                         change: function (event, ui) {
                             if (!ui.item) {
                                 var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                                     valid = false;
                                 select.children("option").each(function () {
                                     if ($(this).text().match(matcher)) {
                                         this.selected = valid = true;
                                         return false;
                                     }
                                 });
                                 if (!valid) {
                                     // remove invalid value, as it didn't match anything
                                     $(this).val("");
                                     select.val("");
                                     input.data("autocomplete").term = "";
                                     return false;
                                 }
                             }
                         }
                     })
                     .addClass("ui-widget ui-widget-content ui-corner-left");

                input.data("autocomplete")._renderItem = function (ul, item) {
                    return $("<li></li>")
                         .data("item.autocomplete", item)
                         .append("<a>" + item.label + "</a>")
                         .appendTo(ul);
                };

                this.button = $("<button type='button'>&nbsp;</button>")
                     .attr("tabIndex", -1)
                     .attr("title", "Show All Items")
                     .insertAfter(input)
                     .button({
                         icons: {
                             primary: "ui-icon-triangle-1-s"
                         },
                         text: false
                     })
                     .removeClass("ui-corner-all")
                     .addClass("ui-corner-right ui-button-icon")
                     .click(function () {
                         // close if already visible
                         if (input.autocomplete("widget").is(":visible")) {
                             input.autocomplete("close");
                             return;
                         }

                         // work around a bug (likely same cause as #5265)
                         $(this).blur();

                         // pass empty string as value to search for, displaying all results
                         input.autocomplete("search", "");
                         input.focus();
                     });
            },

            destroy: function () {
                this.input.remove();
                this.button.remove();
                this.element.show();
                $.Widget.prototype.destroy.call(this);
            }
        });
    })(jQuery);

    $(document).ready(function () {
        $("#DropDownList1").combobox();
    });

</script>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div id="demo">
        <asp:UpdatePanel runat="server" ID="upMain" UpdateMode="Always">
            <ContentTemplate>
                <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
                    AutoPostBack="True">
                </asp:DropDownList>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <div>
    </div>
    </form>
</body>
</html>

cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Sicon.Web.WAP.Objects.Database;
using System.Data;
using System.Data.SqlClient;
using Objects.Enums;
using Objects.Sage;
using Objects.Engine;
using System.Collections.Generic;

namespace App.Pages
{
    public partial class TestPage2 : Sicon.Web.WAP.Objects.Controls.UserPresencePage
    {


        protected void Page_Load( object sender, EventArgs e )
        {
            if (!Page.IsPostBack)
            {
                DropDownList1.DataSource = Objects.Database.User.Users;
                DropDownList1.DataTextField = "UserName";
                DropDownList1.DataBind();
            }
        }

        protected void DropDownList1_SelectedIndexChanged( object sender, EventArgs e )
        {
            string user = DropDownList1.SelectedValue;
        }


    }
}

Upvotes: 2

Views: 5453

Answers (2)

John Kalberer
John Kalberer

Reputation: 5790

Add this to your update panel

<asp:UpdatePanel runat="server" ID="upMain" UpdateMode="Always" OnUpdateCompleteClientScript="setupPage();">
            </asp:UpdatePanel>

And use this as your script

function setupPage() {
    $("#DropDownList1").combobox();
}    

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

Upvotes: 4

WraithNath
WraithNath

Reputation: 18013

Solution is to add a javascript page load event and call the configuration function again ( thanks in part to John Kalberer)

function configurePage() {
        $("#DropDownList1").combobox();
    }

    function pageLoad(sender, args) {
        configurePage();
    }

Upvotes: 1

Related Questions