Refresh a div in joomla 3.x view

Question

For my component i made pre flight check page that does a lot of checking, but i don't want that checks are running at the beginning, and some times i just want check to be run.

So i that i use ajax, but that is not sollution i lose alle my classes from the joomla framework, is there better way to approce this?

my tmpl/default.php looks like this:

<div id="j-sidebar-container" class="span2">
    <?php echo $this->sidebar; ?>
    <button onClick="xmlserverinfo()">XMLserver check</button>
</div>
<div id="j-main-container" class="span10">
    <?php

        // some php stuff to get the variables

    ?>
    <div id="preflight">
        <table>
            <tbody>
                <tr>
                    <td>
                        <table>
                            <tbody>
                                <tr>
                                    <td colspan="3">XML server status</td>
                                </tr>
                                <tr>
                                    <td>Naam</td>
                                    <td>Url</td>

                                    <?php if ($proxy == '1')
                                        {
                                            echo "<td>via proxy</td>";
                                        }?>
                                        <td>Status</td>
                                </tr>
                                <div id="xmlservers"></div>
                            </tbody>
<snip>

This is the java script i use to refresh my div include ajax.js

function xmlserverinfo() 
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("xmlservers").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","components/com_hccxmlbeheer/views/preflightcheck/tmpl/xmlservers.php",true);
    xmlhttp.send();
}

This is the xmlservers.php that builds my table and thats what i want in my div:

<?php
    /**
        * @package     Joomla.Administrator
        * @subpackage  com_hccxmlbeheer
        *
        * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
        * @license     GNU General Public License version 2 or later; see LICENSE.txt
    */

    // No direct access to this file
    defined('_JEXEC') or die;
    // php stuff to get variables 



foreach ($xmlservers as $xmlserver)
   {
    echo "<tr>";
    echo "<td>$xmlserver[0]</td>";
    echo "<td>$xmlserver[1]</td>";
    if ($proxy == '1')
    {
     echo "<td>ja</td>";
    }
    $echotest = HCC::echo_test($xmlserver[1], $pluginnaam, $plugincat, '0');
    if ($echotest['Status'] == 'TRUE')
    {
     echo "<td bgcolor=\"green\">Oke</td>";
    }
    else
    {
      echo "<td bgcolor=\"red\">mislukt</td>";
    }
     echo "</tr>";
    }
    if ($proxy == '1')
    {
     foreach ($xmlservers as $xmlserver)
        {
         echo "<tr>";
         echo "<td>$xmlserver[0]</td>";
         echo "<td>$xmlserver[1]</td>";
         if ($proxy == '1')
            {
                echo "<td>nee</td>";
            }
            $echotest = HCC::echo_test($xmlserver[1], $pluginnaam, $plugincat, '1');
            if ($echotest['Status'] == 'TRUE')
            {
             echo "<td>Oke</td>";
            }
            else
            {
             echo "<td>mislukt</td>";
            }
            echo "</tr>";
            }
            }
        ?>

WHat am i doing wrong ?

Answer 1

My approce was to complicated, i switched to using jquery and put my update not in view but in task in the controller.php by using the format=raw option i get clean a table rows back.

In the head of the default.php i added:

$doc = JFactory::getDocument();
JHtml::_('jquery.framework');
$doc->addScriptDeclaration
('
    jQuery(document).ready(function()
    {
        jQuery("#XMLserversbutton").click(function()
        {
            jQuery("#XMLservers").load("index.php?option=com_hccxmlbeheer&task=XMLservers&format=raw");
        });
    });
')

My button looks like this :

<button id="XMLserversbutton">XMLserver check</button>

And my div looks like this:

<div id="XMLservers"></div>

In this way i have no need for a seperate view and i get the result i want