Update another control after successful jeditable submit

Question

I am using jEditable to update a value on my MVC model and back to the database successfully. The updated value appears on the webpage which is exactly what I want. I also want to update another control on the page (as it is a calculated value using the updated field). What is the best way to do this? Is there a hook into a successful jEditable update that I can add some jQuery into to refresh the other control?

My jEditable call :

$(function () {
    $(".editable_textarea").editable("@Url.Action("UpdateSharePrice","Home")", {
        indicator: "<span style='color:#FF0000;'>Saving...</span>",   
        type: 'text',
        submitdata: { _method: "put" },
        select: true,
        submit: 'OK',
        cancel: 'X',
        width: '40',
        cssclass: "editable",
        tooltip: 'click to edit...',
        onblur: "submit"
    });
});

Thanks

Colin.

Answer 1

Well, I figured it out in the end

You can use the JEditable callback method to get the parameters used to call the controller method:

$(function () {
    $(".editable_textarea").editable("@Url.Action("UpdateSharePrice","Home")", {
        indicator: "<span style='color:#FF0000;'>Saving...</span>",
        type: 'text',
        select: true,
        submit: 'OK',
        cancel: 'X',
        width: '40',
        cssclass: "editable",
        tooltip: 'click to edit...',
        onblur: "submit",
        callback: function(value, settings)
        {   
            var fundId = this.id;

            $.ajax({
                url: '@Url.Action("GetMarketValue", "Home")',
                type: 'POST',
                data: { id : fundId },
                success: function (data) {                        
                    $('#marketValueDiv_' + fundId).html(data);
                }
            });                  
        }
    });
});

This parameter can then be used to do an ajax post to another action method that returns the calculated field from the model:

    public ActionResult GetMarketValue(int id)
    {
        if (ModelState.IsValid && id > 0)
        {
            BaseFund targetFund = _context.Funds.Find(id);                
            return PartialView("GetMarketValue", targetFund);
        }
        else
        {
            return PartialView("0.00");
        }            
    }

The success callback on the ajax call is then used to update the appropriate div html content