observable not updating when in a hidden div

Question

I have an observable binding to a textarea within a hidden div like so:

<span title="sales comment" data-bind="attr: { id: 'sales-'+year() }" style="cursor :pointer;">
 <img src="information.png" alt="Add comment" />                                                  
</span>
<div data-bind="attr: { id: 'sales-'+year()+'_content'  }" style="display : none;">
 <textarea data-bind="value: salesComment, valueUpdate: 'keydown'"> </textarea>
</div>

and viewModel

var FinancialYearViewModel = function(data, parent) {
    var self = this;
    self.year = ko.observable();
    self.salesComment = ko.observable();
};  

ko.applyBindings(new FinancialHistoryViewModel(data));

var data = {"year": "2012", "salesComment": "sales comment"}

The hidden div is used to populate the content of a qtip tooltip like this:

$(document).ready(function()
{
$("span[title]").each(function(i) {         
    content = $("#" + this.id + "_content").html();
    $(this).qtip({  content: {
          text: content
         },                     
             show: {
              event: 'click'
             },
             hide: { event : 'unfocus'}                         
    });                      
  });
});

The viewModel binds ok and qtip displays the hidden div as its content as required. However when the textarea value changes the viewModel does not update.

It does work when I remove the inline css from the div, i.e:

<div data-bind="attr: { id: 'sales-'+year()+'_content'  }">
 <textarea data-bind="value: salesComment, valueUpdate: 'keydown'"> </textarea>
</div>

But I need to hide the contents of the div by default as it's used only when a user views a qtip.

Any ideas why this css is preventing the observable from updating the viewModel?

Answer 1

I think the issue is that you're passing in the innerHTML content of the corresponding div as the qtip content, which effectively means you're duplicating HTML and loosing all viewmodel bindings.

Here's the problem line:

content = $("#" + this.id + "_content").html();

For this to work, the content of the qtip needs to be exactly the same element nodes as the nodes you've bound the viewmodel to.

I haven't looked into the content options qtip accepts, but have you tried:

content = $("#" + this.id + "_content")[0];

[UPDATE] - I've found this thread where the author comments on this. So it looks like you won't be able to use the same element nodes for the content of the qtip for version 1, but you can do this for qtip version 2.