CODEWITHSUNDEEP
jqueryjquery-ui-dialog
user3378165
user3378165

Reputation: 6896

Detect any input change jquery

I have a form with multiple fields, and some jquery Modal Dialogs (popups).

I need to close all open popups if one of the fields' values has changed by the user.

I tried that but it doesn't seems to be working (the change event doesn't trigger, I don't get the "test" in the console):

   $("input[type='text']").change(function () {
       console.log("test");
       $(".ui-dialog-content").dialog("close");
    });

Any idea how to solve that?

Upvotes: 1

Views: 6565

Answers (3)

Andrei Nemes
Andrei Nemes

Reputation: 3122

There isn't a lot to go on, but are you aware that change only fires on field blur? It will not fire as you type. Also, the elements may not be there as you are binding the handler. This could be either because the page has not loaded yet or some elements are loaded asynchronously. Elements dynamically added after will not work either.

To fix the former, make sure your page is ready before attempting to bind the event handler

$(function() {
  // safe here
});

Alternatively, you can bind the handler on the parent instead

$("#parent").on("change", "input[type='text']", function () {
   console.log("test");
});

This will work regardless when the elements are added to the parent. Be aware that this is slower so avoid using it on toplevel elements such as body or window

Upvotes: 4

RJV
RJV

Reputation: 287

It works when you use autoOpen false

$("#dialog-1").dialog({
                      autoOpen: false, // autoOpen to false
                  });

Script:

$(function () {
              $("#dialog-1").dialog({
                  autoOpen: false, // autoOpen to false
              });
              $("#dialog-2").dialog({
                  autoOpen: false, 
              });
              $("#opener").click(function () {
                  $("#dialog-1").dialog("open");
              });
              $("#opener2").click(function () {
                  $("#dialog-2").dialog("open");
              });
              $("input[type='text']").change(function () { // input changes
                  console.log("test");
                  $(".ui-dialog-content").dialog("close");
              });
          });

HTML:

<div id="dialog-1" title="Dialog Title goes here...">This my first jQuery UI Dialog1!</div>
       <div id="dialog-2" title="Dialog Title goes here...">This my first jQuery UI Dialog2!</div>
      <button id="opener">Open Dialog</button>
       <button id="opener2">Open Dialog</button>
       <input type="text" id="txt" value="" />

Upvotes: 1

Pekka
Pekka

Reputation: 71

This is just a random guess, but have you tried:

$("input[type='text']”).on('change', function () {
    console.log("test");
    $(".ui-dialog-content").dialog("close");
});

I know your solution is a shortcut for this and it should work, but I've seen some elements to work with this instead of shortcut. It has something to do with when the element is created in relation to when script is loaded.

Upvotes: 0

Related Questions