Twitter類內容提交和更新

Question

問候。我現在正在創建報價服務，並在嘗試進行類似twitter的數據提交和顯示時鼓勵出現這樣的問題：我的所有ajax請求都會執行兩次。我使用jQuery如下：

• 我試過.click()，.live("click", function())和.one("click", function())處理與 「提交」 按鈕。他們都執行了兩次查詢。是的，也是.one("click", function())。

• 我設置超時功能，以檢查是否有新的報價，它是執行兩次太

這有什麼錯我的JS/RoR的代碼？

你可以在github看到我的所有來源。

任何幫助將是偉大的。

UPD：這是我的形式生成的HTML：

<div class="msg"></div><br /> 
<form accept-charset="UTF-8" action="/quotes" class="new_quote" id="new_quote" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="vD6hAOmZjenRFw1aO1yH75K9K7WTFneJuP3H7sOR/Qw=" /></div> 

    <div class="field"> 
    <label for="quote_author">Author</label><br /> 
    <input id="quote_author" name="quote[author]" size="30" type="text" /> 
    </div> 
    <div class="field"> 
    <label for="quote_body">Body</label><br /> 
    <textarea cols="60" id="quote_body" name="quote[body]" rows="8"></textarea> 

    </div> 
    <div class="field"> 
     <label for="quote_approved">Approved</label><br /> 
     <input name="quote[approved]" type="hidden" value="0" /><input id="quote_approved" name="quote[approved]" type="checkbox" value="1" /> 
    </div> 
    <div class="actions"> 
    <input id="quote_submit" name="commit" type="submit" value="Create Quote" /> 
    </div> 

</form> 

下面是我的javascript：

onerror = function moo(msg, url, line) { 
//alert('Error: ' + msg + '\nURL: ' + url + '\nLine: ' + line); 
} 

function moo() { 
var cnt = 0, type = ""; 
var id = $("div.quote:first").attr("id"); 

$.getJSON("/after/" + id, function(data) { 
var cnt = data.length; 

if (cnt > 0) 
$(".msg").css("backgrount-color", "#ffff00").text(cnt + " new quotes added. Please, update").fadeIn('slow').delay(20000).fadeOut('slow'); 
}); 

setTimeout("moo()", 30000); 
} 

$(document).ready(function() { 
var to = setTimeout("moo()", 30000); 

$.getJSON("/author_list", function(data) { 
$("#quote_author").autocomplete({ source: data, minLength: 1 }) 
}); 

$("form.new_quote > .actions > [type=submit]").live("click", function() { 
$.post('/ajax_new', $('form.new_quote').serialize(), function(resp) { 
resp = $.parseJSON(resp); 

if (resp[0].done == "ok") { 
$(".msg").css("background-color", "#00fe00").text("Ok").fadeIn('slow').delay(5000).fadeOut('slow'); 
$("#quote_author,#quote_body").each(function(i,e) { 
$(this).val(""); 
}); 
} 
}); 

return false; 
}); 
}); 

Answer 1

我已通過您的來源看。恕我直言，更好的方式來實現你的目標是以Rails的方式做到這一點。我的意思是你已經使用jQuery rails腳本。所以，你可以很容易地堅持UJS與RJS方法在Rails 3應用程序：

在形式：

form_for(@quote, :remote => true) do |f| 

在控制器：

def create 
    @quote = Quote.new(params[:quote]) 

    respond_to do |format| 
     if @quote.save 
     format.html { redirect_to(@quote, :notice => :quote_created) } 
     format.xml { render :xml => @quote, :status => :created, :location => @quote } 
     format.js 
     else 
     format.html { render :action => "new" } 
     format.xml { render :xml => @quote.errors, :status => :unprocessable_entity } 
     format.js 
     end 
    end 
    end 

在create.js.erb（以下爲HAML語法）：

- if @quote.errors.any? 
    $('#data_form').html('#{escape_javascript(render(:partial => "form"))}'); 
- else 
    $('ul.data_grid').prepend('#{escape_javascript(render :partial => "quote", :locals => { :quote => quote })}'); 

您可以用#data_form和報價包裝您的表單使用ul.data_grid列表或更改create.js.erb中的選擇器。同樣在該文件中，您可以清除成功的窗體並顯示Flash消息或您在此處需要的任何內容。

畢竟不要忘記扔掉從application.js中該代碼（這是不必要的了）：

$("form.new_quote > .actions > [type=submit]").live("click", function() { 
    $.post('/ajax_new', $('form.new_quote').serialize(), function(resp) { 
      resp = $.parseJSON(resp); 

      if (resp[0].done == "ok") { 
       $(".msg").css("background-color", "#00fe00").text("Ok").fadeIn('slow').delay(5000).fadeOut('slow'); 
       $("#quote_author,#quote_body").each(function(i,e) { 
        $(this).val(""); 
       }); 
      } 
     }); 

    return false; 
});