Multiple rows using same function?

Question

I have a grid of categories where a user can assign a value to each category, using an edit box. Currently, the edit box is a static bit of code:

<input style="text-align: right" type="text" value="@(sub.BudgetAmount.HasValue ? sub.BudgetAmount.ToString() : "")" />

They're generated throug a Foreach through a list of items from a database.

<div id="ccl@(cat.Id)" class="collapse collapsed collapse-categories">
    @foreach (var sub in Model.Lines.Where(x => x.CategoryId == cat.Id))
    {
        <div class="row table_row">
        <div class="col-xs-12 col-lg-4 small-bold-cell"><a href="@Url.Action("EditSubCategory", "Category", new {id = sub.SubCategoryId})" class="btn btn-xs btn-success">View</a>&nbsp;&nbsp;&nbsp;@sub.SubCategory</div>
        <div class="col-xs-4 col-lg-2 small-cell ">
            <input style="text-align: right" type="text" value="@(sub.BudgetAmount.HasValue ? sub.BudgetAmount.ToString() : "")" />
        </div>
        <div class="col-xs-4 col-lg-2 small-cell text-right">@sub.SpentAmount</div>
        <div class="col-xs-4 col-lg-2 small-cell text-right">@sub.Remaining</div>
        <div class="col-xs-2 col-lg-2 small-cell visible-lg text-right">@sub.Transactions</div>
        </div>
    }
</div>

What I need to do is, when a user changes the value of the edit box, I need to call a jquery function, with an id (I can somehow, add the id of the row as a tag to my edit box?), and the amount entered, and make a call to my controller (i.e. Save the value, associated to the ID).

How can I write a single javascript method, that, based on the row the user has modified, call a save function? I'm not sure how this concept can work.

I, for now, just need a way to modify this code, to call a javascript method, that will 'Alert' the ID of the selected row, and the value in the edit box that I just tabbed out of, or pressed 'Enter' in.

As a visual idea, this is what my screen looks like:

enter image description here

I think I can add something like ''data-id = 7' to my editbox, to get the ID? But how do I have a single method, to share the function across all edit boxes. I think I'd use a class, and a method for that class.onexit?

Gung Foo · Accepted Answer · 2015-04-07 13:20:16Z

1

You can use a delegated event handler for this job:

$('body').on('change', 'input.change-handled', myJqueryFunction);

be sure to give your inputs the change-handled class and have myJqueryFunction read the data-id attribute of the element that the event was called upon:

function myJqueryFunction() {
    var dataId = $(this).attr('data-id');
}

edited Apr 7, 2015 at 13:20

answered Apr 7, 2015 at 12:39

Gung Foo

13.6k5 gold badges35 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multiple rows using same function?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related