gpt4 book ai didi

javascript - 使用按钮打开包含库存项目详细信息的页面

转载 作者:行者123 更新时间:2023-11-30 20:57:48 25 4
gpt4 key购买 nike

我的目的是在带有链接的索引页上显示产品。单击链接后,会打开一个“模态”页面,显示该产品的详细信息。

我有一个链接到产品页面的按钮,但不是索引页面上的其他项目。

如何使用此链接打开每个产品页面?

按钮代码:

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#details-1">Details</button>

模态:

    <?php
include 'details-modal-item01.php';
include 'details-modal-item02.php';
?>

页面 details-modal-item01.php 或多或少是其他项目的模板:

<div id="item01" class="modal fade item01" tableindex="-1" role="dialog" aria-labelledby="details-1" aria-hidden="true"> -- rest of code goes here --</div>

我们将不胜感激。

最佳答案

而不是所有的 include jazz,一旦你有很多产品,这将变得难以管理,你应该使用 ajax 加载内容/部分或从 json 构建到模态内容部分。

说起来容易,做起来简单,下面是一个例子。


我通常是这样做的,使用 ajax 和 partials。

链接,您需要更改 data-url=""属性指向你的部分。

<a href="javascript:void(0)" class="ajax-modal" data-url="/link/to/partial" data-size="modal-md" role="button" data-toggle="modal"><i class="fa fa-plus fa-fw"></i> Open Modal</a>

模态包装器。这将放在模板的底部,在 </body> 之前.

<div id="ajax-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Loading...</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" aria-label="Close">×</button>
</div>
<div class="modal-body slow-warning"><p>Please wait...</p></div>
</div>
</div>
</div>

部分内容,将从链接端点提供服务,您可以检查请求是否为 ajax 并显示部分内容,如果它没有显示完整页面。

<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Foo Bar</h4>
</div>
<div class="modal-body"></div>
</div>

然后是 jquery,它负责将内容加载到模式中。

<script>
var ajax_modal = function(e) {
e.preventDefault();

$('#ajax-modal').modal('show');

var modal = '.modal-content';

var default_content = '' +
'<div class="modal-header">' +
' <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>' +
' <h4 class="modal-title">' +
' Loading...' +
' </h4>' +
'</div>' +
'<div class="modal-body">' +
' <p class="slow-warning">Please wait...</p>' +
'</div>';

$(modal).html(default_content);

setTimeout(function() {
if ($(document).find('.slow-warning').length > 0) {
$(document).find('.slow-warning').html('Content failed to load, please refresh your browser and try again.');
}
}, 5000);

//
var dialog_size = $(this).data('size');

if (dialog_size == 'modal-lg') {
$(modal).parent().removeClass('modal-sm modal-md modal-lg').addClass('modal-lg');
}
else if (dialog_size == 'modal-sm') {
$(modal).parent().removeClass('modal-sm modal-md modal-lg').addClass('modal-sm');
}
else {
$(modal).parent().removeClass('modal-sm modal-md modal-lg').addClass('modal-md');
}

//
var request = $.ajax({
url: $(this).data('url'),
method: "GET",
dataType: "html",
cache: false
});

request.done(function(data) {
$(modal).replaceWith($('<div />').html(data).find(modal)[0]);
});

request.fail(function(jqXHR, textStatus) {
console.log('modal failed to load', textStatus);
});
};

$(document).find('.ajax-modal').off('click').on('click', ajax_modal);
</script>

关于javascript - 使用按钮打开包含库存项目详细信息的页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47475226/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com