Why does the confirm window always reappear immediately after i have selected either ok or cancel? And how can I fix this?
var originalValue = "";
$("#betreffDropdown").change(function () {
originalValue = $("#betreffDropdown option:selected").attr("class");
});
$('#nachrichtentext').on('blur', function (e) {
var currentValue = $('#nachrichtentext').val();
if (currentValue !== originalValue) {
if (confirm('Du hast ungespeicherte Änderungen. Möchtest du diese Speichern?')) {
update();
}
else {
$('#nachrichtentext').focus();
}
}
});
function update() {
var selectedId = $("#betreffDropdown option:selected").attr("id");
var message = $("#nachrichtentext").val();
var subject = $("#betreffDropdown option:selected").val();
var data = {
"selectedId": selectedId,
"newMessage": message,
"subject": subject
};
$.ajax({
type: 'GET',
url: 'updatetemplate/',
data: data,
contentType: "application/json",
})
window.location.reload()
}
var templates = Model.Templates.ToList();
<select id="betreffDropdown" name="BetreffDropdown">
<option>Bitte wählen:</option>
@if (Model.Templates != null)
{
foreach (var template in templates.Distinct())
{
<option id="@template.Item1" class="@template.Item2">@template.Item3</option>
}
}
</select>
}
@using (Html.BeginForm("CreateView", "Template", null))
{
<button>Neu</button>
}
<textarea readonly id="nachrichtentext" placeholder="Nachricht"></textarea>
<input type="checkbox" id="anpassen" name="Anpassen" disabled>
<label for="anpassen">Anpassen</label>
<br />
<br />
<button id="savebtn" disabled class="disabled-button" onclick="window.location.reload()">Speichern</button>
<button id="deletebtn" class="disabled-button" onclick="window.location.reload()">Löschen</button>
This is my code that I use. So I check whether the value of a textarea has been changed or not and if so and the textarea loses focus, a confirmation window appears. Clicking ‘Ok’ should update the template, otherwise the focus should return to the textarea.
I have found nothing in my research….
2
Answers
I figured it out:
I have the code in a timout with 0 miliseconds. idk how it works, but it works
without a full functional example is hard to tell.
But here are some possible mistakes:
$('#nachrichtentext').on('blur',
is being loaded more than once.$('#nachrichtentext').on('blur',
then it could be possible that the response was given more than once, resulting on multiple equivalent handler functions being triggered in the blur event.update()
is doing some recursion, triggering blur again either manually or by manipulating the focus on the DOM elements.