Prestashop多模态JQuery
Prestashop多模态JQuery
提问于 2017-02-01 18:22:13
目前，我在一个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">×</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">×</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">×</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');
});有谁能帮帮我吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-01 19:43:59
在显示的代码中，您没有元素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');
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41977205
复制相关文章
相似问题
腾讯云开发者
