CODEWITHSUNDEEP
javascriptjqueryonblur
H_duPreez
H_duPreez

Reputation: 37

JQuery onBlur event not firing

This question seems elementary but it doesn't matter what I do ( based on the various posts on SOV I went through ) I just cannot get this event to fire in my Devextreme app

The premise... All I want to do is to update an existing variable's value with the text that was entered. The value of the variable gets carried over from another page. I need to update the variable's value from the text that was written into a textbox. This is all I want to do.

Here is my html code:

<div class="dx-field-label">Code: </div>
    <div class="dx-field-value" id="txtCode" data-bind="dxTextBox: { value: CustomerCode, placeholder: 'Enter Code', showClearButton: true }"></div>
</div>

Here is my JS code :

var viewModel = {
    // CustomerID: params.CustomerID,
    // CustomerName: ko.observable(params.CustomerName),
    //CustomerEmail: ko.observable(params.CustomerEmail),
    // CustomerID: ko.observable(params.CustomerID),

    Continue: function () {
        alert('Saved'); 
    },
    CustomerID: CustomerID,
    CustomerName: CustomerName,
    CustomerCode: CustomerCode,
    CustomerEmail: CustomerEmail,
    AddCustomer: AddCustomer,

    //Add Customer
};

$('#txtCode').on('blur', 'txtCode', function () {
    CustomerCode = $("#txtCode").dxTextBox('option', 'value');      
    console.log(CustomerCode);
});

Any advice would be appreciated

EDIT

OK, I have now done this:

 CustomerID;
CustomerName.trim();
CustomerCode.trim();
CustomerEmail.trim();



ko.applyBindings({
ChangedCustomerCode: ko.observable(),
CodeFocusOut: function(e){
    ChangedCustomerCode: value;
    console.log(value);
    console.log(ChangedCustomerCode);
    CustomerCode: ChangedCustomerCode;
    console.log(CustomerCode);
}

});

var viewModel = {

    Continue: function () {
        alert('Saved');

    },



    CustomerID: CustomerID,
    CustomerName: CustomerName,
    CustomerCode: CustomerCode,
    CustomerEmail: CustomerEmail,
    AddCustomer: AddCustomer,


};


return viewModel;
};

But it tells me that I cannot apply bindings to the same elemenet multiple times. What should I do?

Upvotes: 1

Views: 1689

Answers (3)

Sergey
Sergey

Reputation: 5476

You try to handle the blur event on the 'div' element(id="txtCode"). But focus state of this element is not changed, so the blur event does not fire.

Actually, if you use knockoutjs, you should not handle the blur event manually. Just use ko.observables:

<div data-bind="dxTextBox: { value: myValue, onValueChanged: valueChanged }"></div>

ko.applyBindings({
    myValue: ko.observable(),
    valueChanged: function(e){
        alert(e.value);
    }
});

See this fiddle - http://jsfiddle.net/0284uz1f/2/

Upvotes: 1

PowerUser
PowerUser

Reputation: 1

Use event binding like so: 

$('.txtCode').on('blur', function ($this) {
    // Code.
}

Upvotes: 0

alamnaryab
alamnaryab

Reputation: 1484

try this

$('body').on('blur', '#txtCode', function () {
     CustomerCode = $("#txtCode").dxTextBox('option', 'value');

console.log(CustomerCode);
});

Upvotes: 0

Related Questions