Update a value / item without updating a page

Question

User1670624291 posted

Hi,

Can someone help me with an example of updating an item or value without updating the full page? everything I find is related to pages.

My problem is as follows I have a project in asp.net mvc that performs a listing when someone edits the listing I keep the current time that the record was modified, so far everything was perfect, but for the value to be displayed I am loading the complete page.

 @foreach (var item4 in item2.status)
                                {
                                    @item4.Data_mod
                                }

I currently have the function below to update the value in the database

$("#ordertable").on("click", ".Editbtn", function () {
                var status = new Object();
                //more code
                status.Data_mod = $(this).closest('tr').find(".Data_mod").val();
                if (status != null) {
                    $.ajax({
                        type: "POST",
                        url: "/Home/EditPost",
                        data: JSON.stringify(status),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json", 
                    });
                }
                location.reload();

as you see in the end i'm using a location.reload();

my question is how can i only update @item4.Data_mod by pressing the button "Editar".

Thanks for any help!

Answer 1

User-939850651 posted

Hi MiguelMi,

MiguelMi

as you see in the end i'm using a location.reload();

my question is how can i only update @item4.Data_mod by pressing the button "Editar".

Using location.reload() will cause the browser to reload the url, so the entire page will be refreshed.

Now that you have used Ajax to update the data, you can make the Ajax method return the update result. If the update is successful, you can directly use the script code to modify the table content.

Something like this:

$("#ordertable").on("click", ".Editbtn", function () {
        var status = new Object();
        //more code
        status.Data_mod = $(this).closest('tr').find(".Data_mod").val();
        if (status != null) {
            $.ajax({
                type: "POST",
                url: "/Edit/EditPost",
                data: JSON.stringify(status),
                contentType: "application/json; charset=utf-8",
                //dataType: "json",
                success: function (data) {
                    console.log(data);
                    if (data === 'ok') {
                        //server side update successfully
                        //update table content using script code
                    }
                },
                error: function () {
                    //some code here
                }
            });
        }
    });

        [HttpPost]
        [WebMethod]
        public string EditPost(Item item)
        {
            try
            {
                //update datatable 
                //...
                //update successfully 
                return "ok";
            }
            catch(Exception ex)
            {
                //catch some exception when updating
                return "failed";
                throw ex;
            }
        }

Hope this can help.

Best regards,

Xudong Peng

Answer 2

User1670624291 posted

Hi,

in

//update table content using script code

I try something like:

$("#ordertable").load("/Home/TableStatus");

but there is no update

Answer 3

User475983607 posted

The community needs the controller/action, view, and JavaScript to review the code for errors.  In the mean time, you can check the browser's dev tools (F12) for any client side errors.  You can also set a breakpoint using Visual Studio to verify the action is being called and step through the action logic.

Answer 4

User1670624291 posted

Hi,

Currently on the controller I have:

[HttpPost]
        public string EditPost(Programa_Cor_Info_Status statusData)
        {
            try
            {
                Programa_Cor_Info_Status status = new Programa_Cor_Info_Status()
                {
                    ID_Programa = statusData.ID_Programa,
                    ID_Linha_Cor = statusData.ID_Linha_Cor,
                    ID_Programa_Malha = statusData.ID_Programa_Malha,
                    Talao = statusData.Talao,
                    Status = statusData.Status,
                    Obs = statusData.Obs,
                    Data_mod = statusData.Data_mod,
                };
                db.Entry(status).State = EntityState.Modified;
                db.SaveChanges();
                //return Json(status, JsonRequestBehavior.AllowGet);
                return "ok";
            }
            catch (Exception ex)
            {
                //catch some exception when updating
                return "failed";
                throw ex;
            }
        }

in View:

$("#ordertable").on("click", ".Editbtn", function () {
                    var status = new Object();
                    status.ID_Programa = $(this).closest('tr').find(".ID_Programa").val();
                    status.ID_Linha_Cor = $(this).closest('tr').find(".ID_Linha_Cor").val();
                    status.ID_Programa_Malha = $(this).closest('tr').find(".ID_Programa_Malha").val();
                    status.Talao = $(this).closest('tr').find(".Talao").val();
                    status.Status = $(this).closest('tr').find(".Status").val();
                    status.Obs = $(this).closest('tr').find(".Obs").val();
                    status.Data_mod = $(this).closest('tr').find(".Data_mod").val();
                    if (status != null) {
                        $.ajax({
                            type: "POST",
                            url: "/Home/EditPost",
                            data: JSON.stringify(status),
                            contentType: "application/json; charset=utf-8",
                            //dataType: "json",
                            success: function (data) {
                                console.log(data);
                                if (data === 'ok') {
                                    //server side update successfully
                                    //update table content using script code
                                    $("#ordertable").load("/Home/Programa_Cor_Info_Status");
                                }
                            },
                            error: function () {
                                //some code here
                            }
                        });

                    }
                    //Desabilita os campos
                    $(this).hide();
                    var currenttr = $(this).closest("tr");
                    currenttr.find(".ToEditbtn").show();
                    currenttr.find(".Talao").prop("disabled", true);
                    currenttr.find(".Status").prop("disabled", true);
                    currenttr.find(".Obs").prop("disabled", true);
                    location.reload();
                });

Thanks for any help

Answer 5

User475983607 posted

You still did not share all the code.  I assume this is the code you've having trouble with???

$("#ordertable").load("/Home/Programa_Cor_Info_Status");

Did you open the browser's dev tools an look for any error as suggested?  Did you set a breakpoint in the /Home/Programa_Cor_Info_Status to see if the action is being invoked?  

Also, your code ignores error which is bad for troubleshooting.

error: function () {
    //some code here
}

Take a step back and perform basic troubleshooting/debugging to find the logical issue in your code.

Answer 6

User1670624291 posted

Hi mgebhard

I do not know if it is my mistake because I do not know if this is the correct way, I am not presenting an error I am presented with a question to understand how ajax works better.
As I'm learning I'm looking for someone to explain to me with what method I can update a value in ajax, with an example, I don't want code done, I want to learn.

Answer 7

User475983607 posted

MiguelMi

I do not know if it is my mistake because I do not know if this is the correct way, I am not presenting an error I am presented with a question to understand how ajax works better.
As I'm learning I'm looking for someone to explain to me with what method I can update a value in ajax, with an example, I don't want code done, I want to learn.

You need to learn how to use standard debugging tools.  The community cannot run your code so we have no idea what is wrong.   You are in the best position to debug your code.  Typically, debugging your own code is the best and quickest way to learn.  

https://docs.microsoft.com/en-us/visualstudio/debugger/debugger-feature-tour?view=vs-2019

https://developers.google.com/web/tools/chrome-devtools

They only spot in your code where the page is updates is this line of code.

$("#ordertable").load("/Home/Programa_Cor_Info_Status");

But before the code above can run the EditPost action must return "ok".  Use the Visual Studio debugger to set a break point in EditPost and single step through the code.  Does EditPost return "ok"???

You do not share the /Home/Programa_Cor_Info_Status action.  Is action being invoked?

If you want to learn jQuery AJAX then read the reference documentation.

https://api.jquery.com/jquery.ajax/

If you want to learn how to update a web page using jQuery then learn jQuery selectors.

https://api.jquery.com/category/selectors/

If you want debugging support form he form then share enough code to reproduce this issue.