CODEWITHSUNDEEP
phpjqueryajaxjoomla
JustLearn
JustLearn

Reputation: 3735

how to use Jquery AJAX in Joomla Components?

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

Upvotes: 4

Views: 25179

Answers (8)

Martin
Martin

Reputation: 10563

All front end code should be in your tmpl, so your Ajax stuff should be in there too. Check this tutorial out on how to make MVC components for Joomla http://www.joomladevuser.com/tutorials/components (deadlink).

Upvotes: 3

RN Kushwaha
RN Kushwaha

Reputation: 2136

Nothing worked for me from all given solutions above(Joomla 3.1). So I used this solution. Add tmpl=component in url.

index.php?option=com_photos&view=intphoto&id=1&tmpl=component

Upvotes: 0

Paulius
Paulius

Reputation: 79

That is right, Joomla will load modules, component, whatewer Your default template and Joomla core requires... Change this behavior by using "&format=raw" (this will force Joomla to include Joomla`s "nothing") or "&template=your_own_template_for_ajax" (this will force Joomla to include Your own "nothing").

I didn`t knew about "&format=raw" so I use my own empty template for ajax. Empty tamplate makes sense for me - I can customize it the way I want (e.g. to include something by default). "&format=raw" is the good option, but not the only one. The decision depends on what You wanna do/get by default.

How to make such ajax template in front-end?

You must create a new directory (e.g. "ajax") inside front-end \templates\ directory. Then put 3 files inside:

index.php:

<jdoc:include type="component" />

templateDetails.xml:

...XML content..

Instructions on how to properly create templateDetails.xml can be found here:
http://docs.joomla.org/Creating_a_basic_templateDetails.xml_file

index.php:

<!DOCTYPE html><title></title>

That is all You need for the front-end solution.

Test it by calling like this: http://www.example.com/index.php?template=ajax

This is 100% working solution for the front-end. Back-end is not tested by me. I believe You would have to create a separate template for back-end also. Or reach the front-end template somehow (currently have no ideas on how to)...

Upvotes: 1

sathish
sathish

Reputation: 1

use format=raw in the ajax url, as this would just show the output without any template.

Upvotes: 0

burek pekaric
burek pekaric

Reputation: 11

You can use:

url: "index.php?option=com_test&view=check_user&format=raw",

which will prevent loading of entire template, but will load only component's output, which you actually want when you call your ajax functions.

Also, you might check index2.php (instead of index.php) which has been designed in a similar fashion to provide the simple output, without rendering entire template.

Upvotes: 0

Alex
Alex

Reputation: 654

In joomla 1.7 and up you can close it like this

$app = &JFactory::getApplication();
$app->close();

Upvotes: 2

muhammad sherafat
muhammad sherafat

Reputation: 41

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();

Upvotes: 4

muhammad sherafat
muhammad sherafat

Reputation: 41

1 - copy main index.php (joomlaRoot/index.php) of joomla and rename it to any name (for example: joomlaRoot/ajax.php).

2 - disable render method ($mainframe->render();)

3 - copy this code under the render method line:

/***/
$document =& JFactory::getDocument();
$content=$document->getBuffer();
foreach($content as $var){
    foreach($var as $var2){
        echo $var2;
    }
}

/**/

Upvotes: 0

Related Questions