dongxian5735 2014-08-26 13:58
浏览 71

jquery .html()在chrome上没有正确更新,在FF上运行正常

I have created a floating div (a div that follows as you scroll) which content is updated with jquery when you click on an element. To be more specific this div is in a sidebar in opencart and shows a product's price. When a product option is selected the price in the div is updated.

Everything works fine with firefox and IE11 but has problems with chrome and opera. The last 2 browsers update the contents of the div only when it is in its top position. If you scroll down the page and click an option to update the price, the new html is rendered under the previous html and is not visible. If you scroll up or down after clicking on an option the price is updated. Here is my code:

Floating DIV:

<div id="floating_div" style="position: fixed; top: 220;width:220px; height:250px; background:#FFF; padding:1px;">
<div style=" background:#69b9cf; font-size:17px; width:100%; text-align:center; "> Η προσφορά μας είναι:</div> 
<div id="floating_div2" style=" padding:10px; padding-bottom:0px;"></div>
<div id="floating_div4" style="">
<a id="button-cart" class="button"><span class="button-cart-text">Προσθήκη στο καλάθι</span></a>
</div>

</div>

JAVASCRIPT THAT UPDATES THE DIV:

Journal.updateProductPrice = function () {

    $.ajax({
        url: 'index.php?route=journal2/ajax/price',
        type: 'post',
        data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
        dataType: 'json',
        success: function (json) {
            var price_nofpa=json.price.replace(",",".");
            price_nofpa = parseFloat(price_nofpa);

            var pricef=price_nofpa*1.23;
            var fpa = pricef-price_nofpa;
            $('.product-info .price .price-old, .product-info .price .product-price').html(json.price);
            $('.product-info .price .price-new').html(json.special);
            $('.product-info .price .price-tax').html(json.tax);
            $('.description .journal-stock').html(json.stock);


            $('#floating_div2').html('<table><tr><td>Καθαρή τιμή:</td><td><div style=\"float:right; font-size:16px; font-weight:bold;\">' + (price_nofpa).toFixed(2) + '&euro;</div></td></tr><tr><td>ΦΠΑ 23%:</td><td><div style=\"float:right; font-size:16px; font-weight:bold;\">'+(fpa).toFixed(2)+'&euro;</div></td></tr><tr><td>Μεταφορικά:</td><td><div style=\"float:right; font-size:16px; font-weight:bold;\" id=\"side_shipping\"></div></td></tr><tr><td>Τελική Τιμή:</td><td><div id="final_price" style=\"float:right; font-size:17px; font-weight:bold;\">'+ (pricef).toFixed(2) +'&euro;</div></td></tr></table><hr><b>Περιλαμβάνει:<br /></b>Εκτύπωση, Επεξεργασία,<br />Συσκευασία, Μεταφορικά,<br />Παράδοση στον χώρο σας');


        }

    });




};

Journal.updateProductW = function (pr_opt_id,pr_id) {

$.ajax({
        url: 'index.php?route=journal2/ajax/sidebarweight',
        type: 'post',
        data: {pr_opt_id:pr_opt_id, pr_id:pr_id},
        dataType: 'json',
        success: function (json) {
            if(json.cost == "error") {
                console.log("error"+json.error_m);
                if(json.error_m == "Not_logged") {
                    $('#side_shipping').html("<a href=\"index.php?route=account/login\">Please login!</a>");
                }
            } else {

                $('#side_shipping').html(json.cost+"&euro;");

                var price=$('#final_price').html();
                price=parseFloat(price);
                cost=parseFloat(json.cost)
                var final_price=price + cost;

                $('#final_price').html(final_price+"&euro;");
            }
        }

    });


};

You can test what I mean in this site: http://tzimos.gr/spinner/index.php?route=product/product&product_id=51

Just click a price in the table. Thanks in advance :)

  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥65 永磁型步进电机PID算法
    • ¥15 sqlite 附加(attach database)加密数据库时,返回26是什么原因呢?
    • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
    • ¥15 如何处理复杂数据表格的除法运算
    • ¥15 如何用stc8h1k08的片子做485数据透传的功能?(关键词-串口)
    • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗?
    • ¥200 uniapp长期运行卡死问题解决
    • ¥15 latex怎么处理论文引理引用参考文献
    • ¥15 请教:如何用postman调用本地虚拟机区块链接上的合约?
    • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题:[h264 @ 000000004faf7500]no frame?