jQuery Replace label with ASP.NET dropdownlist

Question

I am building an editable form using data from my database which requires the use of an ASP.NET control. I got this working in HTML, but when I added the .NET part, I got stuck.

Here's the situation: I have a label displayed on the page with an edit button below it. What's supposed to happen is that once the edit button is pressed, the label becomes a .NET dropdown list with data from the database. Once the user clicks save, the dropdown list will go back into a label displaying the selected value.

My problem is that when you click the edit button, the dropdown list never appears.

Here's the code:

.ASCX

<li>
    Campus
    <br />
    <span class="datainfoDropdown">
        <strong>
            <asp:Literal ID="CampusAttended" runat="server" ClientIDMode="Static"/>
        </strong>
        <asp:DropDownList ID="ProfileCampusDropDown" runat="server" ClientIDMode="Static" style="display:none;" ></asp:DropDownList>
    </span>
    <a href="#" class="editlinkDropdown">Edit Info</a>
    <a class="savebtnDropdown">Save</a>
</li>

Javascript

$(".editlinkDropdown").on("click", function (e) {
    e.preventDefault();
    var datasets = $(this).prevAll(".datainfoDropdown");
    var savebtn = $(this).next(".savebtnDropdown");
    datasets.each(function () {
        var theid = $(this).attr("id");
        var currval = $(this).text();
        var dropDown = $('#ProfileCampusDropDown').html();
        $('.datainfoDropdown').html(dropDown);
    });

    $(this).css("display", "none");
    savebtn.css("display", "block");
});

$(".savebtnDropdown").on("click", function (e) {
    e.preventDefault();
    var elink = $(this).prev(".editlinkDropdown");
    var datasets = $(this).prevAll(".datainfoDropdown");
    datasets.each(function () {
        var newid = $(this).attr("id");
        var einput = $("#" + newid + "-form");
        var newval = $('#ProfileCampusDropDown :selected').text();
        //einput.remove();
        $(this).html('<strong>' + newval + '</strong>');
    });

    $(this).css("display", "none");
    elink.css("display", "block");
});

How do I get my edit button to display the dropdown list?

Answer 1

Looking at your code, what you want to achieve is not really clear. I must confess I don't see the point of the ids and the "-form". I must have missed something.

Anyway I guess this should do what you describe (provided ProfileCampusDropDown and savebtnDropdown start with a display:none; )

    $(".editlinkDropdown").on("click", function (e) {
        e.preventDefault();
        $(this).prevAll(".datainfoDropdown").find("strong").hide();
        $('#ProfileCampusDropDown').show();
        $(this).hide();
        $(this).next(".savebtnDropdown").show();
    });

$(".savebtnDropdown").on("click", function (e) {
    e.preventDefault();
    var strong = $(this).prevAll(".datainfoDropdown").find("strong");
    strong.html($('#ProfileCampusDropDown :selected').text());
    strong.show();
    $('#ProfileCampusDropDown').hide();

    $(this).hide();
    $(this).prev(".editlinkDropdown").show();
});

Hope this will help

Answer 2

I don't know where you have this in your ASP.NET, but there's a good chance that the ID's you set for your asp.net controls are being changed by the server.

If this is the case set the CssClass attribute of your control and use the $(".class") selector of jQuery.