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?

jbl · Accepted Answer · 2013-03-01 15:22:22Z

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

Michiel · Accepted Answer · 2013-03-01 15:07:20Z

0

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.

answered Mar 1, 2013 at 15:07

Michiel

4,2803 gold badges32 silver badges44 bronze badges

1 Comment

jbl Over a year ago

I guess there is no problem there. The controls have ClientIDMode="Static".

Collectives™ on Stack Overflow

jQuery Replace label with ASP.NET dropdownlist

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related