how to use Jquery AJAX in Joomla Components?

Question

i m developing site in Joomla, meanwhile i stuck in a problem,please help me in below problem

here is my folder structure for component

htdocs/Joomla/administrator/component/com_test/test.php,controller.php
                                              models/test.php
                                              controllers/test.php
                                              views/test/view.html.php
                                              view/test/tmpl/default.php

now in view.html.php i created a form where i m using jquery ajax code for usernmae availability check

but i m not getting how do i combine all things to get the result that usename is available or not

here is my code written on test/view.html.php

<script type="text/javascript">
 jQuery(document).ready(function(){
 jQuery("#username").change(function () {
    var usr = jQuery("#username").val();
    if (usr.length >= 2) {
     jQuery("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');
     jQuery.ajax({
         type: "POST",
         url: "index.php?option=com_test&view=check_user",
         data: "username=" + usr,
         success: function (msg) {
         jQuery("#status").ajaxComplete(function (event, request, settings) {
         if (msg == 'OK') {
            jQuery("#username").removeClass('object_error'); // if necessary
                jQuery("#username").addClass("object_ok");
         }
         else {
               jQuery("#username").removeClass('object_ok'); // if necessary
               jQuery("#username").addClass("object_error");
               jQuery(this).html(msg);
         }
       });
      }
    });
  }    
});

<script>

<form action="" method="post" name="addUserForm" id="addUserForm" > 
   <table width="100%" border="0" cellpadding="4" cellspacing="2">
     <tr>
    <th >User Name :</th>
        <td ><input type="text" name="username" id="username" size="50">
             <span id="status"></span>  
        </td>
     </tr>      
   </table>
</form>

---

i have created below folders structure for above action , please tell me where do i mistake

view/check_user/view.html.php
views/check_user/tmpl/default.php

code in check_user/view.html.php

<?php

// no direct access
defined('_JEXEC') or die('Restricted access');

jimport( 'joomla.application.component.view');

/**
 * HTML View class for the advertising component
 */
class TestViewCheck_user extends JView 
{
   /**
    * Default display function
    */  
    function display($tpl = null) 
    {
        $testController = new TestController();
        // Make an object of Main Model class contains Main functions
        $testModel = $testController->getModel('test');
        $userName  = JRequest::getVar('username');
        parent::display($tpl);
        }
 }
?>

but when i run this code...why http://localhost/Joomla/includes/js/joomla.javascript.js file runs infinite times.. and finally give 4 error

now what i have to modify/add more??? please just guide me ....

refer any useful link which teach to create component step by step ...it will be very helpful for me

Thanks a lot

Answer 1

I found the solution. You must prevent the joomla to attach the templates and modules and ... to your output ajax data. for this you must add this code after displaying your data

//after $this->display($tpl);

global $mainframe;

$mainframe->close();