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"><a href="index.php/descripcion">Descripción</a></li>
<li class="item-130"><a href="index.php/descripcion">Descripción</a></li>
<li class="item-131"><a href="index.php/descripcion">Descripción</a></li>
<li class="item-132"><a href="index.php/descripcion">Descripción</a></li>
<li class="item-133"><a href="index.php/descripcion">Descripción</a></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">
<a href="/index.php/descripcion">Descripción</a>
</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"><a href="/index.php/descripcion">Descripción</a></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.
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 innerHTM
L 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"><a href="index.php/descripcion">Descripción</a></li>
<li class="item-130"><a href="index.php/descripcion">Descripción</a></li>
<li class="item-131"><a href="index.php/descripcion">Descripción</a></li>
<li class="item-132"><a href="index.php/descripcion">Descripción</a></li>
<li class="item-133"><a href="index.php/descripcion">Descripción</a></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