Magento 1.x – How to Show Bootstrap Modal Popup

The proper way to send JSON data from the controller action is to do as such:

public function indexAction()
{
        $this->getResponse()->clearHeaders()->setHeader('Content-type','application/json',true);
        $this->getResponse()->setBody(json_encode($response));
}

...where $response is an object or an array.

However, the proper way to "consume" it or to use it depends on your application. The JSON 'decoding' is handled by your ajax method in the javascript. Here are a couple examples:

jQuery

$.ajax({
    dataType: 'json',
    data: /* your data serialized */
    url: '/route/controller/action'
}).done(function(response){
    console.log(response); // will return the json as an object
});

Prototype.js

new Ajax.Response({
    requestHeaders: {Accept: 'application/json'},
    onSuccess: function(response){
        var json = response.responseText.evalJSON(true);
        console.log(json);
    }
});

You can learn more about how to use Prototype's Ajax method in this screencast I produced: http://quick.as/7x6ska7 [end: shamelessplug]

The solution for the problem was actually pretty simple and I used a bit of a shortcut since I was running low on time. Simply moving the Popover jQuery code into my .phtml file made the error go away and made everything working.

I advise to see how your JQuery file is being called upon within Magento. Might be that you've added it to a local.xml file that is actually rendered after JQuery itself is called. Look at your source code to find out and make the appropriate changes.