Detect change in input text box made by another jquery function

Question

I'm putting together a Backbone app as a POC for my company and I'd like to include real time updates. I'm using SignalR to faciliate the update.

The app I'm creating is a calculator, so when an update occurs in a specific input box I want a number of event listeners to fire off, altering their calculations.

This works fine binding the input event to the text box in question. The backbone view detects the changes and the correct methods fire off.

However, when I update the text box using another jQuery method nothing happens. Once I receive a message from the SignalR server, I have the jQuery coded to take the message and set the input box's text and val properties.

So far I've tried binding the input, change and keyup events to the text box and I cannot get any to fire when I use the jQuery code to alter the contents of the text box.

Backbone app

var SliderView = Backbone.View.extend({
    el: $("#inputElements"), 

    events: {
        "slide": "updateVal",
        "input td input#purchasePayment": "updatePurchasePay", //Text box/Event I'm working on
        "keyup td input#fixedRate": "updateFixedRate",
        "keyup td input#returnSpxUp": "updateReturnSpx"
    },

    //This method should fire anytime the value in the #purchasePayment box changes
    //This works if I'm typing in the browser, however if the values are 
    //changed via a message received from SignalR nothing happens
    updatePurchasePay: function () {
        var val = this.$el.find('td input#purchasePayment').val();
        this.model.set({ purchasePayment: val });
        console.log('Model :' + this.model.get('purchasePayment'));
    },

    updateFixedRate: function (e) {
        var val = this.$el.find('td input#fixedRate').val();
        this.model.set({ fixedRate: val });
    },

    updateReturnSpx: function (e) {
        var val = this.$el.find('td input#returnSpxUp').val();
        this.model.set({ returnSpx: val });
    },

    updateVal: function () {
        var val = this.$el.find('td div#slider').slider("option", "value");
        this.model.set({ slidervalue: val });
    }
});

jQuery

$(document).ready(function() {
    var chat = $.connection.chatHub;

    //This method receives updates from SignalR
    //Anytime a character is received I place it in the 
    //appropriate text box
    chat.client.addNewMessageToPage = function (message) {

        //Neither the change, input, or, naturally, keyup events
        //fire when these lines of code are executed. 
        $('#purchasePayment').val(message);
        $('#purchasePayment').text(message);
    }

    $.connection.hub.start().done(function () {
        //Telling the page to send whatever is in
        //a specific text box to the SignalR server
        //each time 'keyup' event is detected
        $('#PusherInput').on('keyup', function () {
            var input = $('#PusherInput').val();
            chat.server.send(input);
        });
    });
});

score 1 · Accepted Answer · edited May 23 '17 at 10:33

There is no events firing when changing value programmaticaly. AngularJS can do this by using it's watch methods.

You can slightly modify your code to this: View events

events: {
    //other event handlers
    "change td input#purchasePayment": "updatePurchasePay"
},

There is no way of triggering oninput event programmaticaly (but you can try by reading this post), so you can trigger change event.

And your sagnalr client code:

chat.client.addNewMessageToPage = function (message) {
    $('#purchasePayment').val(message).change();
    $('#purchasePayment').text(message);
}

score 1 · Answer 2 · answered Sep 16 '14 at 20:24

1

You can trigger javascript events with jquery

$("element").trigger("event");

Hope this will be helpfull. Good luck.

answered Sep 16 '14 at 20:24

Sebastian Gabriel Vinci

158
11

Detect change in input text box made by another jquery function

2 Answers2