Solved

Tying to change value of hidden field by jquery using class

Posted on 2015-02-04
7
772 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
  • 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
How our DevOps Team Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 

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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
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…

825 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