Question

我正在使用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>标签内的内容。

Answer 1

我看到代码中的div有'grid_4'类，但是你尝试修改的那个有'column 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

使用MooTools的菜单

1 个答案: