2011-05-24 18 views
1

当用户点击我想要触发的图像区域并向服务器发送ajax请求时。有没有简单的方法来实现这个a-Rails 3 UJS?类似于link_to ...,:remote => true?Rails 3,在html区域标签上使用UJS

我曾尝试下面的代码:

#post_bar 
    =image_tag 'post_bar_270x57.png', :usemap=>'#add_post' 
    %map{:name=>"add_post"} 
    %area{:shape=>"rect", :coords=>"40,4,86,50", :href=>new_message_path, :'data-remote'=>'true', :title=>"Message"} 

但增加的数据远程属性不起作用。

感谢您的任何帮助。

回答

0

在尝试了几件事情之后,我总结出了最简单的方法,就是在png的顶部有一个HTML锚点元素,我可以简单地使用link_to helper:remote => true。 我花了不到10分钟就能完成所有工作。

编辑:这里是代码的形式我HAML文件(在生产中我删除的映射元素)

#post_bar 
    =image_tag 'post_bar_270x57.png', :usemap=>'#add_post' 
    %map{:name=>"add_post"} 
    %area{:shape=>"rect", :coords=>"40,4,86,50", :href=>new_message_path, :title=>"Message"} 
    %area{:shape=>"rect", :coords=>"100,4,146,50", :href=>new_message_path, :title=>"Reminder(140 chars)"} 
    #post_message_link 
    =link_to "", new_message_path, :remote=>true 

和CSS

#post_message_link a{ 
    position: absolute; 
    top: 0px; 
    left: 40px; 
    width: 45px; 
    height: 50px; 
    display: block; 
    z-index: 100; 
} 
+0

嗯试图通过在地图上添加锚点附近的锚点,但它似乎并不奏效。在你的设置中,你有每个区域都有自己的href吗?如果是这样的话,那么你使用什么href作为图片的锚?你可以将你的代码贴在一个贴子上吗? – Streamline 2011-05-28 03:37:17

0

在jQuery的轨道宝石(路径与发现'bundle show jquery-rails')在vendor/assets/javascripts下有一个jquery-ujs的javascript文件。

在第51行,你可以看到如下:

// Link elements bound by jquery-ujs 
linkClickSelector: 'a[data-confirm], a[data-method], a[data-remote], a[data-disable-with]' 

我发现添加区域标记这一行允许你在你的正常环节上做到同样的方式使用UJS等

理想情况下,您可以通过添加另一个变量来使代码更好一些,但是由于这只是一种破解,因此我将它添加到现有变量中。

// Link elements bound by jquery-ujs 
linkClickSelector: 'a[data-confirm], a[data-method], a[data-remote], a[data-disable-with]', 'area[data-confirm]', 'area[data-method]', 'area[data-remote]',