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' がありますが、変更しようとしている div には 'column grid_9' があります。特定の div の内容を変更したい場合は、id で参照する方がはるかに良いでしょう。そうしないと、 を介して特定のクラスを持つ要素の配列を取得する必要があります$$('.grid-9')。

もう 1 つの問題は、純粋な JavaScript と MooTools を混在させることです。これは一般的に悪い考えです。MooTools ライブラリが問題を解決する機能を提供している場合は、標準の JavaScript ではなく、それを使用することをお勧めします。たとえば、要素の HTML コンテンツを変更するには、 L メソッドset('html', someHTML)ではなく使用します。innerHTM

したがって、変更する 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 に答える