0

我正在使用 joomla 2.5，我想用ajax和mootools<div>修改标签

在我的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>标签内。

4

1 回答 1

1

我看到您代码中的 div 具有类“grid_4”，但您尝试修改的那个具有“列 grid_9”。如果您想更改特定 div 的内容，最好通过 id 引用它，否则您将不得不通过 获取具有特定类的元素数组$$('.grid-9')。

另一个问题是您将纯 JavaScript 与 MooTools 混合在一起，这通常是个坏主意。如果 MooTools 库提供了一个函数来解决您的问题，那么最好使用它而不是标准的 JavaScript。例如要更改元素的 HTML 内容，请使用set('html', someHTML)而不是innerHTML 方法。

所以，试着给你的 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

于 2012-11-07T09:38:58.043 回答