jQuery ajax request and inline javascript

Question

Hello fellow Stackoverflow users,

I have a page which does a AJAX request to update the shoppingcart. The problem is that the cart has some inline javascript which breaks the page on the ajax request.

The following is the ajax request i use:

    $.ajax({
        url: "Default.aspx?ID=5&productid=PROD147&cartcmd=add",
        success: function () {
            $.ajax({
                url: "Default.aspx?ID=5",
                dataType: "html",
                cache: false,
                success: function(html){
                    $(html).remove('script');
                    console.log(html);
                    var ajax_shoppingcart = $('#shoppingcart',html).html(); 
                    $('#shoppingcart').html(ajax_shoppingcart);
                    var ajax_basket = $('#topbanner_eshop',html).filter(":not(script)").html(); 
                    $('#topbanner_eshop').html(ajax_basket);
                  }
            });
        }
    });

But the problem is that the data it loads into #topbanner_eshop contains some inline javascript, which breaks the page.

It tries to import the following html:

<div id="topbanner_eshop">
    <div>
        <div>
            <a href="Default.aspx?ID=24">Shop videre » </a>
        </div>
        <div>
            2 varer i kurven
        </div>
        <div>
            Total
        </div>
        <div>
            <script type="text/javascript"> 
            // var str="190,00"; 
            var str="DKK 190,00"; 
            document.write(str.replace(/,00/, ",-")); 
            </script>
        </div>
    </div>
</div>

But when it reaches the inline script it replaces the whole page with the script result.

What did i do wrong?

What do you mean by 'inline javascript breaks the page'? Also calling document.write() after the page has been loaded will overwrite the entire page. Don't do that. — Sahil Muthoo
– Sahil Muthoo, Commented Oct 17, 2011 at 13:42

Pointy · Accepted Answer · 2011-10-17 13:39:21Z

1

Well, for one thing, there's this:

 $(html).remove('script');

You're explicitly removing the script elements.

Then, the actual script uses "document.write()", which, once the containing page has been loaded, will implicitly destroy it. In other words, calling "document.write()" implicitly calls "document.open()", which, in turn, erases the DOM.

Instead of "document.write()", you could do this:

<span id='amount'></span>
<script>
  var str = "DKK 190,00"; // I presume that's actually a server-side thing
  $('#amount').text(str.replace(/,00/, ',-'));
</script>

It would be a lot better to just fix the string with server-side code.

answered Oct 17, 2011 at 13:39

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marco Johannesen Over a year ago

Thanks.. Ill try it and come back. As you might have noticed i didnt write the basket code. And im a little unclear on regular JS.. But how can they execute it on the regular page load(it works fine if you visit the page instead of using ajax), without it erasing the page?

Pointy Over a year ago

Because while a complete page is in the process of being interpreted, it's still "open", so a call to "document.write()" does not re-open it.

ankit · Accepted Answer · 2011-10-17 13:41:17Z

1

jQuery is functioning properly. The problem is with the HTML code. Calling document.write on any page will replace the entire contents of the page with the result, so you probably want to use something else.

answered Oct 17, 2011 at 13:41

ankit

3,3583 gold badges28 silver badges39 bronze badges

Collectives™ on Stack Overflow

jQuery ajax request and inline javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related