Question

如果我的工具提示不是HTML格式，则在部分重新加载后，它将成为标准工具提示，没有格式化。但如果我在HTML模式下使用它就完全

我的所有Javascript都在主视图中，我已经尝试了一些事情，其实很多。但现在需要退后一步并寻求建议

这是定义Partial的HTML，这个DIV是更大细节View的一部分，但我只是为了简洁而显示相关代码

<div class="modal fade" id="PricingTool" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4>
                    Premise @Model.Premise.CoreSPID is @ViewData["MeteredStatus"] & contains <span class="badge">@Model.Premise.SupplyPoints.Count()</span> Spid(s)

                </h4>
                <div class="row">
                    <div class="col-md-4">

                        From <input type="text" value="@String.Format("{0:dd/MM/yyyy}", DateTime.Now.AddYears(-1))" id="from" class="datepicker">

                    </div>
                    <div class="col-md-4">

                        To <input type="text" value="@String.Format("{0:dd/MM/yyyy}", DateTime.Now.AddDays(-1))" id="to" class="datepicker">
                    </div>



                </div>
            </div>
            <div id="LoadingGif"></div>
            <div id="ResultsList" style="clear:both;">
                @{Html.RenderPartial("_DetailsPricing", Model.Premise);}
            </div>
            <div class="modal-footer">

                <a class="btn btn-primary" id="RefreshBtn">Re-Calculate</a>
                <a class="btn btn-default" data-dismiss="modal">Close</a>
            </div>
        </div>

    </div>
</div>

以下是主视图中的JavaScript：

$(document).ready(function () {

    $("[rel=show-tooltip]").tooltip({ html: true });

    $(".datepicker").datepicker({ dateFormat: "dd/mm/yy" });


    //$("#myTable").hide();
    $("#pager").hide();




    function Init() {

        if ($("#myTable").find("tr").size() > 1) {


            $("#myTable").tablesorter({ dateFormat: "uk", widgets: ['zebra'], sortList: [[2, 0]] }).tablesorterPager({ container: $("#pager") });


        } else {

            $("#myTable").hide(); $("#pager").hide();
        }

        return false;
    };


    $('.show-tooltip').each(function (e) {
        var p = $(this).parent();
        if (p.is('td')) {
            /* if your tooltip is on a <td>, transfer <td>'s padding to wrapper */
            $(this).css('padding', p.css('padding'));
            p.css('padding', '0 0');
        }
        $(this).tooltip({
            toggle: 'toolip',
            placement: 'bottom'
        });
    });



    $("#RefreshBtn").click(function () {
        ReloadPartial();
    });



    function ReloadPartial() {



        var url = '/SupplyPoint/PricingUpdate';

        var data = {
            StartDate: $('#from').val(),
            EndDate: $('#to').val(),
            SupplyPointId: $('#SupplyPointId').val().toString()
        };

        $("#ResultsList").load(url, data, function () {
            $('#LoadingGif').empty();

        });

        $('#LoadingGif').empty().html('<img src="/Content/images/ajax-loader.gif" width=31 height=31 alt="Loading image" />');




        return false;
    };
});

最后 - 这是显示工具提示的部分cshtml的代码摘录。我把剩下的都留下了，因为它不相关，只是循环传入的模型，这里还没有Javascript。这是一个完美显示工具提示的部分 - 虽然在重新加载丢失的

之后

                            <div class="show-tooltip" data-html="true" data-original-title="@pricing.VolumetricChargeWorking">


                                    <div>&pound;@Html.DisplayFor(modelItem => pricing.VolumetricCharge)</div>

Answer 1

只需将主视图中的代码放入部分视图中即可：

$("[rel=show-tooltip]").tooltip({ html: true });

这样，每次渲染部分时，它都会初始化工具提示。

重新加载部分视图工具提示失败后，Bootstrap 3 MVC4 Razor

1 个答案: