skip to Main Content

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


  1. Chosen as BEST ANSWER

    I figured it out:

    setTimeout(function () {
        $('#nachrichtentext').focus();
    }, 0);
    

    I have the code in a timout with 0 miliseconds. idk how it works, but it works


  2. without a full functional example is hard to tell.
    But here are some possible mistakes:

    • multiple inclusion of js. maybe the script doing $('#nachrichtentext').on('blur', is being loaded more than once.
    • multiple events because of ajax responses. if you have an ajax response doing $('#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.
    • recursive calls, that update() is doing some recursion, triggering blur again either manually or by manipulating the focus on the DOM elements.
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search