0

I have 3 input types. One textbox, two dates. I am setting up a custom attribute itself in the HTML as data-ischanged = false. In the change function, I am making it true. After saving the data (ajax call). I am trying to change the custom property to false once again. But I am unable to do so.

Any help will be appreciated.

HTML

                    <label>Description</label>
                    <input type="text" id="SelectedLookupTypeDescription" data-ischanged="false" />

                    <label style="padding:12px 12px">Eff. Start Date</label>
                    <input type="date" id="SelectedStartDate" data-ischanged="false" />

                    <label style="padding:12px 12px">Eff. End Date</label>
                    <input type="date" id="SelectedEndDate" data-ischanged="false" />

OnChange function below :

$('#SelectedLookupTypeDescription').on('change', function () {
    $('#SelectedLookupTypeDescription').attr("data-ischanged", true);
});

$("#SelectedStartDate").on('change', function () {
    $("#SelectedStartDate").attr("data-ischanged", true);
});

$('#SelectedEndDate').on('change', function () {
    $("#SelectedEndDate").attr("data-ischanged", true);
});

After the successful ajax call, using the below code I am trying to set the value to false

          var descselector = document.getElementById('SelectedLookupTypeDescription');
                descselector.setAttribute("data-ischanged", false);

                var StartSelector = document.getElementById('SelectedStartDate');
            StartSelector.setAttribute("data-ischanged", false);

                var EndSelector = document.getElementById('SelectedEndDate');
                EndSelector.setAttribute("data-ischanged", false);`

AJAX Code

    $.ajax({
        type: 'POST',
        url: '/Reference/UpdateLookupTypeData',
        data: { TypeData: TypeData },
        beforeSend: function (xhr) { xhr.setRequestHeader('X-XSRF-TOKEN', csrfToken); },
        success: function (RefResponse) {
            toastr.success("Data saved successfully");
            getOtherDetails(Id);

                //var descselector = document.getElementById('SelectedLookupTypeDescription');
                //descselector.setAttribute("data-ischanged", false);

                var StartSelector = document.getElementById('SelectedStartDate');
            StartSelector.setAttribute("data-ischanged", false);

                var EndSelector = document.getElementById('SelectedEndDate');
            EndSelector.setAttribute("data-ischanged", false);
           }
        });
12
  • Why not use $('#SelectedLookupTypeDescription').attr("data-ischanged", false); in the latter code? Commented May 11, 2021 at 11:24
  • can you show us your ajax code, because this code looks fine Commented May 11, 2021 at 11:25
  • 1
    Ah, well there's your issue .data() only reads the attr once - then it caches the result. If you're using .data() then always use .data() - there's multiple answers that explain it better. Commented May 11, 2021 at 11:36
  • 1
    No, I mean you set true with .attr("data-ischanged", true); why not set false with .attr("data-ischanged", false);? (won't work if you're reading with .data but seemed odd to use jquery for true but vanilla for false. Commented May 11, 2021 at 11:40
  • 1
    I've seen better answers that explain it, but here's one: stackoverflow.com/a/30543817/2181514 Commented May 11, 2021 at 11:40

1 Answer 1

-1

Try the values to "false" not false

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

1 Comment

TRied it. Did not work

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.