Adding ajax in Joomla Custom Module

Question

Im making a module where I have 2 dropdownlists.In the first List there are Car brands (like BMW,Audi,Seat etc). When The user select a Brand the Second List should get filled with the different Models of that Brand ( Seat ibiza,Seat Leon if you choose Seat ) . So i need to add some ajax. I never used ajax before , so after some reading the last days i made this :

<script>
function showUser(str) {
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("txtHint").innerHTML = xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET","query.php?q="+str,true);
        xmlhttp.send();

}
</script>

query.php is a file located in the tmpl folder (where the default-view file is located). This would normally work if i didnt use Joomla , but as i found out there are different ways on adding Ajax on Joomla.The most guys suggested to create a component and add it through view file.Also as i saw everyone use jquery ajax.Im forced to use that ? I tried to study a bit that technique but i got lost. Could someone explain what should be the easiest way to add Ajax in the module?(I didnt understood very clear that component-view file way) And if it is compulsory for Jquery Ajax help me prepare the call ?

I made something like this, dunno if im completly out of the way:

<script>
$(document).ready(function() {
 $('#cats').change(function() {
  var myReq = new Request({
   method: 'get',
   url: 'modules/mod_dtm_cart/tmpl/query.php'
   //More code here
 });
 });
 });
</script>

Whole code: http://pastebin.com/dAGQHJun Atm it doesnt call the query.php file and the 2nd list is filled with exactly the same elements as list1.

Answer 1

Well in case you don't want to use Joomla Ajax Interface, you could also do it like this:

You have a module and you have your component. The script code goes into a javascript file or the view of the module (so that it will be invoked by the module).

Then you build your Component. Your component only needs to be installable, it does not need any sophisticated views or anything. The important file is the component controller (controller.php). This is where you could put your database query or just build whatever you want to display. One easy way is to have a controller method like this:

function my Query(){
   // do something  - e.g. just create HTML output like this:
   $myVariableFromTheDropdownBox = $_GET['variablename']; // or use the JRequest/JInput methods
   $output = "<p>my text or whatever ".$myVariableFromTheDropdownBox."</p>";
   echo $output;
}

To direct your AJAX code to this method, just adjust this line

  xmlhttp.open("GET","query.php?q="+str,true);
  // or this one if you use jQuery
  url: 'modules/mod_dtm_cart/tmpl/query.php'

to be

  xmlhttp.open("GET","option=com_yourcomponent&task=myQuery&q="+str,true);
  // or this one if you use jQuery
  url: 'option=com_yourcomponent&task=myQuery'

The output should be contained in the responseText you already included in your xmlhttp.onreadystatechange = function() {. Should you use jQuery, the data will not be concatenated to the url directly but put into a separate data:'value' line, could be an array as well. Let me know if you need further assistance.

Be careful about whether you use GET or POST - GET variables will be visible in your URL, POST won't appear there. Also consider looking into JInput (JRequest for older Joomla! versions) instead of using $_POST / $_GET.

Have fun :-)

edit: If you want to try using the com_ajax alternative, try it like this:

• put your function (to be triggered by the AJAX request) into the helper.php of your module. Call it myQueryAjax() instead of myQuery().
• the URL for your AJAX request will now be ?option=com_ajax&module=yourmodule&format=raw&method=myQuery
• note that module=yourmodule does NOT include 'mod_', and method=myQuery does NOT include 'Ajax'.

Answer 2

I think the best option here is to use Joomla Ajax Interface

A slim, extensible component to act as an entry point for HTTP requests for stand alone modules and plugins, thus allowing for the potential of Ajax functionality in them. Com_ajax is generally used when you are not the developer of the component that the module or plugin is interacting with.

Hello Ajax World Module is an example of implementation.