?
Solved

Tying to change value of hidden field by jquery using class

Posted on 2015-02-04
7
Medium Priority
?
945 Views
Last Modified: 2015-02-10
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.
0
Comment
Question by:Niall292
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 52

Expert Comment

by:Carl Tawn
ID: 40590645
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
 
LVL 11

Expert Comment

by:louisfr
ID: 40590646
.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
 

Accepted Solution

by:
Niall292 earned 0 total points
ID: 40590777
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
Certified OpenStack Administrator Course

We just refreshed our COA course based on the Newton exam.  With 14 labs, this course goes over the different OpenStack services that are part of the certification: Dashboard, Identity Service, Image Service, Networking, Compute, Object Storage, Block Storage, and Orchestration.

 

Assisted Solution

by:Niall292
Niall292 earned 0 total points
ID: 40590836
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
 

Author Comment

by:Niall292
ID: 40591055
@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
 
LVL 52

Expert Comment

by:Carl Tawn
ID: 40591153
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
 

Author Closing Comment

by:Niall292
ID: 40600345
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question