In joomla, how do I use a form to return dynamic content in an article via ajax

Question

I want to output the results of an ajax form that resides in a module into the article that is currently on display. Below is a screenshot of what I'd like to accomplish. I'd like to modify the mysql query that is in the article via the form input from the module(in sidebarA) via ajax.

Here is some truncated form code from the module via jumi:

<form action="http://fsdsonline.com/menumanager/index.php/menustab/all-meals/77-component-menus/124-alcohol-n" method="post">
    <option value="AND plate = '1'">Plate FSDS only</option>
    <option value="AND plate = '1'">Prep FSDS only</option>
    <option value="">Plate and Prep FSDS</option>
    </select><br /><select style="font-size: 12px;" name="menu">
    <option value="">All Meals</option>
    <input style="font-size: 12px;" onclick="location=document.menuselector.menu.options[document.menuselector.menu.selectedIndex].value;" type="button" value="Show" /></form>
<div class="success" style="display: none;">View your menu</div>

And here is the php code that is in the article via jumi.

    mysql_connect($hostname,$username, $password) OR DIE ('Unable to 
connect to database! Please try again later.');
mysql_select_db($dbname);

$plateprep        = $_POST['plateprep'];
$meal = $_POST['meal'];
$pub        = $_POST['pub'];
$avocado = $_POST['avocado'];
$alcohol = $_POST['alcohol'];


$result = mysql_query("SELECT catnum, ctgry, Shrt_Desc, `desc`,  ROUND(`Energ_Kcal`*`yield`*`qty` ) AS `cal` FROM allinnot a
LEFT JOIN allinfsds b
ON a.`NDB_No2` = b.id1
LEFT JOIN fdcat h ON b.product_type = h.unik
LEFT JOIN allinnot2 g ON a.`NDB_No2` = g.NDB_No
LEFT JOIN allincomp j ON a.`NDB_No2` = j.fsds_num
WHERE `own_id` = $user->id $plateprep $pub $meal $avocado $alcohol
ORDER BY `catnum`, `order`");


$cat = null;
$first = true;
while ($row = mysql_fetch_array($result)) {
    if ($row['catnum'] != $cat) {
       if (!$first) {
           echo '</table>'; // close the table if we're NOT the first row being output.
       }

       $first = false; // no longer the first table, so disable this check.
        echo '<p style="line-height: 12pt; font-size: 12pt;"><strong>' . $row['ctgry'] . '</strong></p>';
       echo '<table>'; // start new table
       $cat = $row['catnum'];
    }
    echo "<tr><td>" . $row['Shrt_Desc'] . "</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" . $row['desc'] . "&nbsp;&nbsp;" . $row['cal'] . " cal</td></tr>";
}
?>
</table>
</body>
</html>

I think that I've coded my query correctly, and the form looks nice, but how do I connect the two via ajax?? Thanks!!

Answer 1

I'm afraid that I'm not familiar with jumi.

Normally to do an ajax request your javascript file will make an ajax request to a specific php file. You will need to trigger this in your form somehow if you are going to use ajax. The php file should echo the information that you want, back to the file that made the ajax request.

In this case, I think that the ajax request will have to go to the page that you have jumi embedded in, but I'm not sure.

If you are going to use ajax then I recommend using jquery to do it. It makes life a lot easier. Here is an example of a simple ajax request made using jquery.

$.ajax({  
            type: "POST",  
            url: "joomla_page.php",  
            data: { 'menu': menu },   
            success: function(){  
            informationfromphp= data.menu; //This is $menu echod from php
            $('#menuid').html('<span class="food_results">Success!</span>');
            } 
        })

In your php code, capture the ajax message with something like this

if (isset($_GET['menu'])) { 
    //do something ;
} 

Then do something in the php (such as make a call to the DB). Afterwards you can return the information from the php to the ajax file using an echo.

echo $menu; 

Please note that this is not a working example, it is just a rough idea to get your started. You will find plenty of other examples on stackoverflow.

Answer 2

Using jumi with joomla will give you path problems :

In your php code, ( server side ) , you will have for all include and require to :

_ use absolute path , using $_SERVER['DOCUMENT_ROOT'] .

_Or redefine the path for jumi tu use your includes ( not tested, seems to me macGiver fixing, as using jumi anyway...).

Actualy, there is another problem , client side, caused by joomla choices :

The html BASE is defined by joomla on every pages, by default, and the base is the human readable url ... so for your url in the html and javascript, be aware of relative uri ... You will be ok with absolute uri.

So, in your case, with ajax , client side, you have to precise the target with an absolute url , and in your php, to give absolute path for all ressources used that are in other files.

Managed to make work a jquery autocompletion on joomla over jumi with that.

Note that joomla uses mootools , and that you can only include jquery late on the page ( all you do in jumi will be in the body) . And sometimes, jquery and mootols don't go well together : similar use of the $ . Sometimes you'll have to use the jquery.noConflict.

I will advice to use only one kind of javascript framework , but, sometimes, you have to manage with old choices...