Jquery onchange Ajax

Question

i made a function that sends data (ajax) to the database and depending on the response from the server i need to alert a message but it seems like whenvever i change the select option i get the alert message for each change(if i change the select four times when i click i get the alert four times ) , but if i remove my ajax function and replace it simply by an alert i get it once not repeating itself here is my JS

        $('.select_ids').change(function () {
            var id = $(this).val();
            var form = $('#form_widget_ids_' + id);
            var container = form.parent('.ewb_forms');
            var box = container.parent('.edit_widget_box');

            container.children('.selected').fadeOut(300, function () {
                $(this).removeClass('selected');
                form.fadeIn(300, function () {
                    $(this).addClass('selected');
                });
            });
            Widget.updateSSOUrl(box);

            $.ajax({
                type: "POST",
                url: window.location + "",
                data: {'id': id}

            }).done(function (msg) {

                $(".red").on('click', function (evt) {
                    if ('done' == msg) {
                        evt.preventDefault();
                        alert('NOP');
                    }
                })



            });
        });

Solution

the event that you are binding i think is wrong. For newly append items is better in your case to use

$(document).on('click', ".red", function (evt) {

                })

And it must be moved outside the ajax success because now you are triggering it every time

----- Edited --- If you want just to alert the output of the ajax you dont need the onClick event

$('.select_ids').change(function () {
            var id = $(this).val();
            var form = $('#form_widget_ids_' + id);
            var container = form.parent('.ewb_forms');
            var box = container.parent('.edit_widget_box');

            container.children('.selected').fadeOut(300, function () {
                $(this).removeClass('selected');
                form.fadeIn(300, function () {
                    $(this).addClass('selected');
                });
            });
            Widget.updateSSOUrl(box);

            $.ajax({
                type: "POST",
                url: window.location + "",
                data: {'id': id}

            }).done(function (msg) {
                    if (msg === 'done') {
                        evt.preventDefault();
                        alert('NOP');
                    }
            });
        });

If you want to show the latest result on a button click you can store the msg on a global variable and on click of a div show that like

var globalMsg = "";
$('.select_ids').change(function () {
            var id = $(this).val();
            var form = $('#form_widget_ids_' + id);
            var container = form.parent('.ewb_forms');
            var box = container.parent('.edit_widget_box');

            container.children('.selected').fadeOut(300, function () {
                $(this).removeClass('selected');
                form.fadeIn(300, function () {
                    $(this).addClass('selected');
                });
            });
            Widget.updateSSOUrl(box);

            $.ajax({
                type: "POST",
                url: window.location + "",
                data: {'id': id}

            }).done(function (msg) {
              globalMsg = msg
            });
        });

$(".div").click(function() { alert(globalMSG); });

Comments

[ayoub idelhoussain]

what do you mean by moving it outside the ajax call im using it after the ajax (im still new to js thank you

[Panagiotis Vrs]

move the alert outside the assignment of the event on click. so it will be $(document).on('click', ".red", function (evt) { }) $('.select_ids').change(function () { });

[ayoub idelhoussain]

(pardon my ignorance) but can you explain more (because if i do like you say how can i tell the message returned from the database (.done function does that right ? )

[Panagiotis Vrs]

I wrote you in my edited answer two options. Option 1) if you only alert the user on success. Option 2) if you want to show the latest success msg on div click. Let me know if that works for you

[ayoub idelhoussain]

sorry i still get the same issue

[Panagiotis Vrs]

please create a snippet code on jsbin or other service that we can see also and help you out.

[ayoub idelhoussain]

i used the second option