Uncaught TypeError: Cannot read property 'find' of undefined

Question

Good day, I'm using jconfirm to my website project but I'm facing a weird problem that I can't solve by my own, please see my code below.

$.confirm({
    title: 'Add Patient',
   theme: 'material',
    backgroundDismissAnimation: 'glow',
    type:'blue',
    typeAnimated: true,
    content: '' +
    '<form action="" class="formName" style ="margin: 10px;">' +
    '<div class="form-group">' +
    '<label>ID NUMBER</label>' +
    '<input type="text" class="id_number form-control" value="my id" required />' +
    '</div>' +
    '</form>',
    buttons: {
        formSubmit: {
            text: 'Submit',
            btnClass: 'btn-blue',
            action: function () {
            }
        },
        cancel: function () {
            //close
        },
    },
    onContentReady: function () {
        this.$content.find('.id_number').change(function(){
            var a = this.$content.find('.id_number').val();
             alert(a);
        });
    }
});

If you try to run that code it will return an error says.

Uncaught TypeError: Cannot read property 'find' of undefined

But the weird thing is if I change the code like this.

onContentReady: function () {
                var a = this.$content.find('.id_number').val();
                 alert(a);
        }

The error is gone and the alert pop-up.

My problem is how can I get the value of input inside the change() method? please help or what is the correct way to make this code works?

onContentReady: function () {
            this.$content.find('.id_number').change(function(){
                var a = this.$content.find('.id_number').val();
                 alert(a);
            });

Answer 1

The value of this is different inside the change() function, to check that you can log the value.

As a workaround, you can keep a reference to it and use the reference.

You can also use bind() to bind the value of this to the event handler. Or check different other ways using call() or apply.

onContentReady: function() {
    var myReferenceToThis = this;
    this.$content.find('.id_number').change(function() {
      var a = myReferenceToThis.$content.find('.id_number').val();
      alert(a);
});

Or in your case, as @Phil suggested, simply do...

onContentReady: function() {
    var myReferenceToThis = this;
    this.$content.find('.id_number').change(function() {
      var a = $(this).val();
      alert(a);
 });

Answer 2

To supplement the other response, which should be marked as correct, there are three ways to define this.

1. Function call (e.g., f()) - this refers to the global object.

2. Method call (e.g., a.f()) - this refers to the object to the left of the dot (sometimes called the receiving object).

3. New (constructor) call - this refers to a newly allocated object.

Your .change(...) call is an example of the second in the list above. @sabithpocker's solution saves the reference to this before the value of this is changed.