Prestashop несколько модалов JQuery

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

в указанном коде у вас нет идентификатора элемента, чтобы показать данные, когда в javascript у вас есть $('#result').html(data);. также, например, нет $('#image'), может быть, вы имеете в виду

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

Btw, если $ массив может иметь более чем один элемент, то если JQuery привязать к классу, а не идентификатор. id должен быть уникальным. Например: использование submitImage в классе, а не идентификатор, а затем изменить 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'); 
    }); 
});