مرجع تخصصی برنامه نویسان

بزرگترین انجمن برنامه نویسان فارسی زبان

مشکل در نمایش Tooltip های Bootstrap 4 Alpha6 در Ajax Pager

شنبه, 25 شهریور 1396 00:00

مشکل در نمایش Tooltip های Bootstrap 4 Alpha6 در Ajax Pager

درود

 از پیجر زیر استفاده میکنم :

http://mvcpaging.apphb.com/

و در پنل مدیریت هم از یک قالب طراحی شده با Bootstrap 4 Alpha6 استفاده میکنم .

منتهی تنها مشکلی که داره اینه که بعدا از اولین کلیک روی صفحات پیجر tooltip ها قاطی میکنند و مکانشون در صفحه ثابت میشه و پاک نمیشن و یا به بالای صفحه میره!

ویدیو از مشکل : دانلود

قالب مدیریتی که من استفاده میکنم از Bootstrap 4 Alpha6 در طراحیش استفاده شده  و در نمایش Tooltip در هیچ بخشی مشکلی ندارد , فقط در همین قسمت پیجر و بعد از اولین درخواست ایجکسی بخطا میخورد !
این رو هم بگم که Bootstrap 4 Alpha6 از فایل مستقلی به اسم tether.min.js برای نمایش tooltip ها استفاده میکنه , 

بنظروتن این مشکل قابل حل هست ؟ یا پیجر مشابهی که همین امکانات و قابلیت ها رو داشته باشه و مستقل از bootstrap عمل کنه  و با Jquery 3 هم سازگار باشه رو میشناسید که معرفی کنید ؟

در صورت امکان اگه برای این مورد چیزی به ذهنتون میرسه پیشنهاد بدید چون توی حدود 50 View و PartialView ازین پیجر استفاده کردم و نمیخوام دوباره کدنویس کنم.

شنبه, 25 شهریور 1396 00:10

کلیک برروی صفحه 2 و ... کلیک یک درخواست ajax ارسال می کند ؟

شنبه, 25 شهریور 1396 00:17

بله با کلیک روی صفحات 2 و 3 و .. به صفحات دیگه پیجر میرود (به صورت Ajax ی) و پیجر به درستی کار میکند فقط Tooltip ها در صفحه باقی میمانند :

ویدیو کامل تر

شنبه, 25 شهریور 1396 00:19

کد های HTML که رندر شده قرار بدید.

شنبه, 25 شهریور 1396 00:28

یک نمونه رو ساده از کد هاش :

کد های View :

@using MvcPaging
@model WebShopping2017.Models.ViewModels.Product.SearchPro_ViewModel

@{
    Layout = "~/Views/Shared/Layout/_AdminLayout.cshtml";
}

@using (Ajax.BeginForm("Index", "Product",
                           new AjaxOptions { UpdateTargetId = "grid-list", HttpMethod = "Post", LoadingElementId = "loading", OnBegin = "beginPaging", OnSuccess = "successPaging", OnFailure = "failurePaging" },
                           new { id = "frm-search" }))
{
    <div id="grid-list" class="container-fluid">
        @{ Html.RenderPartial("_AjaxEmployeeList", Model); }
    </div>
}

@section Scripts{

    <script>

        $(function () {
            $('a').tooltip();
        });


        function beginPaging(args) {
            // Animate
            $('#grid-list').fadeOut('normal');
        }

        function successPaging() {
            // Animate
            $('#grid-list').fadeIn('normal');
            $('a').tooltip();
        }

        function failurePaging() {
            alert("Could not retrieve list.");
        }

    </script>
}

کد پارشیال ویو AjaxEmployeeList_ که در هر بار درخواست  فراخوانی میشود :

@using MvcPaging
@model WebShopping2017.Models.ViewModels.Product.SearchPro_ViewModel
<table class="table table-bordered table-hover">
    <thead>
    <tr>
        <th>
            ID
        </th>
        <th>
            Name
        </th>
        <th>
            Email
        </th>
        <th>
            Phone
        </th>
        <th>
            City
        </th>
    </tr>
    </thead>
    <tbody>
    @foreach (var item in Model.Products)
    {
        <tr>
            <td>
                @item.Id
            </td>
            <td>
                @item.Title
            </td>
            <td>
                @item.PrimaryPrice
            </td>
            <td>
                @item.ExistCount
            </td>
            <td>
                @item.TotalPriceSales
            </td>
        </tr>
    }
    </tbody>
</table>

<div class="container">
    @Html.Raw(Ajax.Pager(
            new Options
            {
                PageSize = Model.PageSize,
                TotalItemCount = Model.TotalItemCount,
                CurrentPage = Model.CurrentPage,
                ItemTexts = new ItemTexts() { Next = "Next", Previous = "Previous", Page = "P" },
                ItemIcon = new ItemIcon() { First = "icon-backward", Previous = "icon-chevron-left", Next = "icon-chevron-right", Last = "icon-forward" },
                TooltipTitles = new TooltipTitles() { Next = "Next page", Previous = "Previous page", Page = "Page {0}." },
                Size = Size.normal,
                Alignment = Alignment.centered,
                IsShowControls = true,
                IsShowFirstLast = true,
                //CssClass = ""
            },
            new AjaxOptions
            {
                UpdateTargetId = "grid-list",
                OnBegin = "beginPaging",
                OnSuccess = "successPaging",
                OnFailure = "failurePaging"
            }, new { controller = "Product", action = "Index", CatName = ViewData["CatName"] }))
    <div class="well">
        شروع از محصول شماره <span class="badge badge-success">@Model.ItemStart</span> تا محصول <span class="badge badge-success">@Model.ItemEnd</span>
        و تعدا کل یافته ها : <span class="badge badge-info">@Model.TotalItemCount</span>
    </div>
