Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Tying to change value of hidden field by jquery using class

Posted on 2015-02-04
7
Medium Priority
?
994 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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

Industry Leaders: 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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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

610 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