Solved

Tying to change value of hidden field by jquery using class

Posted on 2015-02-04
7
704 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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
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.
The viewer will learn how to dynamically set the form action using jQuery.
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)

708 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now