</div>

شنبه, 25 شهریور 1396 00:37

پس از اتمام هر درخواست  ajax آن را hide کنید

$('#element').tooltip('hide')

شنبه, 25 شهریور 1396 00:53

انجام دادم تاثثیری نداره تو صفحه میمونه , به احتمال زیادمشکل ناسازگراری با Bootstrap 4 alpha6 و اون فایل techer.js هست.

مورد مشابهی که مستقل از Bootstrap عمل کنه و شیوه کارش به همین شکل ساده باشه و در آدرس بار مرورگر هشتک نندازه  رو سراغ دارید

که البته با Jquery 3 سازگار باشه !

شنبه, 25 شهریور 1396 11:20

شما میتوانید به راحتی این مشکل رو با دستوری که گفتم حل کنید علت کار نکردنش هم در این قسمت وجود چند tooltip است ونمی داند برروی کدام کلیک شده که آن را hide کند برای حل این مسئله ازEvent delegation استفاده کنید

Understanding Event Delegation | jQuery Learning Center

شنبه, 25 شهریور 1396 16:26

ممنون مهندس , به شکلی که گفتید عمل کردم و مشکل حل شد :


    <script>

        $(function () {
            $('a').tooltip();
        });


        function beginPaging(args) {
            // Animate
            //$('#grid-list').fadeOut('normal');
            $('a').tooltip('hide');
        }

        function successPaging() {
            // Animate
            //$('#grid-list').fadeIn('normal');
            $('a').tooltip();
        }

        function failurePaging() {
            alert("Could not retrieve list.");
        }

    </script>

من دوتا قالب و _Layout در پروژم دارم یکی مال ظاهر سایت که با bootstrap 3.3.7 هست و قالب مدیریت که با boorstrap4 alpha6 هست) .

View موردنظر  رو با قالب 3.3.7 اجرا کردم Tooltip ها بدرستی اجرا میشن و مشکلی نیست ,

فقط مشکل ناسازگاری با قالب مدیریت  bootstrap 4 و قطعا فایل techer هست.

برای اطمینان از اینکه بقیه فایل های .js قالب تاثیری در این مورد ندارد صفحه رو بصورت زیر هم تست گرفتم ولی مشکل همچنان پابرجا بود!

@using MvcPaging
@model WebShopping2017.Models.ViewModels.Product.SearchPro_ViewModel

<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap Core CSS -->
    <link href="~/Content/bootstrap-4.0.0-alpha.6-dist/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<br /><br /><br />
<div class="container">

    @using (Ajax.BeginForm("Index", "Product",
        new AjaxOptions { UpdateTargetId = "grid-list", HttpMethod = "Post", LoadingElementId = "loading", OnBegin = "beginPaging", OnSuccess = "successPaging", OnFailure = "failurePaging" },
        new { id = "frm-search" }))
    {
        <div id="grid-list" class="container-fluid">
            @{ Html.RenderPartial("_AjaxEmployeeList", Model); }
        </div>
    }

</div>
    
<!--jquery 3.2.0-->
    <script src="~/Scripts/jquery/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/jquery/jquery.unobtrusive-ajax.min.js"></script>

@Scripts.Render("~/bundles/jqueryval")
<!-- Bootstrap tether Core JavaScript -->
<script src="~/Content/monster-admin/assets/plugins/bootstrap/js/tether.min.js"></script>
<script src="~/Content/bootstrap-4.0.0-alpha.6-dist/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js"></script>

<script>

    $(function () {
        $('a').tooltip();
    });


    function beginPaging(args) {
        // Animate
        //$('#grid-list').fadeOut('normal');
        $('a').tooltip('hide');
    }

    function successPaging() {
        // Animate
        //$('#grid-list').fadeIn('normal');
        $('a').tooltip();
    }

    function failurePaging() {
        alert("Could not retrieve list.");
    }

</script>
</body>
</html>






بازهم ممنونم مهندس واقعا همیشه عالی جواب میدید,
راجب مورد زیر هم چیزی به نظرتون میاد :
بعد از اولین درخواست ایجکسی Tooltip ها رو در بالا سمت چپ نشون میده :
فیلم

شنبه, 25 شهریور 1396 16:34

در کدی که گذاشتن واضح است که توانایی تشخیص tooltip را ندارد و باید از روشی که بالا گفتم اضافه کنید.

در مورد آخر بررسی کنید که چه چیزی پس از ارسال درخواست ajax تغییر می کند

شنبه, 25 شهریور 1396 18:36

کلا اون پلگین رو حذف کردم و به شکل دیگه ای اون قسمت ویرایش رو طراحی کردم.

ممنون دیگه مشکل این حله .

مهندس یه پیجر جدید هم پیدا کردم که با bootstrap 3.3.7 کاملا سازگاره -  میخوام برای بخش خود سایت استفادش کنم  - تاپیک جدا زدم , لطفا راهنمایی کنید !

ارسال پاسخ برای این تاپیک

ارسال پاسخ مخصوص اعضا سایت می باشد ! میتوانید با حساب کاربری خود وارد سایت شده یا ثبت نام کنید