整个页面标记被 AJAX 请求替换答案

【问题标题】：Entire page markup is replaced on AJAX request整个页面标记被 AJAX 请求替换
【发布时间】：2015-02-22 16:37:09
【问题描述】：

当我在 js.erb 模板中调用我的函数时，它会替换整个页面，而不仅仅是我指出的 div。有人可以帮忙吗？

remove.js.erb

$('div.mini-basket-wrapper').html("<%= j(render 'shop/baskorder/mini_basket') %>");


#This replaces the page completely
$('#basket-info').load(document.write(basket_text()));

查看

<div id="basket-info">
  <div id="basket-amount">
    <div class='mini-basket-icon'>
     <%= image_tag 'shop/icons/basket.svg', alt: '' %>
    </div>
    <script type='text/javascript'>
      document.write(basket_text());
    </script>
  </div>
</div>

    function fc_basket_text_from_cookie(empty_text, normal_text)
{
  var basket = readCookie('bk');

  if (basket)
  {
    var parts = decodeURIComponent(basket.replace(/\+/g, '%20')).split('|')

    if (parseInt(parts[1]) == 0)
      return normal_text.replace(/##VALUE##/g, parts[0]).replace(/##ITEMS##/g, parseInt(parts[1]));
      // return empty_text
    else
      return normal_text.replace(/##VALUE##/g, parts[0]).replace(/##ITEMS##/g, parseInt(parts[1]));
  } else {
    return '';
  }
}

var emptyBasketHTML = "<span class='header_text'>Items in basket: 0 Total: &#163;0.00</span>";
function basket_text(){
  var populated = "<span class='header_text'>Items in basket: ##ITEMS##</span><span class='header_text'>Total: ##VALUE##</span>";
  //populated += "<input type='submit' value='Checkout' name='commit' class='go_botton header-checkout-button'>"
  return fc_basket_text_from_cookie(emptyBasketHTML,populated);

}

【问题讨论】：

标签： javascript jquery ruby-on-rails ajax

【解决方案1】：

在这里阅读：Using document.write。

页面加载完成后，文档将关闭。尝试在其中进行 document.write 会导致内容被删除。

此外，.load() 函数用于从服务器加载数据。我相信你想要 .html 函数。

[未测试]换行$('#basket-info').load(document.write(basket_text()));

致$('#basket-info').html(basket_text());

【讨论】：

谢谢@wnbates，所以我试过了，但它什么也没做？
你能设置一个jsfiddle什么的吗？
不知道如何使用 js 和 rails 等
这不是如何使用负载。它应该将文件加载到元素中：$("#element").load("file.html") 或 file.txt 或 file.php。 api.jquery.com/load

【解决方案2】：

感谢所有输入。意识到我做错了什么，并决定在我的 js 文件中添加一个成功的 ajax：

$(document).on('ajaxSuccess', function(){
    $('#basket-amount-info').html(basket_text());
});

添加了此 ID #basket-amount-info 以在视图中包含脚本。

【讨论】：