Question

目前，我使用Prestashop模块并使用AJAX方法，但我不知道为什么我的代码无效。

当我点击模态窗口的按钮时，没有任何反应。我认为问题在于有3个模态，但我不知道如何解决这个问题。

这是HTML代码（使用Smarty）：

{foreach from=$array item=result}
                    {*$result|@var_dump*}
                    <tr>
                        <td><img src="{$result.image}" class="img-responsive center-block"/></td>
                        <td>
                            {$result.title_fr}<br/>
                            <small class="text-muted">{$result.content_fr}</small>
                            <br>{$result.brand.title_fr}
                        </td>
                        <td><code>{$result.code}</code></td>
                        <td>
                            <p>{$result.id}</p>
                            <a href="#" class="btn btn-default" id="buttonCatalog" data-toggle="modal"
                                data-target="#img_{$result.id}">
                                <i class="icon-camera-retro"></i>
                            </a>
                            <a href="#" class="btn btn-default" id="buttonCatalog" data-toggle="modal"
                                data-target="#text_{$result.id}">
                                <i class="icon-file-text"></i>
                            </a>
                            <a href="#" class="btn btn-default" id="buttonCatalog" data-toggle="modal"
                                data-target="#full_{$result.id}">
                                <i class="icon-camera-retro" ></i> + <i class="icon-file-text"></i>
                            </a>
                            {*foreach from=$result.id item=id*}
                                {*$id|@var_dump*}
                                <!-- Modal window for the product images. -->
                                <div class="modal fade" id="img_{$result.id}" tabindex="-1" role="dialog"
                                     aria-labelledby="ModalLabelImage" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                                <h4 class="modal-title" id="ModalLabelImage">{$modalTitle}</h4>
                                            </div>
                                            <div class="modal-body">
                                                <p>{$modalImageExplain}</p>
                                                <p id="alertMessage">{$modalExplain}</p>
                                            </div>
                                            <div class="modal-footer">
                                                <label for="again" id="notAgain"><input id="again" type="checkbox" /> {$modalAgain}</label>
                                                <button type="button" class="btn btn-default"
                                                        data-dismiss="modal">{$modalCancel}
                                                </button><button class="btn btn-success" id="submitImage" data-action="{$urlAddImage}"
                                                        data-idProduct={$result.id}>{$modalDefaultPrice}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Modal window for the product description. -->
                                <div class="modal fade" id="text_{$result.id}" tabindex="-1" role="dialog"
                                     aria-labelledby="ModalLabelImage" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                                <h4 class="modal-title" id="ModalLabelImage">{$modalTitle}</h4>
                                            </div>
                                            <div class="modal-body">
                                                <p>{$modalTextExplain}</p>
                                                <p id="alertMessage">{$modalExplain}</p>
                                            </div>
                                            <div class="modal-footer">
                                                <label for="again" id="notAgain"><input id="again" type="checkbox" /> {$modalAgain}</label>
                                                <button type="button" class="btn btn-default"
                                                        data-dismiss="modal">{$modalCancel}
                                                </button><button class="btn btn-success" id="submitText" data-action="{$urlAddText}"
                                                        data-idProduct={$result.id}>{$modalDefaultPrice}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Modal window for the product description and image. -->
                                <div class="modal fade" id="full_{$result.id}" tabindex="-1" role="dialog"
                                     aria-labelledby="ModalLabelImage" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                                <h4 class="modal-title" id="ModalLabelImage">{$modalTitle}</h4>
                                            </div>
                                            <div class="modal-body">
                                                <p>{$modalFullExplain}</p>
                                                <p id="alertMessage">{$modalExplain}</p>
                                            </div>
                                            <div class="modal-footer">
                                                <label for="again" id="notAgain"><input id="again" type="checkbox" /> {$modalAgain}</label>
                                                <button type="button" class="btn btn-default"
                                                        data-dismiss="modal">{$modalCancel}
                                                </button><button class="btn btn-success" id="submitFull" data-action="{$urlAddFull}"
                                                        data-idProduct={$result.id}>{$modalDefaultPrice}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {*/foreach*}
                        </td>
                    </tr>
                {/foreach}

这是JavaScript代码：

$('#submitImage').on('click', function() {
    $('#result').empty();

    var url = $(this).data('action');
    var idProduct = $(this).data('idproduct');

    var query = $.post(url, {
        addImage: idProduct
    }, function(data) {
        $('#result').html(data);
    });

    $('#image').modal('toggle');
});
$('#submitText').on('click', function() {
    $('#result').empty();

    var url = $(this).data('action');
    var idProduct = $(this).data('idproduct');

    var query = $.post(url, {
        addText: idProduct
    }, function(data) {
        $('#result').html(data);
    });

    $('#text').modal('toggle');
});
$('#submitFull').on('click', function() {
    $('#result').empty();

    var url = $(this).data('action');
    var idProduct = $(this).data('idproduct');

    var query = $.post(url, {
        addFull: idProduct
    }, function(data) {
        $('#result').html(data);
    });

    $('#full').modal('toggle');
});

有人可以帮我吗？

Answer 1

在显示的代码中，您没有元素ID结果，以便在javascript中显示数据$('#result').html(data);。另外，例如，没有$('#image')，也许你的意思是

$('#img_'+idProduct).modal('toggle');

顺便说一句，如果$ array可以有多个元素，你应该将jQuery绑定到类而不是id。 id应该是唯一的。例如：在类中使用submitImage，而不是id，然后将javascript更改为：

$( ".submitImage" ).each(function(index) {
    $(this).on("click", function(){
          $('#result').empty();

          var url = $(this).data('action');
          var idProduct = $(this).data('idproduct');

          var query = $.post(url, {
              addImage: idProduct
          }, function(data) {
          $('#result').html(data);
       });

       $('#img_'+idProduct).modal('toggle');
    });
});

Prestashop多个模态JQuery

1 个答案: