Представление и обновление контента в стиле Twitter - PullRequest
Новая
       0

Представление и обновление контента в стиле Twitter

0 голосов
/ 30 января 2011

Привет. Я сейчас создаю службу цитат и поощряю такую ​​проблему, пытаясь сделать так, чтобы твиттер отправлял и отображал данные: все мои запросы 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;
});
});

1 Ответ

1 голос
/ 30 января 2011

Я просмотрел ваши источники. ИМХО, лучший способ достичь своей цели - это сделать это способом 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. Также в этом файле вы можете очистить форму при успехе и показать флеш-сообщения или все, что вам нужно здесь.

В конце концов, не забудьте выбросить этот код из 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;
});
...