Button value doesn’t change after first click

I’ve got this button which changes a boolean in the database after clicking it. If the boolean PausedCMDBUpload = true the button should display UNPAUSE if the boolean is false, it should display PAUSE.

The button is changing the value in the database like intended, however after clicking the button the first time the page will refresh but the text on the button stays the same. After clicking it another time the text will change.

Does anyone have a idea why the value on the button isn’t changing after the first click? Any help would be appreciated!

View

<script>
    function ClickButton1() {
        $.ajax({
            type: "POST",
            url: "@Url.Action("ClickButton1", "Devices")",
            async: true,
            success: function (msg) {
                ServiceSucceeded(msg);
            },
            error: function () {
                return "error";
            }
        });
    }
</script>

@if (@Model.ElementAt(0).PauseCMDBUpload == true)
    {
        <input id="Button1" type="button" value="UNPAUSE" onclick="ClickButton1(); document.location.reload(true)" />
    } 
    else
    {
        <input id="Button1" type="button" value="PAUSE" onclick="ClickButton1(); document.location.reload(true)" />
    }

Controller
[HttpPost]
public void ClickButton1()
{
    var entity = db.Devices;

    foreach (var device in entity)
    {
        if (device.PauseCMDBUpload == false)
        {
            device.PauseCMDBUpload = true;
        }
        else
        {
            device.PauseCMDBUpload = false;
        }
    }
    db.SaveChanges();
}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can change your code as follows:

<script>
    function ClickButton1() {
        $.ajax({
            type: "POST",
            url: "@Url.Action("ClickButton1", "Devices")",
            async: true,
            success: function (msg) {
                var btnText = $('#Button1').val();
                if (btnText == "UNPAUSE")
                  $('#Button1').val('PAUSE');
                else
                 $('#Button1').val('UNPAUSE');
                ServiceSucceeded(msg);
            },
            error: function () {
                return "error";
            }
        });
    }
</script>

@if (@Model.ElementAt(0).PauseCMDBUpload == true)
    {
        <input id="Button1" type="button" value="UNPAUSE" onclick="ClickButton1();" />
    } 
    else
    {
        <input id="Button1" type="button" value="PAUSE" onclick="ClickButton1();" />
    }


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x