Rails使用jsonp渲染部分作爲ajax的部件

我已經看過不少其他的答案，但我仍在努力研究如何設置Rails部件。Rails使用jsonp渲染部分作爲ajax的部件

我有我的小部件控制器驗證碼：

def widget 
    status = Company.friendly.find(params[:id]).widget.active 
    body = to_json_value(render_to_string('companies/_widget', locals: { profile: self.profile })) 

    respond_to do |format| 
     format.js { render json: { status: status, html: body }, callback: params[:callback] } 
    end 
    end 

    private 

    def to_json_value(str) 
    str.gsub!("\"", "\\\"") 
    str.gsub!(/\n+/, " ") 
    str 
    end

的self.profile方法只是設置的是那些獲得傳遞給局部變量列表。

我想要做的是給用戶一個Javascript腳本標籤，他們可以在他們的（外部）網站上嵌入。當用戶點擊該頁面時，腳本將對窗口小部件控制器進行AJAX調用，並且如果該窗口小部件處於打開狀態，它將接收到一個要在頁面上呈現的html字符串。

到目前爲止，我已經得到了widget控制器返回一個json對象的狀態和html字符串。問題是當我將本地主機url粘貼到jsonlint.com時，它說它是無效的。當我在html文件中插入腳本標籤，然後在Chrome中打開它時，也會確認這一點。我收到一個錯誤，說有一個unexpected token :。於是我改變了我的控制器和widget.js.erb以包含一個回調函數。我將, callback: params[:callback]添加到我的控制器。

我還在我的widget.js.erb文件中設置了一個回調函數（不做任何事情）。然後，我使用HTML文件中的腳本標記嵌入此文件，並在Chrome中加載該文件。當我這樣做時，我收到一個錯誤，說明showWidget未定義。

我很努力地找到解釋如何從rails應用程序通過jsonp加載數據的資源，以及回調函數如何發揮作用。

這裏是我的widget.js.erb：

function showWidget(); 

$.ajax({ 
    type: 'GET', 
    url: 'http://localhost:3000/<%= params[:company] %>/widget?callback=?', 
    jsonpCallback: 'showWidget', 
    contentType: "application/json", 
    crossDomain: true, 
    dataType: 'JSONP', 
    success: function (data) { 
    var result = JSON.parse(data); 
    $('#company-widget').html(result.html); 
    }, 
    error: function(e) { 
    console.log(e.message); 
    } 
});

這裏是我的test.html：

<div id="company-widget"></div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script> 
<script src="http://localhost:3000/taco-corp/widget.js?callback=showWidget" type="text/javascript"></script>

我也不能肯定這個地方腳本widget.js.erb應該活在我的rails應用程序中。這裏是我到目前爲止對於我的widget.js.erb：

來源

2015-04-25 ACIDSTEALTH

我想出了問題所在。我需要添加一個回調到我的rails控制器和我的$ .ajax方法。我沒有在我的ajax調用中正確設置回調。我還需要指定正確的頭文件（contentType）以解決HTTP 406錯誤。這裏是下面的工作jQuery代碼以供參考：

$(document).ready(function(){ 
    var company = 'taco-corp'; 

    $.ajax({ 
     type: 'GET', 
     url: 'http://localhost:3000/' + company + '/widget.js?callback=?', 
     contentType: "application/javascript", 
     crossDomain: true, 
     dataType: 'JSONP', 
     success: function(data) { 
      $('#company-widget').html(data.html); 
     }, 
     error: function(e) { 
      console.log(e.message); 
     } 
    }); 
});

這裏是我的軌控制器：

def widget 
    status = Company.friendly.find(params[:id]).widget.active 

    body = render_to_string('companies/_widget', layout: false, locals: { profile: self.profile }) 

    respond_to do |format| 
     format.js { render json: { status: status, html: body }, callback: params[:callback] } 
    end 
    end

來源

2015-04-27 16:28:35 ACIDSTEALTH

Rails使用jsonp渲染部分作爲ajax的部件

回答

相關問題