I have few textboxes in my asp MVC view which show a popup when user clicks on them. The popup also has a textbox, user enters a value in jquery popup and clicks Ok, the selected value is shown in the textbox which was clicked. I am using textbox.change event on this textbox but it is not fired as the event is fired only If I manually click the textbox.

 $(document).ready(function () {


            jQuery("#NumberCalledTo").click(function () {
                displayAlertMessage($(this).val());
            });


 $("#dial-prefix").dialog({
        autoOpen: false,
        modal: true,
        width: 470,
        resizeable: true,
        buttons: {
            "OK": function () {
                var selectedDialPrefixValue = $("#dialprefixPopup").val();
                var selectedPhoneValue = $("#PhoneNumber").val();

                // remove + and space from dialprefix selected on popup
                selectedDialPrefixwithoutPlus = selectedDialPrefixValue.replace(selectedDialPrefixValue.substring(0, 1), " ");
                selectedDialPrefixwithoutPlus = $.trim(selectedDialPrefixwithoutPlus);

                // number must be 10 or 11 digits long
                if (selectedDialPrefixwithoutPlus == "44" && selectedPhoneValue.substring(0, 1) == "0" && selectedPhoneValue.length < 11) {
                    //displayAlertMessage("Invalid number. Must must have 10 digits.");
                    $("#div-uk-error-message").dialog("open");
                    return;
                }
                else if (selectedDialPrefixwithoutPlus == "44" && selectedPhoneValue.length < 10) {
                    //displayAlertMessage("Invalid number. Must must have 9 digits.");
                    $("#div-uk-error-message").dialog("open");
                    return;
                }

                // remove 0 from phone number
                if (selectedPhoneValue.substring(0, 1) == "0") {
                    selectedPhoneValue = selectedPhoneValue.replace(selectedPhoneValue.substring(0, 1), "");
                }

                if (selectedPhoneValue != '') {
                    var selectedDialPrefix = $("#SelecteddialprefixId").val();
                    var selectedPhone = $("#SelectedPhoneId").val();
                    $("#" + selectedDialPrefix).val(selectedDialPrefixValue);
                    $("#" + selectedPhone).val(selectedPhoneValue);                   
                }
                $(this).dialog("close");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });


});

$("#dial-prefix").dialog is opened on textbox click. I can not add any code to OK button function as this popup is being used on different pages and different textboxes.

Please suggest a solution to it

I have few textboxes in my asp MVC view which show a popup when user clicks on them. The popup also has a textbox, user enters a value in jquery popup and clicks Ok, the selected value is shown in the textbox which was clicked. I am using textbox.change event on this textbox but it is not fired as the event is fired only If I manually click the textbox.

 $(document).ready(function () {


            jQuery("#NumberCalledTo").click(function () {
                displayAlertMessage($(this).val());
            });


 $("#dial-prefix").dialog({
        autoOpen: false,
        modal: true,
        width: 470,
        resizeable: true,
        buttons: {
            "OK": function () {
                var selectedDialPrefixValue = $("#dialprefixPopup").val();
                var selectedPhoneValue = $("#PhoneNumber").val();

                // remove + and space from dialprefix selected on popup
                selectedDialPrefixwithoutPlus = selectedDialPrefixValue.replace(selectedDialPrefixValue.substring(0, 1), " ");
                selectedDialPrefixwithoutPlus = $.trim(selectedDialPrefixwithoutPlus);

                // number must be 10 or 11 digits long
                if (selectedDialPrefixwithoutPlus == "44" && selectedPhoneValue.substring(0, 1) == "0" && selectedPhoneValue.length < 11) {
                    //displayAlertMessage("Invalid number. Must must have 10 digits.");
                    $("#div-uk-error-message").dialog("open");
                    return;
                }
                else if (selectedDialPrefixwithoutPlus == "44" && selectedPhoneValue.length < 10) {
                    //displayAlertMessage("Invalid number. Must must have 9 digits.");
                    $("#div-uk-error-message").dialog("open");
                    return;
                }

                // remove 0 from phone number
                if (selectedPhoneValue.substring(0, 1) == "0") {
                    selectedPhoneValue = selectedPhoneValue.replace(selectedPhoneValue.substring(0, 1), "");
                }

                if (selectedPhoneValue != '') {
                    var selectedDialPrefix = $("#SelecteddialprefixId").val();
                    var selectedPhone = $("#SelectedPhoneId").val();
                    $("#" + selectedDialPrefix).val(selectedDialPrefixValue);
                    $("#" + selectedPhone).val(selectedPhoneValue);                   
                }
                $(this).dialog("close");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });


});

$("#dial-prefix").dialog is opened on textbox click. I can not add any code to OK button function as this popup is being used on different pages and different textboxes.

Please suggest a solution to it

• javascript
• jquery
• asp-mvc
• jquery-ui

1 Answer 1

I don't see a change method, so it's hard to decipher the element in question, but if you want to trigger an event, you could just do...

$('element').trigger('change');

Which will trigger the change event and if any handlers are bound to the event then they will fire.