使用按钮打开包含库存项目详细信息的页面 [英] Using a button to open a page containing details of a stock item

问题描述

我的目的是在索引页面上显示带有链接的产品。当点击链接时，会显示一个'模态'页面，显示该产品的详细信息。

My intention is to show products on the index page with links. When the link is clicked a 'modal' page opend showing the details of that product.

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

I have a button that links to a product page, but not the other items on the index page.

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

How do I use this link to open each product page?

按钮的代码：

<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';
?>

页面详情-modal-item01.php或多或少是其他项目的模板：

The page details-modal-item01.php is more or less a template for the other items:

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

任何帮助都将不胜感激。

Any help will be appreciated.

推荐答案

而不是所有包含爵士乐，一旦你有很多产品将变得无法管理，你应该使用ajax加载内容/部分或从json构建到模态内容部分。

Instead of all the include jazz, which will become unmanageable once you got many products you should use ajax to load the content/partial or build from json into the modal-content section.

好容易说完，所以这是一个例子。

Ok easy said then done, so here is an example.

通过使用ajax和partials来实现这一点。

This is genrally how I do it, by using ajax and partials.

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

The Link(s), you would need to change the data-url="" attribute to point to your partial.

<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> 之前。

The modal wrapper. This would be placed at the bottom of your template, before </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并显示部分，如果它不显示整页。

The partial, would be served from the links endpoint, you could check the request is ajax and show the partial and if its not show a full page instead.

<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 ，它处理将内容加载到模态中。

Then the jquery, which handles loading the content into the modal.

<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>

这篇关于使用按钮打开包含库存项目详细信息的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！