#jquery-ujs

I have read so many articles, documents, stackover flow, wiki, github nearly a week. Still I have a little confuse, but finally I can pass my rails link_to multiple params to ajax at js file. :-) 

Before:  home.html.erb

<%= link_to (image_tag(image.thumbnail_url, :size => '75x75')), largeimage_path(limageurl: image.original_url, limageid: image.id, limagetitle: image.title), remote: :true %>

photos_controller

def largeimage @largeimageurl = params[:largeimageurl] @largeimageid = params[:largeimageid] @largeimagetitle = params[:largeimagetitle] choice = {     :largeimageurl =>  params[:limageurl],    :largeimageid =>   params[:limageid],     :largeimagetitle =>   params[:limagetitle] } respond_to do |format|       format.html {}       format.js {render :json => choice }       format.json {render :json => choice }  end  end

photo.js 

$(function(){   console.log('test');   $('.single_image a').bind('ajax:success', function(event, data, status, xhr) {    var x = JSON.stringify(data);   alert(x);  });

In photo.js, JSON.stringify(data) can change the object to json string. But the issue is more than before step. In js file, ajax cannot get any data from rails. So, if I console out the data here, just say [object object], and if its changed to console.log(data.largeimageid); , then console shows null. 

I had no idea which parts were wrong (actually all of them, needs to fix up). 

Now:  Write link_to multiple params to jQuery-ujs way.  home.html.erb 

<%= link_to (image_tag(image.thumbnail_url, :size => '75x75')), largeimage_path, data: {remote: :true, type: :json, params: {limageurl: image.original_url, limageid: image.id, limagetitle: image.title}.to_param} %>

this HTML format is: 

<a data-remote="true" data-type="json" data-params="limageid=15455416588&limagetitle=IMG_20140328_175650&limageurl=http%3A%2F%2Ffarm6.staticflickr.com%2F5609%2F15455416588_677669f2f7_m.jpg" href="/largeimage"><img src="http://farm6.staticflickr.com/5609/15455416588_677669f2f7_s.jpg" alt="15455416588 677669f2f7 s" width="75" height="75" /></a

jQuery-ujs can handle  custome data-* attribute.  Also, add data-type as json. I thought controller can handle this encoding part, but if I add this data-type, then ajax get the correct data from rails. So, this is the key for my code. 

photos_controller 

def largeimage        choice = {      :largeimageurl =>  params[:limageurl],      :largeimageid =>   params[:limageid],      :largeimagetitle =>   params[:limagetitle]    }    respond_to do |format|      format.html {}      format.js {render :json => choice }      format.json {render :json => choice }    end   end

photo.js 

$(function(){     $('a[data-remote]')      .bind('ajax:success', function (event, data, status, xhr) {         alert(data.largeimageurl);        console.log(data.largeimageid);        console.log(data.largeimagetitle);     })    .bind('ajax:complete', function (xhr, status){       console.log("Completed!");     })   .bind('ajax:error', function (xhr, status, error){       console.log("Somthing wrong!!");   });      return false; });

I read too much of documents to remember which parts were coming from, and now I lost the reference sources.  Once, I find the reference, I will update in here.