I have an igEditor type 3 (same as datepicker), I want to fire an event when text change, so I went to the documentation and found that I must use
$(document).delegate("#NewDate", "igdatepickertextchanged", function (evt, ui) { alert("Fired 1!");});
I am a good guy so I did exactly that, but it didn't work. So I tried some other ways, finally I found the right one:
$(document).delegate("#NewDate", "igeditortextchanged", function (evt, ui) { alert("Fired 4!"); });
Obviously "igeditortextchanged" is not the same as "igdatepickertextchanged". I spent many hours with this issue, now I would like to know if the documentation is wrong or I missed something. Thanks.
This is the complete code:
<!DOCTYPE html><html><head> <title></title>
<!-- Ignite UI Required Combined CSS Files --> <link href="http://cdn-na.infragistics.com/jquery/20141/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/jquery/20141/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<!-- Ignite UI Required Combined JavaScript Files --> <script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.lob.js"></script>
</head>
<body>
<input id="NewDate" /><input name="NewDate" type="hidden" /> <script type="text/javascript">//<!--<![CDATA[ $(function () { $('#NewDate').igEditor({ type: 3, button: 'dropdown', dataMode: 'date', inputName: 'NewDate', dateDisplayFormat: 'dd/MM/yyyy', dateInputFormat: 'dd/MM/yyyy', width: 150 }); }); //]]>--></script>
</body>
<script> $(function () {
// This should fire, documentation say so (http://help.infragistics.com/jQuery/2014.1/ui.igdatepicker), but it doesn't. WHY? $(document).delegate("#NewDate", "igdatepickertextchanged", function (evt, ui) { alert("Fired 1!"); });
// It doesn't fire, so try next. $(document).delegate("#NewDate", "igdateeditortextchanged", function (evt, ui) { alert("Fired 2!"); });
// It doesn't fire, so try next. $(document).delegate("#NewDate", "igtexteditortextchanged", function (evt, ui) { alert("Fired 3!"); });
// This is OK :) $(document).delegate("#NewDate", "igeditortextchanged", function (evt, ui) { alert("Fired 4!"); });
});</script>
</html>
By the way, if instead of:
$(document).delegate("#NewDate", "igeditortextchanged", function (evt, ui) { alert("Fired 4!");});
We have (assuming there are a Party.NewDate element):
$(document).delegate("#Party.NewDate", "igeditortextchanged", function (evt, ui) { alert("Fired 4!");});
Then, the event will never be fired. Why such a selector name like Party.NewDate can prevent the event to be fired?
Hello Luis,
The code works as expected. As Ignite UI widgets are built on top of the jQuery UI framework we're following their convention on naming the events (for more information see the Widget Factory page on their site). By jQuery UI convention the widget raises events which are named after its name concatenated by the event name lower cased.
In your case you're creating an igEditor widget, thus the correct event handler is:
$(document).delegate("#NewDate", "igeditortextchanged", function (evt, ui) {
alert("Fired 4!");
});
It's important to note here that our Editors MVC Wrapper always initializes igEditor instances in the browser (as you noted in your other forum post), so you should stick with using the igEditor API for events, options and methods. The Configuring igEditors at Runtime topic in our documentation describes this behavior.
The reason that the code will not work is that the "#Party.NewDate" is not a valid selector and will return no element to bind to.
$(document).delegate("#Party.NewDate", "igeditortextchanged", function (evt, ui) { alert("Fired 4!"); });
$(document).delegate("#Party.NewDate", "igeditortextchanged", function (evt, ui) {
Hope this helps, Martin Pavlov Infragistics, Inc.
Thank you Martin for the answer and the link about igEditor configuration, very good info. Just to clarify a bit more, could you give an example when igdatepickertextchanged should be used?
You should use the igdatepickertextchanged when you have created an igDatePicker widget on the page. To demonstrate what I mean I'm attaching a sample for your reference.
Hope this helps,
Martin PavlovInfragistics, Inc.
OK, summarizing, if I have an igEditor type 3 (datepicker) and want to catch text changed event I have to use igeditortextchanged instead of igdatepickertextchanged. Well, it is a bit exotic but works fine ;) Thanks Martin.