• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 322
  • Last Modified:

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
0
Niall292
Asked:
Niall292
  • 7
  • 4
2 Solutions
 
Bob LearnedCommented:
I am confused...I don't see any element in the HTML with the CSS class "agentdropdown"...
0
 
Niall292Author 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
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
Niall292Author 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
 
Niall292Author 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
 
Niall292Author 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
 
Niall292Author Commented:
My bad, at least this gives my a direction to work towards.
Thanks
0
 
Niall292Author Commented:
Bob,
You done it again.

Thank you
0
 
Niall292Author Commented:
Just gave me enough info to put me in the right direction
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

  • 7
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now