Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts

Saturday, 14 July 2012

Unable to remove the tipsy tooltip plugin with using the fallback option

So I am using the tipsy tooltip plugin to alert a user that the form input in invalid if a XHR request returns false. Now I wanted to add the error text dynamically, so I used the 'fallback' option of the tipsy config, which looks like this:


   self.showTipsy = function() { 

     $('#keywords').tipsy({gravity: 'w', fallback: "Whoops. Did not find matching keywords."}); 

   };  

This is what the manual said if I want to remove it:
Tipsy tooltips are 'live' - if the source attribute's value changes, the tooltip text will be updated the next time the tooltip is shown. There's one caveat - if you wish to remove the tooltip by setting the title attribute to an empty string, set theoriginal-title attribute instead (this only applies if you're using the title attribute).
Unfortunately though, when I tried that it did not work. I also try to try to hide the tipsy as mention also in the manual. Still no luck. I did find a solution for it after doing a search on google:


   self.hideTipsy = function() { 

     $("#keywords").unbind('mouseenter mouseleave'); //workaround 

   }  

Hope that helps someone!

Wednesday, 4 July 2012

Knockout binding doesn't work when using jquery $.load() method

So I encountered a problem today with knockout binding apparently not working when I load it via ajax using the $.load() method. I had the content loaded into a modal body, and the html content had data-bind elements in it, like so:




    <form id="create-form" class="form-horizontal"> 

     <fieldset> 

      <div class="control-group success"> 

       <label class="control-label">Email address</label> 

       <div class="controls"> 

        <span class="input-xlarge uneditable-input"><%= email %></span> 

       </div> 

      </div> 

      </div> 

     </fieldset> 

    </form>  



This is my js file that comes with it:




 ko.applyBindings(new CreatePageViewModel()); 

 function CreatePageViewModel() { 

   var self = this; 

   self.fetchContents = function() { 

     alert('hello'); 

   } 

 }  


Everything should work right? Wrong. Because we have already loaded the knockout library previously and it was activated, we need to specify the context in which to apply bindings, like so:



 ko.applyBindings(new CreatePageViewModel(), document.getElementById('create-form')); 

 function CreatePageViewModel() { 

   var self = this; 

   self.fetchContents = function() { 

     alert('hello'); 

   } 

 }