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
Niall GallagherDeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bob LearnedCommented:
I am confused...I don't see any element in the HTML with the CSS class "agentdropdown"...
0
Niall GallagherDeveloperAuthor Commented:
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
0
Bob LearnedCommented:
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.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Niall GallagherDeveloperAuthor Commented:
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
0
Niall GallagherDeveloperAuthor Commented:
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
0
Bob LearnedCommented:
From what I can tell we are focused on this bit of JQuery:

 $(".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


It reads like you are looking for the select elements to be auto-post back.  If that is true, then you can achieve that by triggering submit for the form.

Example:

function wireUpAutoSubmit() {
  $(".autoSubmit").each(function (index) {
    $(this).change(function () {
      $(this).closest('form').trigger('onsubmit');
    })
  });
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Niall GallagherDeveloperAuthor Commented:
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?
0
Bob LearnedCommented:
That example wasn't meant to be drop-in code, but a way to stimulate a solution.

The only way that code would work is if you had HTML elements that had the "autoSubmit" class.  Since you already attached to the change event, so you would need to get the important bits from the example:

$(".agentdropdown").on("change", function () {    
        $display = (this).parent().next("span.item-display");
        $display.html($("option:selected", $(".agentdropdown")).text());
        $(this).hide();
        $display.show();
        
        // Submit the form.
         $(this).closest('form').trigger('onsubmit');
    });

Open in new window


P.S. I assumed that you have a <form> element somewhere in the HTML.
0
Niall GallagherDeveloperAuthor Commented:
My bad, at least this gives my a direction to work towards.
Thanks
0
Niall GallagherDeveloperAuthor Commented:
Bob,
You done it again.

Thank you
0
Niall GallagherDeveloperAuthor Commented:
Just gave me enough info to put me in the right direction
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.