Вызов ajax Jquery не работает в уже отрисованном частичке в Rails - PullRequest
1 голос
/ 12 апреля 2011

Я использую замечательные инструкции Николаса Альпи для Jquery + Rails, где мой application.js:

jQuery.ajaxSetup({
  'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})


function _ajax_request(url, data, callback, type, method) {
    if (jQuery.isFunction(data)) {
        callback = data;
        data = {};
    }
    return jQuery.ajax({
        type: method,
        url: url,
        data: data,
        success: callback,
        dataType: type
        });
}

jQuery.extend({
    put: function(url, data, callback, type) {
        return _ajax_request(url, data, callback, type, 'PUT');
    },
    delete_: function(url, data, callback, type) {
        return _ajax_request(url, data, callback, type, 'DELETE');
    }
});

/*
Submit a form with Ajax
Use the class ajaxForm in your form declaration
<% form_for @comment,:html => {:class => "ajaxForm"} do |f| -%>
*/
jQuery.fn.submitWithAjax = function() {
  this.unbind('submit', false);
  this.submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
  })

  return this;
};



/*
Retreive a page with get
Use the class get in your link declaration
<%= link_to 'My link', my_path(),:class => "get" %>
*/
jQuery.fn.getWithAjax = function() {
  this.unbind('click', false);
  this.click(function() {
    $.get($(this).attr("href"), $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

/*
Post data via html
Use the class post in your link declaration
<%= link_to 'My link', my_new_path(),:class => "post" %>
*/
jQuery.fn.postWithAjax = function() {
  this.unbind('click', false);
  this.click(function() {
    $.post($(this).attr("href"), $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

/*
Update/Put data via html
Use the class put in your link declaration
<%= link_to 'My link', my_update_path(data),:class => "put",:method => :put %>
*/
jQuery.fn.putWithAjax = function() {
  this.unbind('click', false);
  this.click(function() {
    $.put($(this).attr("href"), $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

/*
Delete data
Use the class delete in your link declaration
<%= link_to 'My link', my_destroy_path(data),:class => "delete",:method => :delete %>
*/
jQuery.fn.deleteWithAjax = function() {
  this.removeAttr('onclick');
  this.unbind('click', false);
  this.click(function() {
    $.delete_($(this).attr("href"), $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

/*
Ajaxify all the links on the page.
This function is called when the page is loaded. You'll probaly need to call it again when you write render new datas that need to be ajaxyfied.'
*/
function ajaxLinks(){
    $('.ajaxForm').submitWithAjax();
    $('a.get').getWithAjax();
    $('a.post').postWithAjax();
    $('a.put').putWithAjax();
    $('a.delete').deleteWithAjax();
}

$(document).ready(function() {
// All non-GET requests will add the authenticity token
 $(document).ajaxSend(function(event, request, settings) {
       if (typeof(window.AUTH_TOKEN) == "undefined") return;
       // IE6 fix for http://dev.jquery.com/ticket/3155
       if (settings.type == 'GET' || settings.type == 'get') return;

       settings.data = settings.data || "";
       settings.data += (settings.data ? "&" : "") + "authenticity_token=" + encodeURIComponent(window.AUTH_TOKEN);
     });

  ajaxLinks();
});

Мой контроллер задач имеет:

 def followship
    @task = Task.find(params[:id])

    respond_to do |format|
        # some logic
        format.js {render :content_type => 'text/javascript' }
    end
  end

My followhip.js.erb:

<% if @new_follower %>
  $("#followers_list").append("<%= escape_javascript(render :partial => 'new_follower', :object => @new_follower, :locals => {:task => @task}) %>");
  $("#_user_id option[value='<%= @new_follower.id.to_s %>']").remove();
  $("#follower_<%= @new_follower.id.to_s %>").delay(500).effect("highlight", {}, 2000);
<% else %>
   $("#follower_<%= @id_to_remove %>").fadeOut("slow");
<% end %>
<% flash.discard %>

Часть _new_follower.erb:

<li id='follower_<%= @new_follower.id.to_s %>'>
  <%= @new_follower.name %>
  <%= link_to "[x]", {:controller => "tasks", :action => "followship", :id => @task, :user_id => @new_follower.id, :to_do => "exclude"}, :class => "get" if @new_follower == current_user %>
</li>

Проблема:

Когда я включаю нового последователя в задание, все идет хорошо. Новый li отображается в списке и выделяет нового пользователя. Но когда я пытаюсь исключить себя, используя ссылку [x], визуализированную с небольшой частичкой, доставленной последним вызовом ajax, страница перезагружается и на экран выводится только текст скрипта: (например, *

$("#follower_2").fadeOut("slow");

Если я перезагружаю страницу и новый подписчик отображается без использования частичного, все идет хорошо. Затухание работает.

Пожалуйста, помогите. Заранее спасибо. кстати: рельсы 2.3.8

1 Ответ

0 голосов
/ 13 апреля 2011

Использование этого подхода к application.js решило мою проблему:

http://www.danhawkins.me.uk/2010/05/unobtrusive-javascript-with-rails-2-3-5/

Спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...