jQuery と rails 色々

character_count.js

// require this file in the header
// And also add the following to the bottom of whatever partial you're using  
// <script type="text/javascript">
//   $("#pl_<%= index %>_full").charCount({counterText: '文字数:', transCost: 15, language: '#locale_<%= index %>'});
// </script>


(function($) {
	$.fn.charCount = function(options){
	  
		// default configuration properties
		var defaults = {	
			allowed: 140,		
			warning: 25,
			css: 'counter',
			counterElement: 'span',
			cssWarning: 'warning',
			cssExceeded: 'exceeded',
			counterText: '文字数',
			transCost: 10,
			transText: '翻訳料 &yen;',
			language: ''
		}; 
			
		var options = $.extend(defaults, options); 
		
		function calculate(obj){
      if($(options.language).val() == 'ja'){    
        // var count = $(obj).val().length;
        //var count = $(obj).val().replace(/(^\s+|\s+$|(.*)>\s*)/g,"").length;
        var count = $(obj).val().replace(/[-+=%.。＝＆（）\r\n]/g,"").length;  
        var cost = count * options.transCost;   
        $(obj).next().html(options.counterText + count + " " + options.transText + cost);
      }else{$(obj).next().html("");};
		};
				
		this.each(function() {  	
		  // Generates a <span class="counter"> after each element
			$(this).after('<'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>');
			calculate(this);
			$(this).keyup(function(){calculate(this)});
			$(this).change(function(){calculate(this)});
		});
	  
	};

})(jQuery);

jquery_samples.html

<script type="text/javascript">
// $('input.to_weight').change(function(event) {

$('input.to_weight').live('change', function() {
  var changed_weight = $(this).val();
  var changed_id = $(this).attr("id");
  var changed_zone = $("#" + changed_id.replace(/to_weight/,"zone")).val();

  $("input.to_weight").each(function () {
    if($(this).val() == changed_weight && $(this).attr("id") != changed_id){
      this_zone = $("#" + $(this).attr("id").replace(/to_weight/,"zone")).val();
      if(this_zone == changed_zone){
        alert("同じゾーン・重量の組み合わせがあります。");
        $("#"+changed_id).effect("highlight", {color: "#ff0000"}, 6000);    
      };
    }; 
  });
});
</script>


:onChange=>"$(this).closest(\".fields\").hide();"

jquery_sortable.html.erb

<style type="text/css">
ul#sortable-list li { width: 100%; list-style: none; float:left; }
ul#sortable-list li div.cell {float:left; padding:5px; min-height: 50px; }
ul#sortable-list li div.s {width: 100px;}
ul#sortable-list li div.m {width: 200px;}
ul#sortable-list li div.image img {padding: 1px; border: 1px solid #DDD; }
ul#sortable-list .handle {padding: 0px; width: 50px; height: 50px; float: left; cursor: move; background: none;}
ul#sortable-list .crud {float: right; width: 50px; height: 50px; }
  
</style>

<ul class="list" id="sortable-list">
<% for category in @categories %>
<li id="ids_<%= category.id %>" class="<%= cycle('odd', 'even') %>">
  <div class="handle">
    <div class="icon i_reorder" style="margin:15px;"></div>
  </div>
  <div class="cell image"><img src="<%= category.thumbnail.url(:s) %>"></div>
  <div class="cell s">
    <%= category.id %>
    <br/><span class="help"><%= get_display(category.display) %></span>    
  </div>
  <div class="cell m">
    <%= link_to category.formal_name, edit_vendor_category_path(category) %>
    <br /><span class="help"><%= category.name %></span>
  </div>
  <div class="cell m">
    <%= link_to "新しい子カテゴリ", new_vendor_category_path(:parent_id=>category.id) %>
    &nbsp;
    <%= link_to("[#{t('action.show_children')}]", vendor_categories_path(:parent_id=>category.id)) if category.has_children %>    
  </div>
  <div class="crud">
    <%= link_to image_tag('/images/icons/pencil.gif'), edit_vendor_category_path(category) %>
    <%= link_to(image_tag('/images/icons/bin.gif'), vendor_category_path(category), :confirm => t('help.confirm_delete'), :method => :delete) unless category.parent_id == VENDOR_ROOT_CATEGORY %>
  </div>
</li>
<% end %>
</ul>

<input type="button" onclick="reorder();" value="<%= t('action.reorder') %>"/>


<%= javascript_tag do %>
  function reorder(){
  $.ajax({
    type: 'post', 
    data: $('#sortable-list').sortable('serialize'), 
    dataType: 'script', 
    complete: function(request){
      $('#sortable-list').effect('highlight');
      alert("ソート順が保存されました");
      },
    url: '<%= reorder_vendor_categories_path %>'})    
  };
 $('#sortable-list').sortable({
   axis: 'y', dropOnEmpty:false, handle: '.handle', items: 'li', cursor: 'move', opacity: 0.4, scroll: true
 });
<% end %>
########################################################
If you want to update everytime a sort occurs you can do this, but it's horribly inefficient
<%= javascript_tag do %>
 $('#sortable-list').sortable(
    {
      axis: 'y', dropOnEmpty:false, handle: '.handle', items: 'li', cursor: 'move', opacity: 0.4, scroll: true,
      update: function(){
        $.ajax({
            type: 'post', 
            data: $('#sortable-list').sortable('serialize') + '&id=<%= newsletter.id %>', 
            dataType: 'script', 
            complete: function(request){
                $('#sortable-list').effect('highlight');
              },
            url: '<%= sort_vendor_newsletters_path %>'})
        }
      });
<% end %>

jquery_sortable_controller.rb

class CategoriesController < RootController
  def reorder
    counter = 1
    if params[:ids]
      for id in params[:ids]
        if category = current_vendor.categories.find(id)
          category.update_attribute('sort_id', counter)
        end
        counter += 1        
      end 
    end
    render :nothing => true
  end
end

jquery_validation.html

  <script src="/javascripts/jquery-validation/jquery.validate.js" type="text/javascript"></script>
  <script type="text/javascript" src="/javascripts/jquery-validation/localization/messages_<%=I18n.locale.to_s %>.js"></script>
  <script type="text/javascript">
  $.validator.setDefaults({
    //submitHandler: function() { alert("submitted!"); },
    highlight: function(input) {
      $(input).addClass("ui-state-highlight");
    },
    unhighlight: function(input) {
      $(input).removeClass("ui-state-highlight");
    }
  });
  
  $().ready(function() {$("#f").validate();});
  </script>

samples.js

function hide_selector(){
  $('#snippet_selector').removeClass('snippet_show').addClass('snippet_hide');
  $('#show_selector').toggle();
  $('#hide_selector').toggle();
};

function add_snippet(id){
  var subject = $("#subject_" + id).text();
  $("#message_subject").val(subject);
  var content = $("#content_" + id).text();
  $("#message_content").val(content);
};

translation_cost.js

// requires 
// %= f.hidden_field :translation_cost, :id => "translation_cost_#{index}" %>
// %= f.hidden_field :do_translation, :class => "do_translation" %>
// div id="translation_data_%= index %>" class="counter"></div>
// ========== inside header
  $('.translate').live('keyup', function() {
    recalculate(this, {unitPrice:<%= @vendor.current_translation_cost %>, somthing:"hello"});
  });
  $('.locale').live('change', function() {
    recalculate(this, {unitPrice:<%= @vendor.current_translation_cost %>, somthing:"hello"});
  });  
 
// =============== js file
function recalculate(obj, options){
  var defaults = {  
    unitPrice: 15,   
    countText: '文字数',
    target_locale: 'en'
  }; 
  var options = $.extend(defaults, options); 
  var index = $(obj).attr("idx");
  if(($("#locale_" + index).val() == 'ja')&&($("#tr_status_" + index).val()== '1')){
    var total_text = "";
    $(".t_" + index).each(function () {
      total_text += $(this).val();
    });  
    var count = total_text.replace(/[-+=%.。＝＆（）\r\n]/g,"").length;
    var cost = count * parseInt(options.unitPrice);  
    $("#translation_cost_" + index).val(cost);
    $("#word_count_" + index).val(count);
    $("#translation_data_" + index).html(options.countText + count + " @ &yen;" + options.unitPrice + " = &yen;" + cost); 
  }else{
    // alert($("#locale_" + index).val());
    // alert($("#tr_status_" + index).val());
    $("#translation_data_" + index).html("翻訳料はかかりません"); 
  };
};