Question

I have a function that adds a product to the basket and then displays a success message at the top of the main content area of the page. I have got the ajax call on the onsuccess function working. I can’t however, get the success message inserted on the page before a div with the id breadcrumbBar. Here is my onSuccess function:

 onSuccess: function(transport) {

    if(transport.responseText == "oos") {

        alert("We're sorry, this product is out of stock. If the product has different options, why not try a diffrent combination?");

    }
    else
    {

        container.update(button);

        successMessage = document.createElement('div');
        successMessage.id = "basketAddSuccess";
        successMessage.insert('<p>Test</p>');
        alert($('breadcrumbBar'));
        document.body.insertBefore(successMessage, $('breadcrumbBar'));

    }

}

Here is the php which generates the html for the start of my content:

<div id="content" style="overflow: visible;">
    <section role="main">
        <div class="breadcrumbs floatLeft" id="breadcrumbBar">
            <p class="floatLeft"><a href="/products/category/<?php echo $product->parent_cat_url."/".$product->cat_url."/1"; ?>" target="_self"><?php echo $product->cat_name; ?></a>&nbsp;&gt;&nbsp;<span class="green" style="font-weight: bold;"><?php echo $product->prod_title; ?></span></p>
            <?php genSaleIcon($product->sale); ?>
        </div>

Any ideas?

Answer 1

insertBefore must be carried out on the parent node, in your case on the “main” section.

$('breadcrumbBar').parentNode.insertBefore(successMessage, $('breadcrumbBar'))