Cannot read property 'replaceWith' of null - ajax call

Question

I'm trying to replace "Hello world!" with "Hello to you too" using a ajax replaceWith. However I'm getting this error:

Cannot read property 'replaceWith' of null

Where am I taking the wrong turn?

NOTE: the ajax call works with alert(response);

index.phtml:

<div id="helloworld">Hello world!</div>

<script type="text/javascript">
    jQuery.ajax({
        url: "<?php echo $this->getUrl('topperproductqa/index/ajax') ?>",
        success: function(response){
            $('#helloworld').replaceWith(response);
            //alert(response);
        }
    });
</script>

IndexController.php:

class Topper_ProductQA_IndexController extends Mage_Core_Controller_Front_Action
{
    public function indexAction()
    {
        $this->loadLayout();
        $this->renderLayout();

        return $this;
    }

    public function ajaxAction ()
    {
        $response = "Hello to you too";

        $json =  json_encode($response);
        $this->getResponse()->setHeader('Content-type', 'application/json');
        $this->getResponse()->setBody($json);
    }
}

What you have works fine: https://jsfiddle.net/dn892efr/. Are you sure it's this code that's causing the problem? — Rory McCrossan, Jan 19 '17 at 09:37
try this to see if u are actually getting the element or not....it may be jquery library issues`console.log($('#helloworld'));` — abhit, Jan 19 '17 at 09:41
Thank you! This made me look further than the code and I have figured out it was due to magento's "prototype" which is using "$". — Chris van der Geld, Jan 19 '17 at 09:42

score 1 · Accepted Answer · answered Jan 19 '17 at 09:42

I figured out Magento is using $ on prototype.js, I fixed it with:

(function($) {

    $.ajax({
        url: "<?php echo $this->getUrl('topperproductqa/index/ajax') ?>",
        dataType: "json",
        success: function(response){
            $("#helloworld").replaceWith(response);
            //alert(response);
        }
    });

})(jQuery);

Cannot read property 'replaceWith' of null - ajax call

1 Answers1