asked on

an editable table with some fields using drop down lists

Hi all,
I am building an MVC app in VS2012 and have a editable table using Jquery but now the client wants to replace some of the textboxes with dropdown lists but this in not as easy as I thought (well not for me).

This is a section of the table to give an idea how I'm trying to do it

<td style="width:100px;" class="agent"; id = "AgentName">
                        <span class="item-display">@Model.getConfirmationData[idx].Agent_Name.Trim()</span> 
                        <span class="item-field">@Html.TextBoxFor(modelItem => Model.getConfirmationData[idx].Agent_Name, new { @class = "AgentName", name = "getConfirmationData[" + idx + "].AgentName" })</span>
                    </td>
                    <td class="hide">
                        @Html.HiddenFor(modelItem => Model.getConfirmationData[idx].Agent__, new { name = "getConfirmationData[" + idx + "].Agent__" })
                    </td>
                    <td style="width:30em;" class="agent"; id = "Agent2Name">
                        <span class="item-display">@BlankToChar(Model.getConfirmationData[idx].Agent_2_Name)</span>
                        <span class="item-field">@Html.TextBoxFor(modelItem => Model.getConfirmationData[idx].Agent_2_Name, new { @class = "AgentName" })</span>
                    </td>
                    <td class="hide">
                        @Html.HiddenFor(modelItem => Model.getConfirmationData[idx].Agent_2__, new { name = "getConfirmationData[" + idx + "].Agent_2__" })
                    </td>
                    <td style="width:30em;" class="agent"; id = "Agent3Name">
                        <span class="item-display">@BlankToChar(Model.getConfirmationData[idx].Agent_3_Name)</span>                    

                        <span class="item-field"> @Html.DropDownListFor(m => m.AgentID, new SelectList(Model.getAgentDropDown, "Value", "Text", Model.AgentID), "--Select Agent--", new { @class = "agentdropdown" })</span>
                    </td>

Open in new window

and this is the jquery to get it to work.

$(document).ready(
      $(document.documentElement)
        .on("click", "span.item-display", function (event)
        {
            $(this).parent().closest('tr').addClass('blue')
           var originalcontent = $(this).text();
            $(event.currentTarget)
              .hide()
              .next("span.item-field")
              .show()
              .find(":input:first")
              .focus()
              .select();
        })
        .on("keypress", "span.item-field", function (event)
        {
            if (event.keypress != 13 && event.which != 13)  
                return;
            event.preventDefault();    
            $.ajax({ type: "POST", url: "/Merchant/Confirmation/", data: $("#formConfirmation").serialize() })
            var $field = $(event.currentTarget),
            $display = $field.prev("span.item-display");   
            $display.html($field.find(":input:first").val());
            $display.show();
            $field.hide(); 
        })
         .on("blur", "span.item-field", function (event) {
             var $field = $(event.currentTarget),
              $display = $field.prev("span.item-display")
             $(this).parent().closest('tr').removeClass('blue')
             $display.show();
             $field.hide();
         }) 
     );
    $(".agentdropdown").on("change", function () {    
        $display = (this).parent().next("span.item-display");
        $display.html($("option:selected", $(".agentdropdown")).text());
        $(this).hide();
        $display.show();
    });

Open in new window

The last section "$(".agentdropdown").on("change", function () { " is what I was trying but failing miserably at.

The fields that use the "Enter" button when in a text box to save the data works great.
I just can't get the dropdown to behave the way I want it. If I select a name from the dropdown I have to press enter to change back to display but when I do it doesn't display the name but instead the Agent ID (which is the value of the dropdown) but I want to display the text. I'm probably over complicating it but I can't think of any other way to do it.

As usual any help is highly appreciated

Bob Learned

I am confused...I don't see any element in the HTML with the CSS class "agentdropdown"...

Niall Gallagher

ASKER

Bob,
The very last <span>
<span class="item-field"> @Html.DropDownListFor(m => m.AgentID, new SelectList(Model.getAgentDropDown, "Value", "Text", Model.AgentID), "--Select Agent--", new { @class = "agentdropdown" })</span>

Or maybe I'm picking you up wrong.
BTW you have came to my rescue a few times. So Thank you

Bob Learned

Too much scrolling, so little time...

is what I was trying but failing miserably at.
I am also not quite sure about your requirements, and what doesn't work as expected.

Niall Gallagher

ASKER

As you can see it is an editable table using jquery and most of the field are using textboxes and then press enter to post it back.
but the client wants some of the fields to use a dropdown and when he picks the name from the dropdown it should act the same as if he had pressed enter.

I hope that makes sense

Niall Gallagher

ASKER

Except I want it so show the dropdown text in the <span class "item-display"> instead of the value but post the value back to the Action

ASKER CERTIFIED SOLUTION

Bob Learned

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Niall Gallagher

ASKER

Thank you for your help Bob,
but I must be missing something the dropdown is not causing the function to fire.

$(".agentdropdown").on("change", wireAutoSubmit())

and
$(".agentdropdown").on("change", function () {
wireAutoSubmit()
});

but neither worked. AM I doing something wrong?

SOLUTION

Bob Learned

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Niall Gallagher

ASKER

My bad, at least this gives my a direction to work towards.
Thanks

Niall Gallagher

ASKER

Bob,
You done it again.

Thank you

Niall Gallagher

ASKER

Just gave me enough info to put me in the right direction