1

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.

4

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'.
  • Thanks for the feedback ! Im gonna try it as soon as i go back home , and if it works gonna accept the answer ! – IseNgaRt Dec 31 '14 at 7:18
  • I never created a component before and i think i messed up,Joomla docs doesnt help much to be honest. I get the error that showUser function is not defined when i try run the module. Could you please have a look on the construction of component ? pastebin.com/VA6WuRPJ . I need to create a different view file ? – IseNgaRt Dec 31 '14 at 14:22
  • I do not understand why to create a component if it is already exists - com_ajax (Joomla Ajax Interface) ? – Dmitry Rekun Jan 5 '15 at 12:51
  • did it work? Otherwise I'll try to look into your code – elk Jan 6 '15 at 18:41
  • @Dmitry Rekun: Official Joomla Documentation says: Com_ajax is generally used when you are not the developer of the component that the module or plugin is interacting with. NOTE: If you are a component developer, you do not need to use com_ajax to implement Ajax functionality in it. You can do so directly in your component.(docs.joomla.org/Using_Joomla_Ajax_Interface) - In case of standalone modules I guess it is just a question of taste. – elk Jan 6 '15 at 18:45
3

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.

  • Im still kinda Lost. Correct me if im wrong: I will take the query code(the block that parses the elements for the 2nd List)in Helper like the example.In the main file i will add the script (Now im even more confused on how to write the Jquery script) and it gonna target the <select> at tmpl/default.php ?? – IseNgaRt Dec 30 '14 at 9:03
  • Yes you should take your query code from your query.php file and put to helper.php. And yes in the main file you should add the script and it gonna target the <select> at tmpl/default.php. – Dmitry Rekun Jan 5 '15 at 12:54
  • I didnt quite understood the Joomla doc. Altough by creating the new component i can now see that its the same thing ^^ – IseNgaRt Jan 5 '15 at 13:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.