Style placeholder differently from value with best_in_place

Question

I'd think I'm missing something since there seems to be no way via CSS to differentiate between a best_in_place value and the placeholder (data-nil="enter your number"). I'd just like to style the placeholder differently then the actual value so it doesn't seem confusing.

I've looked into the events and could actually add a class to the element, however when they are displayed on the page the first time, no events are available to add that class. At this point I would iterate over each $('best_in_place') and compare the nil value to that of the html in the span, however before I do this I'm just wondering if I missed something.

So is there a way to distinguish that a value has been set with best_in_place?

If code makes you understand better: This works, simply adds or removes a class to a best_in_place, however it will only be set when user edits the field, not on the inital page load.

$('.best_in_place').bind('best_in_place:update', function(evt){
    if($(this).data('nil') == $(this).html()){
      $(this).removeClass('has_value');
    }else{
      $(this).addClass('has_value');
    }
  });

score 6 · Answer 1 · edited Oct 31 '13 at 02:36

Thanks for that code. I resolved this with

In my example.js.erb

$('.top-column .best_in_place').each(function() {
  var element = $(this);

  if(element.data('nil') != element.text()) {
    updateBestInPlace($(this));
  }
});

And in example.js

$(document).ready(function(){
  $('.top-column .best_in_place').live("ajax:success", function(){
  updateBestInPlace($(this));
  });
});

function updateBestInPlace(element){
  if(element.data('nil') == element.html() || element.html() == ""){
  element.removeClass('has_value');
  }else{
   element.addClass('has_value');
  }
 }

score 5 · Answer 2 · answered Jan 24 '14 at 05:02

One very simple solution is to include markup in your :nil value, like this:

= best_in_place @user, :email, nil: '<span class="none-yet">None yet!</span>'

Then you can have a CSS rule like this:

.none-yet {
  font-style: italic;
}

This is working for me with revision df178520bf9ba405baee9528d5dbb630d6ff760c from git://github.com/bernat/best_in_place.git

Style placeholder differently from value with best_in_place

2 Answers2