菜單與MooTools的

Question

我使用Joomla 2.5，我想修改的<div>標籤與阿賈克斯和mootools的

在我index.php文件我有這樣的：

<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> 

這是我的代碼在<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> 

而我的模塊<jdoc:include type="modules" name="mod_arq" style="none"/>有這樣的：

<div id="myDivTobeChanged">some text for change</div> 

所以最後我的頁面是：

<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> 

當我點擊這裏<li class="item-129"><a href="/index.php/descripcion">Descripción</a></li>我想改變這種

<div id="myDivTobeChanged">some text for change</div> 

這是我的腳本調用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(); 
}); 

但是這不能只改變描述頁面，但不能在<div>標籤內工作。

Answer 1

我看到你的代碼中的div有'grid_4'類，但是你嘗試修改的'grid_9'列。如果你想改變一個特定div的內容，那麼最好用id來引用它，否則你將不得不通過$$('.grid-9')獲取具有特定類的元素數組。

另一個問題是，您將純JavaScript與MooTools混合在一起，這通常是一個壞主意。如果MooTools庫提供解決問題的功能，最好使用它而不是標準的JavaScript。例如，要更改元素的HTML內容，請使用set('html', someHTML)而不是innerHTM L方法。

所以，儘量讓你的div來改變一個id，改變你行

document.getElementsByClassName('column grid_9').innerHTML= responseText; 

到這樣的事情：

document.id('#myDivTobeChanged').set('html', responseText); 

這是用於說明目的的作品的完整解決方案。您可以使用它作爲參考：

//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> 

只是要改變的請求被髮送到和自定義目標HTML div的ID，以@akhilless我修改了代碼