Q:

How to set knockout.js visible binding to true on ajax succes?

I have an HTML div with the following knockout Binding (Visible):
<div class="row"  data-bind="visible: HotelMasterRow">
    <div class="col col-lg-4">
        <div class="panel">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-edit pull-right"></span> Hotel Master
            </div>
        </div>
    </div>
</div>

On page load the visible binding is set to false. I am trying to toggle the visible binding upon Ajax success event. Following is my click binding to initiate Ajax request:
<button class="btn btn-success disabled" type="submit" data-bind="css: enablebtn, click: SearchHotel">Search</button>

JavaScript code to achieve the same is:
this.SearchHotel = function(){
            $.ajax({
                url:"../api/hotel_master_search.php",
                type:"get",
                data:{hotel: this.hotelName},
                cache: false,
                success:function(hotel_data){
                    var hotel_data = $.parseJSON(hotel_data);
                    this.HotelId = ko.observable(hotel_data[0].hotel_id);
                    this.SearchHotelName =  ko.observable(hotel_data[0].hotel_name);
                    this.HotelEN = ko.observable(hotel_data[0].hotelEN);
                    this.HotelCode = ko.observable(hotel_data[0].hotelcode);

                    this.HotelMasterRow(true);
                }
            });
        }

Even though the Ajax response did return the correct data, this.HotelMasterRow(true); doesn't seems to be working. The div is still not visible. Any Idea why ?

A:

"this" does not refer to your model in the scope of the success callback. What you want to do is declare a variable refering to "this" in your model, and call this variable in your success callback. Something like that:
var Model = function() {
    var self = this;

    this.SearchHotel = function() {
        $.ajax({
            ...
          success: function(data) {
            ...
            self.HotelMasterRow(true);
            ...
          }
        }
    }

}

