使用Javascript没有在剧本,但为HTML,而不是渲染剧本、但为、而不是、Javascript

2023-09-10 19:02:55 作者:随心所遇〃

这问题是小猪回来的previous一个我问yesterday,其中涉及移动模型的创建/编辑功能到其索引页面。我有最后一个问题是,我当我去删除一个模式,我有一些JavaScript代码应该运行重新加载模型的列表,以反映在数据库中的变化。这个js被呈现为HTML。这里是code,我认为是相关的:

在我的控制器:

  DEF破坏
  @post = Post.find(PARAMS [:ID])
  @ post.destroy
  闪光[:通知] =成功摧毁后。
  @posts = Post.all
  respond_to代码做|格式|
    format.js {渲染:CONTENT_TYPE => 文/ JavaScript的}
  结束
结束
 

我的帖子部分的列表(其中有破坏链接,我指的):

 <表>
  &其中; TR>
    百分位>标题< /第i个
    百分位>含量小于/第i个
  < / TR>
  <%的职位@posts%GT;
    &其中; TR>
      &其中; TD>&其中;%= post.title%GT;&所述; / TD>
      &其中; TD>&其中;%= post.content%GT;&所述; / TD>
      < TD><%=的link_to编辑,edit_post_path(后),:类=> 编辑%GT;< / TD>
      <! - 
        这是这里的问题...我似乎无法得到它的工作。
        它不删除记录,但随后被重定向到/职位/:身份证
        并显示我的javascript为HTML。
       - >
      < TD><%=的link_to消灭,帖子,:确认=> 你确定吗?,:方法=> :删除:类=> 摧毁%GT;< / TD>
    < / TR>
  <%结束%GT;
< /表>
 
JavaScript是如何工作的 渲染引擎和优化其性能的技巧

destroy.js.erb:

  $(#post_errors)隐藏(300);
$(#flash_notice)HTML(<%= escape_javascript(闪光[:通知])%>中)。
$(#flash_notice)显示(300)。
$(#posts_list)HTML(<%= escape_javascript(渲染(:部分=>中帖))%>中);
 

这是被加载的页面加载javscript:

  //设置为表格/链接Ajax请求。
$(文件)。就绪(函数(){
  $(#new_post)submitWithAjax()。
  $(a.edit)。每个(函数(){
    $(本).getWithAjax();
  });
  $(a.destroy)。每个(函数(){
    $(本).postWithAjax();
  });
});

//设置AJAX发送JavaScript的请求
jQuery.ajaxSetup({
  beforeSend:功能(XHR){xhr.setRequestHeader(接受,文/ JavaScript的)}
});

jQuery.fn.submitWithAjax =功能(){
  this.submit(函数(){
    $。员额(this.action,$(本).serialize(),NULL,脚本);
    返回false;
  });
  回到这一点;
};

jQuery.fn.getWithAjax =功能(){
  this.click(函数(){
    $获得(this.href,NULL,NULL,文字);
    返回false;
  });
  回到这一点;
};

jQuery.fn.postWithAjax =功能(){
  this.click(函数(){
    $。员额(this.href,NULL,NULL,文字);
    返回false;
  });
  回到这一点;
};
 

要看到的是,我使用了code,检查出我张贴的其他问题,但我认为这是足够的,看看有什么我做错了。此外,当我运行Chrome和点击破坏链接,镀铬向我展示一个JavaScript警告:

  PTED的文档,但与MIME类型text / javascript的转移资源跨$ P $。
 

解决方案

这个问题的答案的问题是,在请求头中,接受头应该被设定为文/ JavaScript的或类似的东西。这应该在这做了js函数:

  jQuery.ajaxSetup({
  beforeSend:功能(XHR){xhr.setRequestHeader(接受,文/ JavaScript的)}
});
 

POST 的要求,这是发生就好了,可是当我想做一个 PUT 请求或删除的要求,这将不会被莫名其妙地叫,或者是被忽略。我认识到,使用 rails.js 的jQuery插件/ AJAX是需要的,因为我使用HTML5来引用。

对于编辑和删除工作,我这样做是为了我的的link_to 方法:

 的link_to编辑,edit_post_path(后),数据远程=> 真,数据法=> '得到'
的link_to消灭,后,数据证实=> 你确定吗?,数据远程=> 真,数据法=> '删除'
 

添加这些HTML属性,我允许锚标记 rails.js 来确定,我想与他们做一些Ajax请求。他们开始后的工作。

This question is to piggy back off of a previous one I asked yesterday, which deals with moving the create/edit feature of a model onto its index page. One last issue I am having is that I when I go to delete a model, I have some javascript that is supposed to run that reloads the list of models to reflect the change in the database. This js is being rendered as html. Here is the code that I think is relevant:

in my controller:

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

my list of posts partial (which has the destroy link that I am referring to):

<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") ) %>");

javscript that gets loaded as the page loads:

// 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;
};

To see all of the code that I'm using, check out the other question I posted, but I think that this is enough to see what I'm doing wrong. Also, when I'm running chrome and click the destroy link, chrome shows me a javascript warning:

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

解决方案

The answer to this problem is that in the request headers, the Accept header should have been set to text/javascript or something similar. This should have been done in this js function:

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

for POST requests, this was happening just fine, but when I wanted to do a PUT request or a DELETE request, this wouldn't get called somehow or it was being ignored. I realize that using the rails.js plugin for jQuery/AJAX was needed to be referenced since I am using HTML5.

For the edits and deletes to work, I did this to my link_to methods:

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'

adding those html attributes to my anchor tags allowed rails.js to determine that I wanted to do some ajax requests with them. They started working after that.