JQuery not getting updated value even though DOM shows otherwise

I have this input that is hidden:

<input data-val="true" data-val-required="The ConfirmationResult field is required." id="ConfirmationResult" name="ConfirmationResult" type="hidden" value="false">

Once my popup modal closes, ConfirmationResult is changed from false to true like this:

$("#ConfirmationResult").val("true");

I then have to check and see if ConfirmationResult is changed to true here:

if ($("#@Html.IdFor(x=>x.ConfirmationResult)").val() === true)

However, the issue is that for some reason I cannot get the updated value at all.

What am I missing?

EDIT:

This is how the code is structured. LoadConfirmationDetails sets the #ConfirmationResult

LoadConfirmationDetails();
console.log(document.getElementById('ConfirmationResult').value);
if ($("#@Html.IdFor(x=>x.ConfirmationResult)").val() === "true") {
    wrapperThis.processQueue();
}
console.log($("#@Html.IdFor(x=>x.ConfirmationResult)").val());

Answer

Ok so i guess you are using mvc+razor from the way you look for the id of the element

First of all make sure that the correct id gets rendered in the selector on the rendered dom, then try this:

if ($("#@Html.IdFor(x=>x.ConfirmationResult)").val() === 'true')

the ‘===’ will expect a boolean to compare, otherwise it will return false. You will have to compare against ‘true’ using the ‘===’ operator, since .val() will return a string back to you.

EDIT: Just adding your final resolution for others to find, taken from the comments of this answer.

The problem was that the event was not called as a callback of the popup’s closing event, so the value was not actually changed before the if statement was evaluated.