Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
LUIS LEDESMA
2165
igdatepickertextchanged never fired
posted

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>

Parents
  • 2165
    Offline posted

    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?

  • 23953
    Offline posted in reply to LUIS LEDESMA

    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!");
    

    });

     

    Hope this helps,
    Martin Pavlov
    Infragistics, Inc.

Reply Children