In joomla1.5, Ajax is used for association menu explanation and double select operations.

Comments: The linkage menu is still widely used in 1.5, mainly in the unit-Classification Association, as well as the provincial/municipal linkages we usually see.

In general, this application is quite a lot. I use joomla here as a framework. It is also possible not to use it. You can follow the examples by yourself. There are many links in the garden, not many are. net, although the language is the same, but never touched. net is still not easy to understand, here we use PHP + jquery (Ajax) to implement this function, and at the same time solve how Ajax is used in joomla. in joomla, the example of JSON data exchange does not seem to exist. I am the first, maybe the last one. Let's start with the implementation process.
To use JSON, we must make the returned value be in JSON format. However, the default templates all contain header content. We can see a method from abroad, that solved the problem. I have never known how joomla uses JSON data. enter the templates/system folder and create a JSON file. PHP files. This is the Ajax data returned later. The processing method is written into this file. Here I use unit-classification to achieve level-2 interaction, the data processing here is to search for the category based on the unit Ajax get value. The Code is as follows, JSON. PHP file code:

 

Copy code

The Code is as follows:

<? PHP defined ('_ jexec') or die ('restricted access ');
$ Db = jfactory: getdbo ();
$ Id = (INT) $ _ Get ['select1 '];
If (isset ($ id )){
$ Query1 = "select ID, title from #__ categories where section =". $ ID;
$ Db-> setquery ($ query1 );
$ RSS = $ db-> loadobjectlist ();
$ Arr = array ();
Foreach ($ RSS as $ key => $ value ){
$ Arr [] = $ value;
}
$ JSON = urldecode (json_encode ($ ARR ));
Echo $ JSON;
}

The above code is to query the ID and title, and then convert them to JSON format. Here, the json_encode function is the conversion function, and urldecode prevents Chinese garbled characters. JSON data is output at the end, so that the output data is not marked with a head, and its address is index. PHP? Tmpl = JSON is used by Ajax later. tmpl is a parameter of the output component template. If its value is equal to component, only the component content is displayed, which is equivalent to index2.php. I have mentioned this tips before.
Next, we will create a test component called com_test, which does not require too many files. Here we will only test it, so there are controllers and views, and the component writing will not be discussed, no, let's look at the Code. The Code for the jquery Ajax operation linkage menu is as follows. In test view,

Copy code

The Code is as follows:

<? PHP defined ('_ jexec') or die ('restricted access ');
$ Db = jfactory: getdbo ();
$ Query = "select ID, title from #__ sections ";
$ Db-> setquery ($ query );
$ Rs = $ db-> loadobjectlist ();
?>
Ajax linkage menu Demonstration:
<Script language = "JavaScript">
Function getselect (){
Jquery. getjson ("index. php? Tmpl = JSON ", {'select1': jquery (" # select1 "). Val ()}, function (JSON ){
VaR select2 = jquery ("# select2 ");
Jquery ("option", select2). Remove ();
Jquery. Each (JSON, function (index, array ){
VaR option = "<option value = '" + array ['id'] + "'>" + array ['title'] + "</option> ";
Select2.append (option );
});
});
}
Jquery (function (){
Getselect ();
Jquery ("# select1"). Change (function (){
Getselect ();
});
});
</SCRIPT>
<Select name = 'select1 'Id = 'select1'>
<Option value = '-1' >=select = </option>
<? PHP foreach ($ RS as $ RS1) {?>
<Option value = '<? PHP echo $ RS1-> ID;?> '> <? PHP echo $ RS1-> title;?> </Option>
<? PHP }?>
</SELECT>
<Select id = "select2" name = "select2">
</SELECT>

Read all the units above, display them to the top of the first select, and then get the JSON data through getjson. Here we pass the selected value, that is, the change event, add the returned category data to the second select control to achieve the linkage menu effect. in fact, joomla has its own linkage effect, but I don't understand it. There are a lot of code. I think it's still relatively simple here. It can be used in other places without joomla, you can use arrays to replace the values found in the database, but they are generally written in the database. I didn't use $ here, but instead replaced it with jquery, and I didn't use it anymore.

Copy code

The Code is as follows:

Jquery. noconflict ();

This statement resolves conflicts between multiple JS libraries. Therefore, I used a joomla plug-in to block all imported jquery and use the plug-in jquery instead, in this way, the jquery library will not be referenced multiple times. $ is the default method of mootools. Therefore, jquery is used in joomla to write jquery code. some people like to assign this value to a temporary variable, such as J, but I find that if another component is written and assigned again, an error occurs, so it is better to agree, in this way, there will be no JS Code conflict. Once there is a conflict, it is difficult to find.
The linkage menu is probably like this. Of course, the implementation method is tens of millions. Here we talk about jquery implementation, which is more convenient and simple. Finally, we provide readers with a double select control operation code. the Code comes from others, but it is very practical and you will need it.

Copy code

The Code is as follows:

<SCRIPT>
Jquery (function (){
Jquery ('# addto'). Click (function (){
VaR Options = jquery ('# select1 option: selected'); // obtain the currently selected item
VaR remove = options. Remove (); // delete an item from the drop-down list
Remove. appendto ('# select2'); // append it to the other party
});
Jquery ('# delete'). Click (function (){
VaR removeoptions = jquery ('# select2 option: selected ');
Removeoptions. appendto ('# select1'); // you can use appendto () to delete and append objects.
});
Jquery ('# addall'). Click (function (){
VaR addoptions = jquery ('# select1 option ');
Addoptions. appendto ('# select2 ');
});
Jquery ('# removeall'). Click (function (){
VaR removealloptions = jquery ('# select2 option ');
Removealloptions. appendto ('# select1 ');
});
// Double-click the event
Jquery ('# select1'). dblclick (function (){
// Var jqueryoptions = jquery ('# select1 option: selected ');
VaR jqueryoptions = jquery ('option: selected', this); // note the space between "option" and ":". spaces are not allowed.
Jqueryoptions. appendto ('# select2 ');
});
Jquery ('# select2'). dblclick (function (){
Jquery ('# select2 option: selected'). appendto (' # select1 ');
});
});
</SCRIPT>
<Select multiple = "multiple" id = "select1" style = "width: 100px; Height: 100px;">
<Option value = "1"> 1 </option>
<Option value = "2"> 2 </option>
<Option value = "3"> 3 </option>
<Option value = "4"> 4 </option>
</SELECT>
<Button type = "button" id = "addto"> Add </button>
<Button type = "button" id = "Remove"> remove </button>
<Button type = "button" id = "addall"> Add all </button>
<Button type = "button" id = "removeall"> remove all </button>
<Select multiple = "multiple" id = "select2" name = "fids" style = "width: 100px; Height: 100px;">
</SELECT>

It is also a jquery operation. Remember to load the jquery library. I passed the test in version 1.72! The last two images are shown without a picture and no truth:

Yoby is a habit of attaching the com_test code package for your reference only! Pay attention to the JSON. php location in the code package. If you read it carefully, you can understand it and implement it successfully. It seems that this is a better way to implement Ajax in joomla.
/201207/Yuanma/joomla-ajax_jb51.rar
Copy the double SELECT statement directly. No more!
(The original Select Code in this article comes from favorites)