Javascript отображается не в сценарии, а в виде HTML - PullRequest
Новая
       30

Javascript отображается не в сценарии, а в виде HTML

1 голос
/ 29 августа 2010

Этот вопрос предназначен для отмены предыдущего вопроса, который я задал вчера , который касается перемещения функции создания / редактирования модели на ее индексную страницу. Последняя проблема, с которой я столкнулся, заключается в том, что когда я иду, чтобы удалить модель, у меня есть некоторый javascript, который должен быть запущен и перезагружает список моделей, чтобы отразить изменения в базе данных. Этот JS отображается как HTML. Вот код, который я считаю уместным:

в моем контроллере: 

def destroy
  @post = Post.find(params[:id])
  @post.destroy
  flash[:notice] = "Successfully destroyed post."
  @posts = Post.all
  respond_to do |format|
    format.js {render :content_type => 'text/javascript' }
  end
end

мой список сообщений частично (который имеет ссылку уничтожить, на которую я ссылаюсь): 

<table>
  <tr>
    <th>Title</th>
    <th>Content</th>
  </tr>
  <% for post in @posts %>
    <tr>
      <td><%= post.title %></td>
      <td><%= post.content %></td>
      <td><%= link_to "Edit", edit_post_path(post), :class => "edit" %></td>
      <!--
        This is the problem here... I can't seem to get it to work.
        It DOES delete the record, but then gets redirected to /posts/:id
        and displays my javascript as html.
      -->
      <td><%= link_to "Destroy", post , :confirm => 'Are you sure?', :method => :delete, :class => 'destroy' %></td>
    </tr>
  <% end %>
</table>

destroy.js.erb: 

$("#post_errors").hide(300);
$("#flash_notice").html("<%= escape_javascript(flash[:notice])%>");
$("#flash_notice").show(300);
$("#posts_list").html("<%= escape_javascript( render(:partial => "posts") ) %>");

JavaScript, который загружается при загрузке страницы: 

// Setting up the ajax requests for the forms/links.
$(document).ready(function() {
  $("#new_post").submitWithAjax();
  $("a.edit").each(function(){
    $(this).getWithAjax();
  });
  $("a.destroy").each(function(){
    $(this).postWithAjax();
  });
});

// Setting up ajax for sending javascript requests
jQuery.ajaxSetup({
  'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
});

jQuery.fn.submitWithAjax = function() {
  this.submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
  });
  return this;
};

jQuery.fn.getWithAjax = function() {
  this.click(function() {
    $.get(this.href, null, null, "script");
    return false;
  });
  return this;
};

jQuery.fn.postWithAjax = function() {
  this.click(function() {
    $.post(this.href, null, null, "script");
    return false;
  });
  return this;
};

Чтобы увидеть весь код, который я использую, посмотрите другой вопрос, который я написал, но я думаю, что этого достаточно, чтобы увидеть, что я делаю неправильно. Кроме того, когда я запускаю Chrome и нажимаю на ссылку уничтожить, Chrome показывает мне предупреждение JavaScript: 

Resource interpreted as document but transferred with MIME type text/javascript.

Ответы [ 3 ]

3 голосов
/ 24 октября 2010

Ответ на эту проблему заключается в том, что в заголовках запроса заголовок Accept должен быть установлен на text/javascript или что-то подобное. Это должно было быть сделано в этой функции js: 

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

для POST запросов, это происходило просто замечательно, но когда я хотел выполнить запрос PUT или DELETE, это не вызывалось каким-либо образом или его игнорировали. Я понимаю, что на использование плагина rails.js для jQuery / AJAX нужно было ссылаться, так как я использую HTML5.

Для редактирования и удаления, я сделал это для моих link_to методов: 

link_to "Edit", edit_post_path(post), "data-remote" => 'true', 'data-method' => 'get'      
link_to "Destroy", post , "data-confirm" => 'Are you sure?', "data-remote" => 'true', "data-method" => 'delete'

добавление этих html-атрибутов в мои теги привязки позволило rails.js определить, что я хочу выполнить с ними несколько ajax-запросов. После этого они начали работать.

0 голосов
/ 28 сентября 2010

Я столкнулся с той же проблемой.Решением было использовать приведенный здесь сценарий: http://www.danhawkins.me.uk/2010/05/unobtrusive-javascript-with-rails-2-3-5/
Все, что вам нужно сделать, после того как вы использовали его, как описано, чтобы удалить объект, это использовать что-то похожее на этот код: 

 <%= link_to "Destroy", post , :confirm => 'Are you sure?', :class => 'remote destroy' %>

Для меня это работает как шарм.

0 голосов
/ 29 августа 2010

Источник MIME вручную может быть источником проблемы. JavaScript часто отправляется как application/x-javascript вместо text/javascript, поэтому лучше оставить его на усмотрение движка рендеринга, чтобы установить это для вас.

Также может быть лучше использовать .js.rjs для таких простых случаев, как этот, поскольку это делает ваш JavaScript в значительной степени независимым от фреймворка.

...