سلام دوستان من از popover بوت استرپ توی یکی از صفحاتم دارم استفاده می کنم. قسمتی از صفحه که دارم از popover استفاده می کنم همون قسمتیه که با ajax دارم آپدیت میکنم. زمانی که برای بار اول صفحه لود میشه popover به درستی کار می کنه ولی وقتی با ajax اون قسمت از صفحه رو که popover توشه رفرش می کنم popover کار نمی کنه.
توی مستندات بوت استرپ گفته برای مقدار دهی اولیه popover باید از کد زیر استفاده کنیم
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
اما این کدها فقط برای موقع بارگذاری صفحه هست. چطور این مشکل رو بعد آپدیت صفحه درست کنم؟
سلام دوست عزیز
popover ها در بوت استرپ، توسط جاوااسکریپت فعال میشن و وقتی شما از کد فعال کننده popover های بوت استرپ در جاوااسکریپت استفاده میکنید، یکبار بر روی المان هایی که برای آنها popover تعریف کردید حلقه میزند و آنها را فعال میکند.
برای اینکه بتوانید بصورت داینامیک هروقت که خواستید popover جدیدی به صفحه اضافه کنید (حالا به هر طریقی، مثل لود شدن با ajax و....)، باید یک تابع بسازید که موقعی که یک popover جدید اضافه شد اجرا شود. حالا این تابع چکار میکند؟ این تابع باید همان کد فعال کننده popover ها باشد.
مثال:
function updatePopovers(){
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
}حالا هروقت popover جدیدی در صفحه اضافه شد، این تابع هم باید درکنارش فراخوانی شود.
با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)