链接到远程以＆lt; I＆GT;标签发送Ajax的直接要求，而不是 [英] Link to remote with <i> tag sending direct request instead of ajax

问题描述

我有一个奇怪的问题。 我使用Twitter的引导BTN，BTN-主要与自定义图标类就像他们gliphicon。

I have a strange problem . I am using twitter bootstrap btn, btn-primary along with custom defined icon class just like their gliphicon.

样品code低于

<a href="send/path" class="btn btn-primary" data-loading-text="Sending..." data-remote="true" style="float:none;"><i class="icon-send margin-right-5"></i>Send</a>  

当我点击正是在文本（即发送）的按钮，它发送Ajax请求。 但是，当我点击按钮的图标就可以直接发送请求。 如果通过AJAX加载相同的按钮。这两个工作正常。

When i click exactly on the text (ie Send) in the button it sends ajax request. But when i click on the icon in the button it sends direct request. If the same button is loaded via ajax . both works fine.

我不知道为什么发送一个直接请求覆盖数据的远程功能，jQuery的轨道的javascript定义了浏览器。

I dont know why the browser sending a direct request overriding the data-remote function which the jquery rails javascript defines.

推荐答案

我最后写一个动作助手以及一个JavaScript functon使用jquery.ajax发送Ajax请求

i ended up writing a action helper along with a javascript functon to send an ajax request using jquery.ajax

 def ajax_button_tag(url, text, button_html={}, icon_html={})
        icon_html[:class] = "margin-right-5" unless icon_html[:class] 
        icon_html[:class] = icon_html[:class] + " margin-right-5" unless (icon_html[:class] && icon_html[:class].match("margin-right-5"))
        icon_html_tag = raw("<i #{icon_html.map{|k,v| "#{k}=\"#{v}\""}.join()} ></i>")
        raw("<button #{button_html.map{|k,v| "#{k}=\"#{v}\""}.join()} onclick=\"sendAjaxRequest('#{url}');\">#{icon_html_tag}#{text}</button>")
      end

function sendAjaxRequest(path, mname){
    method_type = mname || "GET";
    jQuery.ajax({
        type: method_type,
        dataType: "script",
        url: path
    });
}

<%= ajax_button_tag('/path/to/resource', {:class=>"btn btn-primary", :remote=>true, 'data-loading-text'=>'updating...'}, {:class=>'icon-save icon-white'})%>

这篇关于链接到远程以＆lt; I＆GT;标签发送Ajax的直接要求，而不是的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！