Tying to change value of hidden field by jquery using class

This is my second question in 2 days.
I have a table which I am populating using Linq to Entity and it is working great, I am trying to use jquery so the user can edit parts and at the end save it back to the SQL server. Here is a sample of the table
<td style="width:100px;">
            @Html.DisplayFor(modelItem => item.Agent_Name)
</td>
<td class="hide">
            @Html.HiddenFor(modelItem => item.Agent_Name, new { @class = "hiddenField" })
        </td>
        <td class="hide">
            @Html.HiddenFor(modelItem => item.Agent__)
        </td>
        <td style="width:30em;">
            @Html.DisplayFor(modelItem => item.Agent_2_Name)
       </td>
<td class="hide">
            @Html.HiddenFor(modelItem => item.Merchant_ID, new { @class = "hiddenField" })
        </td>
        <td class="hide">
            @Html.HiddenFor(modelItem => item.Agent_2__)
        </td>
        <td style="width:30em;">
            @Html.DisplayFor(modelItem => item.Agent_3_Name)
         </td>
        <td class="hide">
            @Html.HiddenFor(modelItem => item.Agent_3_Name, new { @class = "hiddenField" })
        </td>
        <td class="hide">
            @Html.HiddenFor(modelItem => item.Agent_3__)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.App_Fee)
        </td>
        <td class="hide">
            @Html.HiddenFor(modelItem => item.App_Fee, new { @class = "hiddenField" })
        </td>

Open in new window


As you can see all the hidden fields that I want to send values to, have a class called hiddenfield
my plan was to get the closest hiddenfield on the right and put the new value to it, but I can't figure out how to do it. This is the jquery I am using to edit and send the value to the hidden field. The edit part is working but it is not sending the value to the hidden field.
$(document).ready( function () {

        $("td").dblclick(function () {

            var OriginalContent = $.trim($(this).text());

 

            $(this).addClass("cellEditing");

            $(this).html(" <input type='text' value='"+OriginalContent+"' /> ");

            $(this).children().first().focus();

 

            $(this).children().first().keypress(function (e) {
                if (e.which == 13) {
                    var newContent = $(this).val();
                    $(this).parent().text(newContent);
                    $(this).closest(".hiddenField").val(newContent);
                    $(this).parent().removeClass("cellEditing");
                   $(this).next('.hiddenfield').val(newContent);
                }
            });

            $(this).children().first().blur(function () {
                $(this).parent().text(OriginalContent);
                $(this).parent().removeClass("cellEditing");                
            });
        });   
    });

Open in new window


Any help is highly appreciated.
Niall292Asked:
Who is Participating?
 
Niall292Connect With a Mentor Author Commented:
Thanks for your replies but I actually found a better way to do it rather than using the classes I used IDs
Example:
<td style="width:100px;">
            @Html.DisplayFor(modelItem => item.Agent_Name, new { @id = "AgentName" })
</td>
<td class="hide">
            @Html.HiddenFor(modelItem => item.Agent_Name, new { @class = "hiddenField", @id = "AgentNamehidden"  })
        </td

Open in new window


and then in my jquery I used
$(document).ready( function () {

        $("td").dblclick(function () {
            var OriginalContent = $.trim($(this).text());
            var ID = $(this).attr('id');

            $(this).addClass("cellEditing");
            $(this).html(" <input type='text' value='"+OriginalContent+"' /> ");
            $(this).children().first().focus(); 

            $(this).children().first().keypress(function (e) {
                if (e.which == 13) {
                    var newContent = $(this).val();
                    $(this).parent().text(newContent);
                    $(this).closest(".hiddenField").val(newContent);
                    $(this).parent().removeClass("cellEditing");
                   $("#" + ID + hidden").val(newContent);
                }
            });

            $(this).children().first().blur(function () {
                $(this).parent().text(OriginalContent);
                $(this).parent().removeClass("cellEditing");                
            });
        });   
    });

Open in new window


and it seems to work perfectly.
0
 
Carl TawnSystems and Integration DeveloperCommented:
I haven't actually run your code to test this, but you appear to be replacing the content of the TD with a text field effectively removing the hidden field from the cell.

It might be easier to use a input field instead and simply toggle its visibility.

Something along the lines of (note this is very stripped down to focus on the logic of showing the field):
    <table>
        <tr>
            <td>Hello world</td>
            <td><input type="text" value="@Model.OriginalValue" class="hiddenField" /></td>
        </tr>
    </table>

<style type="text/css">
    td { border: solid 1px red; }
    .hiddenField { display:none; }
</style>

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('td').dblclick(function () {
            $(this).children().first().removeClass('hiddenField');
        });
    });
</script>

Open in new window

0
 
louisfrCommented:
.closest()
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
.next()
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
Your hidden field is neither an ancestor nor a sibling of your input field. It's a child of the sibling of the parent of the input field. Try
$(this).parent().next().children().first().val(newContent)

Open in new window

Or simply put the hidden field in the same td as the input field and use the 'next' method.
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
Niall292Connect With a Mentor Author Commented:
Sorry,
What I posted at for the table was wrong, it should be
<td style="width:100px;" id = "AgentName" >
            @Html.DisplayFor(modelItem => item.Agent_Name)
</td>
<td class="hide">
            @Html.HiddenFor(modelItem => item.Agent_Name, new { @class = "hiddenField", @id = "AgentNamehidden"  })
        </td

Open in new window


because when you double click your are clicking the <td>
0
 
Niall292Author Commented:
@louisfr,  I tried your idea even though I got it working using a different method because you were answering the question asked, but it did not work.
0
 
Carl TawnSystems and Integration DeveloperCommented:
I've no objection if you simply want to delete the question instead.  If the solution didn't really answer the original question, then there's probably little benefit to anybody who comes across it.
0
 
Niall292Author Commented:
Although, the method I ended up using did not answer the question asked, I do think it is the best method in this circumstance
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.

All Courses

From novice to tech pro — start learning today.