Joomla and AJAX

Question

I'm having a terrible time trying to get the ajax call below working in my Joomla 3.6 component. The javascript function below works in the sense that it does return the data and display it in the page--for a split second--then the page reloads, and I get the result of view.html.php, which is not what I need here. I get the same results whether I set the async property to true or false. It just happens much quicker with async set to true. The data returned in view.raw.php is fine. I must avoid reloading view.html.php. The javascript function getCase() is called by "onclick" of a button and I always clear the cache before testing. Thanks.

    function getCase(getDataVal) 
{
    var examcaseid = ($('examcase_id')) ? $('examcase_id').value : -1;
    jQuery.ajax({
        type: 'GET',
        url: 'index.php?option=com_casecreator&view=examcase&format=raw&layout=edit&id='+examcaseid+'&getdata='+getDataVal,
        dataType: 'html',
        contentType: 'text/html; charset=\"utf-8\"',
        async: true,
        success: function (data, status, jq) {
            $('rc_xml_display').innerHTML = data;
            //alert('In getCase(), rc_xml_display is: '+$('rc_xml_display').innerHTML);
        },
        error: function (jq, status, e) {
            alert('Unable to retrieve case.'+JSON.stringify(jq));
        }
    });

    return;
}

Entire display() function from view.raw.php:

    public function display($tpl = null)
{
    $app            = JFactory::getApplication();
    $getdata        = $app->input->get('getdata');
    $case_index     = !empty($app->getUserState('case_index')) ? $app->getUserState('case_index') : 0;

    if ($getdata == 'nextcase' || $getdata == 'previouscase' || $getdata == 'initialcase') {
        $app->setUserState('active_tab', 'browsecases');
        $cases_arr = $app->getUserState('rc_cases');

        switch ($getdata) {
            case 'nextcase':        $case_index++; break;
            case 'previouscase':    $case_index--; break;
            case 'initialcase':     $case_index = 0; break;
            case 'default':         break;
        }
        if ($case_index < 0) {
            $case_index = 0; 
            $msg = 'You have reached the first case in the result set.';
            $app->enqueueMessage($msg, 'warning');
        }
        if ($case_index >= count($cases_arr)) {
            $case_index = count($cases_arr)-1;
            $msg = 'You have reached the last case in the result set.';
            $app->enqueueMessage($msg, 'warning');
        }

        if ( !empty($cases_arr[$case_index]) ) {
            $app->setUserState('case_index', $case_index);
            $app->setUserState('current_case', $cases_arr[$case_index]);
        }

        header("Content-Type: text/html; charset=utf-8");
        print $app->getUserState('current_case');
        $app->close();
    }
}

Answer 1

Not sure you're doing it the ideal way. Please follow our simple guide here for using the Joomla Ajax component.

In any case, your "examcase" view should have a die() immediately after echoing the data so as not to transfer control elsewhere (please let me know if you need more explanation on this).