Menu with MooTools - ajax

Question

I am using joomla 2.5 and I want to modified a <div> tag with ajax and mootools
In my index.php file I have this:
<div id="content" class="column grid_16">
<div id="content" class="column grid_4">
<jdoc:include type="modules" name="menuHardware" style="none"/>
<jdoc:include type="modules" name="menuArq" style="none"/>
</div>
<div id="content" class="column grid_9">
<jdoc:include type="modules" name="mod_arq" style="none"/>
</div>
<jdoc:include type="component" />
<jdoc:include type="modules" name="mod_fabricante" style="none"/>
<jdoc:include type="modules" name="mod_noticias" style="none"/>
</div>
This is my code in <jdoc:include type="modules" name="menuArq" style="none"/>:
<div id="content" class="column grid_4">
<ul class="menu">
<li class="item-129">Descripción</li>
<li class="item-130">Descripción</li>
<li class="item-131">Descripción</li>
<li class="item-132">Descripción</li>
<li class="item-133">Descripción</li>
</ul>
</div>
And my module <jdoc:include type="modules" name="mod_arq" style="none"/> have this:
<div id="myDivTobeChanged">some text for change</div>
So finally my page is:
<div id="content" class="column grid_16">
<div id="content" class="column grid_4">
<ul class="menu">
<li class="item-129">
Descripción
</li>
<li class="item-130">
<li class="item-131">
<li class="item-132">
<li class="item-133">
</ul>
</div>
<div id="content" class="column grid_9">
<div id="myDivTobeChanged">some text for change</div>
</div>
when I click here <li class="item-129">Descripción</li> I want to change this
<div id="myDivTobeChanged">some text for change</div>
This is my script to call ajax:
$$('.item-129').addEvent('click', function(event){
event.stop();
var req= new Request({
method: 'get',
url: '<?php echo JURI::root()?>index.php',
data: {'do': '1'},
onComplete: function(responseText){
$('myDivTobeChanged').set('html', responseText);
}
}).send();
});
But this don´t work only change to description page but not inside the <div> tag.

Answer 1

I see the div in your code has class 'grid_4', but the one you try to modify has 'column grid_9'. If you want to change the contents of a particular div it would be much better to refer to it by id or you will have to fetch an array of elements having particular class via $$('.grid-9').
Another problem is that you mix pure JavaScript with MooTools, that is generally a bad idea. If a MooTools library provide a function to solve your problem, it is better to use it rather than standard JavaScript. For example to change HTML contents of an element, use set('html', someHTML) rather than innerHTML method.
So, try giving your div to be changed an id and changing you line
document.getElementsByClassName('column grid_9').innerHTML= responseText;
to something like this:
document.id('#myDivTobeChanged').set('html', responseText);
This is a complete solution for illustration purposes that works. You can use it for reference:
//javascript
<script type="text/javascript">
window.addEvent('domready', function(){
$$('.item-129').addEvent('click', function(event){
event.stop();
var req = new Request({
method: 'get',
url: 'http://someurl.com/test.php',
data: { 'do' : '1' },
onComplete: function(responseText) {
$('myDivTobeChanged').set('html', responseText);
}
}).send();
});
});
</script>
//sample html
<div id="content" class="column grid_4">
<ul class="menu">
<li class="item-129">Descripción</li>
<li class="item-130">Descripción</li>
<li class="item-131">Descripción</li>
<li class="item-132">Descripción</li>
<li class="item-133">Descripción</li>
</ul>
</div>
<div id="myDivTobeChanged">som text for change</div>
Just make change the address the Request is send to and customize the id of the target HTML div to be changed