CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapknockout.js
Saurabh
Saurabh

Reputation: 674

Change bootstrap button class from disabled to enable using knockout.js

Following is my HTML:

            <ul class="nav navbar-nav pull-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" data-bind="text: fullName"></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Accounts & Settings</a></li>
                        <li><a href="#" data-bind="click: sout">Sign Out</a></li>
                    </ul>
                </li>
            </ul>
            <div class="input-group">
                <input type="text" class="form-control" id="hotels" placeholder="Search by Hotel Name or Hotel ID" data-bind='value: hotelName'>
                <span class="input-group-btn">
                    <button class="btn btn-success disabled" type="submit" data-bind="css: enablebtn">Search</button>
                </span>
            </div>

I am using the knockout.js text binding to get the value for fullName inside the anchor tag and an CSS binding to enable the disabled buttons with the help of two computed observables. Either of the two comuputed observable are not working.

However, If i remove the computed observable related to the CSS binding the text binding seems to work perfect.

Any help on why i am not able to add two computed variables in the Knockout.JS code ?

Following is the complete Java Script code to achieve the same:

$(document).ready(function(){
function appModel(session_info){
    var temp = $.parseJSON(session_info);
    this.userName = ko.observable(temp[0].user_name);
    this.firstName = ko.observable(temp[0].first_name);
    this.lastName = ko.observable(temp[0].last_name);
    this.hotelName = ko.observable("");

    this.fullName = ko.computed(function(){
        return this.firstName() + " " + this.lastName();
    }, this);

    this.enablebtn = ko.computed(function(){
        return this.hotelName().length() > 0 ? "enabled":"disabled";
    }, this);

    this.sout = function(){
        $.ajax({
            url:"../api/sessions.php",
            type:"get",
            data: {rqtype: '0'},
            cache:false,
            success:function(session_info){
                var data = $.parseJSON(session_info);
                if (data.status == 'Invalid_id'){
                    window.location.replace('../files/main.html');
                }
            }
        });
    }
};

$.ajax({
    url:"../api/sessions.php",
    type:"get",
    data: {rqtype: '1'},
    cache:false,
    success:function(session_info){
        var data = $.parseJSON(session_info);
        if (data.status == 'Invalid_id'){
            window.location.replace('../files/main.html');
        } else {
            ko.applyBindings(new appModel(session_info));
        }
    }
});

$(function(){
    $("#hotels").autocomplete({
        source:'../api/hotel_list_typehead.php',
        minLength:2
    });
});

});

Just for information: Sample JSON 

(Session_info:{"user_name":"[email protected]","first_name":"saurabh","last_name":"pradhan"})

Upvotes: 1

Views: 4134

Answers (1)

nemesv
nemesv

Reputation: 139778

The string.length is a property and not a function. So you have an extra set of () in your enablebtn.

The correct version should look like this:

this.enablebtn = ko.computed(function(){
    return this.hotelName().length > 0 ? "enabled":"disabled";
}, this);

Upvotes: 1

Related Questions