Rails 3，在 html 区域标签上使用 UJS

发布于 2024-11-09 16:19:15 字数 422 浏览 0 评论 0原文

当用户单击图像区域时，我想触发向服务器发出的 ajax 请求。有没有一种简单的方法来实现这个 a-la Rails 3 UJS？类似于 link_to ..., :remote=>true？

我尝试了以下代码：

#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"}

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

感谢您的任何帮助。

原文

When the user clicks on on area of an image I want to trigger and ajax request to the server. Is there an easy way to implement this a-la Rails 3 UJS? Something similar to link_to ..., :remote=>true?

I have tried to the following code:

#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"}

but the added data-remote attributes does not work.

Thanks for any help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

永言不败 2024-11-16 16:19:15

在尝试了几件事之后，我得出的结论是，最简单的方法是在 png 顶部有一个 HTML 锚元素，我可以简单地使用 link_to 帮助器和 :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;
}

After trying several things I concluded the easiest way is to to have an HTML anchor element on top of the png with that I can simply use the link_to helper with :remote=>true.
It took me less than 10 minutes to get the all thing working.

Edit: here is the code form my haml file (in production I removed the map element)

#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

and the css

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

回复收藏 0 原文

凡尘雨 2024-11-16 16:19:15

在jquery-rails gem（通过'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。

理想情况下，您可以通过添加另一个变量来使代码更好一点，但由于这只是一个 hack，我将其添加到现有变量中。

// 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]',

In the jquery-rails gem (path found with 'bundle show jquery-rails') there is a javascript file for jquery-ujs under vendor/assets/javascripts.

On line 51 you can see the following:

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

I found adding the area tag to this line allows you to use UJS in the same way as you do for normal links, etc.

Ideally, you would make the code a bit better by adding another variable, but since this is just a hack I added it to the existing variables.

// 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]',

回复收藏 0 原文

~没有更多了~