- TypeError: $(...).modal is not a function - Boostrap 4
12
WT форуми -> HTML / Javascript / CSS -> TypeError: $(...).modal is not a function - Boostrap 4
Създайте нова тема Напишете отговор 
Автор Съобщение
Ticketa
Турист
Турист

Регистриран на: 27/02/2012 3:54 pm

Support: 23
Bonus: 46
Мнения: 288
Мнение 09/01/2019 8:34 pm     TypeError: $(...).modal is not a function - Boostrap 4 Отговорете с цитат


Привет ДАМИ и ГОСПОДА! Бъдете здрави и щастливи послучай новата 20-19! Smile))

Имам следния казус. Използвам boostrap 4, и се опитвам да визуализирам "картинка" , чрез Modal със следния код:

Javascript code:
$(window).resize(function() {
$('.element_portfolio').height($('.element_portfolio').width()/1.5);
$('.portfolio-sticky-top').css('height', $( window ).height());
if($(window).width() < 768){
$('.modal-dialog .col-12').removeClass('portfolio-sticky-top');
} else {
$('.modal-dialog .col-12').addClass('portfolio-sticky-top');
}
});

$('.element_portfolio').hover(function () {
$(this).children().fadeIn();
}, function () {
$(this).children().fadeOut();
});

$('.portfolio-fade-in').on('click', function () {
var id = $(this).attr('data-target');
var img = $(this).attr('data-img')
var group = $(this).children('h1')[0].innerText;
var name = $(this).children('h2')[0].innerText;
var description = $(this).attr('data-description');
var link = $(this).attr('data-href');
if(link == ''){
$(id + ' .modal-header').html(name);
$(id + ' .modal-btn').html(group);
$(id + ' .modal-p').html(description);
$(id + ' img').attr('src', img);
$(id).modal();
} else {
window.open(link, '_blank');
}

});

$('.portfolio-sticky-top').css('height', $( window ).height());

$('#group_all').on('click', function(){
$('.element_portfolio').fadeOut();
$('.element_portfolio').fadeIn();
$('.portfolio-menu li').css('color', 'black');
$(this).css('color', '#fe8f00')
});

$('.portfolio-menu li').on('click', function(){
if(this.id != 'group_all'){
$('.element_portfolio').fadeOut();
$('.' + this.id).fadeIn();
$('.portfolio-menu li').css('color', 'black');
$(this).css('color', '#fe8f00')
}
});

$(window).trigger('resize');


На ред 29:
Javascript code:
 $(id).modal();


FireBUG ми показва , че има грешка TypeError: $(...).modal is not a function и това е причината да не сработва кода.

Някой може ли да предложи вариант, в който да сработи? Smile)

HTML частта:
PHP code:
            <div class="portfolio_vave pt-3 pb-3" id="portfolio">
<div class="row">
<?php foreach($items as $key=>$element): ?>
<div class="ml-2 mr-2 mb-3 col-xs-12 col-lg-5 col-md-5 no-padding element_portfolio group<?= $element->group_id ?>" style="background-image: url('<?= $element->img_min_id->getSource() ?>');">
<div class="portfolio-fade-in" style="background-color:<?= $element->color ?>" data-target="#exampleModal1" data-href="<?= $element->link ?>" data-description="<?= $element->description ?>" data-img="<?= $element->img_max_id->getSource() ?>">
<h1><?= $element->group->group_name ?></h1>
<h2><?= strtoupper($element->name) ?></h2>
<i class="fa fa-angle-right"></i>
</div>
</div>
<?php endforeach; ?>
</div>

</div>

<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog portfolio-dialog" role="document">
<div class="row">
<div class="col-xs-9 text-center hidden-xs portfolio-bg-white">
<img src="" alt="" class="img-responsive" style="width: 100%;">
</div>
<div class="col-xs-12 col-sm-3 portfolio-sticky-top">
<h1 class="modal-header"></h1>
<p class="modal-p"></p>
<div class="modal-btn"></div>
</div>
<div class="col-xs-12 text-center visible-xs portfolio-bg-white">
<img src="" alt="" class="img-responsive" style="width: 100%;">
</div>
</div>
</div>
</div>
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Fakeheal
Support
Support

Регистриран на: 17/04/2010 8:37 am

Support: 350
Bonus: 698
Мнения: 2658
Мнение 09/01/2019 10:16 pm      Отговорете с цитат


Какво ти връща console.log(id), ако го сложиш след декларирането на променливата id?
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Ticketa
Турист
Турист

Регистриран на: 27/02/2012 3:54 pm

Support: 23
Bonus: 46
Мнения: 288
Мнение 10/01/2019 2:11 am      Отговорете с цитат


Така:
Javascript code:

console.log(id);
$(id).modal();


резултат:
Цитат:
#exampleModal1


Така
Javascript code:

$(id).modal();
console.log(id);


резултат:
нищо
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
joTunkiq
Активен
Активен

Регистриран на: 25/12/2012 12:03 pm

Support: 136
Bonus: 272
Мнения: 813
Мнение 10/01/2019 9:31 am      Отговорете с цитат


Здравей,

Увери се че първо зареждаш jquery и след това bootstrap.js файла.
Опрви си хтмл-а за модала, видях че липсват елементи (поне го подкарай и тогава махай части от него). Тук може да видиш хтмл-а за модал -> https://jsfiddle.net/jx21raog/

Използвай $(id).modal('show'); / $(id).modal('hide'); в зависимост какво искаш модала да прави.

Ето ти пример, след като напрвих това, което написах си се актирива модала https://jsfiddle.net/jx21raog/ Question Idea
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
Ticketa
Турист
Турист

Регистриран на: 27/02/2012 3:54 pm

Support: 23
Bonus: 46
Мнения: 288
Мнение 10/01/2019 10:10 am      Отговорете с цитат


Здрасти тънък! Very Happy

В head тага съм със следната последователност:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


След това при затваряне на body тага т.е. в края на страницата:
<script src="/assets/7c69e562/js/portfolio.js"></script>

Като в него е по горния код. Тоесст последователността е спазена?
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
joTunkiq
Активен
Активен

Регистриран на: 25/12/2012 12:03 pm

Support: 136
Bonus: 272
Мнения: 813
Мнение 10/01/2019 10:34 am      Отговорете с цитат


Пробвай да ги бутнеш най-долу скриптовете преди затварящия таг на бодито в тази поредност ? И пробвай друга версия на jquery - jquery-3.3.1

HTML code:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<script src="/assets/7c69e562/js/portfolio.js"></script>


Ако може да дадеш компилиран хтмл (не със php кода) във jsfiddle за да тестваме и да видим кое не му е наред Idea Question


П.с Мисля, че трябва да имаш и този скрипт преди bootstrap.min.js, но той не е задължителен при модалите
Цитат:
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js


HTML code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
Idea

П.с 2 ако пак няма резултат пробвай този трик:

HTML code:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script >jQuery.noConflict();</script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<script src="/assets/7c69e562/js/portfolio.js"></script>
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
Ticketa
Турист
Турист

Регистриран на: 27/02/2012 3:54 pm

Support: 23
Bonus: 46
Мнения: 288
Мнение 10/01/2019 10:59 am      Отговорете с цитат


Смених с 3.3.1 , но без резултат Idea

Компилиран:
Цитат:
<div class="portfolio_vave pt-3 pb-3" id="portfolio">
<div class="row">

<div class="ml-2 mr-2 mb-3 col-xs-12 col-lg-5 col-md-5 no-padding element_portfolio group2" style="background-image: url('/storage/2_44118617-1829962603779012-5527277113545064448-n_9cc3ef7a.jpg');">
<div class="portfolio-fade-in" style="background-color:" data-target="#exampleModal1" data-href="" data-description="SMART HOME" data-img="/storage/1_44118617-1829962603779012-5527277113545064448-n_9cc3ef7a.jpg">
<h1>smarthome</h1>
<h2>SMART HOME</h2>
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>

</div>

<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog portfolio-dialog" role="document">
<div class="row">
<div class="col-xs-9 text-center hidden-xs portfolio-bg-white">
<img src="" alt="" class="img-responsive" style="width: 100%;">
</div>
<div class="col-xs-12 col-sm-3 portfolio-sticky-top">
<h1 class="modal-header"></h1>
<p class="modal-p"></p>
<div class="modal-btn"></div>
</div>
<div class="col-xs-12 text-center visible-xs portfolio-bg-white">
<img src="" alt="" class="img-responsive" style="width: 100%;">
</div>
</div>
</div>
</div>




ЕДИТ: Поправих го. Изкарах скриптовете от хеад тага и ги бутнах преди боди.

Последната промяна е направена от Ticketa на 10/01/2019 11:43 am; мнението е било променяно общо 1 път
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
joTunkiq
Активен
Активен

Регистриран на: 25/12/2012 12:03 pm

Support: 136
Bonus: 272
Мнения: 813
Мнение 10/01/2019 11:41 am      Отговорете с цитат


Ами тук си работи https://jsfiddle.net/xwq37trc/1/ (оправих само хтмл-а на модала, че липсваше един клас) . Огледай конзолата при теб за 404 грешки, дали всичко зарежда най-вече jquery-то. За без да гледам толкова мога да предложа Idea Question

Ако искаш може да покажеш някаква друга част от кода (примерно цялата html страница за да видим какво се дъни) и може би снимка на конзолата какво ти изкарва? Question
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
Ticketa
Турист
Турист

Регистриран на: 27/02/2012 3:54 pm

Support: 23
Bonus: 46
Мнения: 288
Мнение 10/01/2019 11:44 am      Отговорете с цитат


Поправих го. Изкарах скриптовете от хеад тага и ги бутнах преди боди. За активността +1
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
joTunkiq
Активен
Активен

Регистриран на: 25/12/2012 12:03 pm

Support: 136
Bonus: 272
Мнения: 813
Мнение 10/01/2019 11:52 am      Отговорете с цитат


Ticketa написа:
Поправих го. Изкарах скриптовете от хеад тага и ги бутнах преди боди. За активността +1


Цитат:

Пробвай да ги бутнеш най-долу скриптовете преди затварящия таг на бодито в тази поредност ?


Това ти го предложих преди 2 поста Very Happy Very Happy Но, добре, радвам се, че се оправи Very Happy Question
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
Revelation
Потребител
Потребител

Регистриран на: 24/03/2013 3:23 pm

Support: 54
Bonus: 108
Мнения: 714
Мнение 11/01/2019 12:00 am      Отговорете с цитат


Честита нова година първо.

Аз да хейтна малко:

Javascript code:

var id = $(this).attr('data-target');
var img = $(this).attr('data-img')
var description = $(this).attr('data-description');
var link = $(this).attr('data-href');



Интересен подход, но ненужен:

Javascript code:

$(this).data('target');

// така и с останалите
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Fakeheal
Support
Support

Регистриран на: 17/04/2010 8:37 am

Support: 350
Bonus: 698
Мнения: 2658
Мнение 11/01/2019 7:27 pm      Отговорете с цитат


Тези също могат да се оптимизрат:


$(id + ' .modal-header').html(name);
$(id + ' .modal-btn').html(group);
$(id + ' .modal-p').html(description);
$(id + ' img').attr('src', img);
$(id).modal();





$('.modal-header', id).html(name);
//и така другите


Също така в зависимост какво прави с data-* на елементите се използва attr или data. Ако някъде сменя data-* стойността, тогава attr ще върне първоначалната стойност, което в някои случаи е търсения ефект Razz
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Покажи мнения от преди:    
Създайте нова тема   Напишете отговор    web-tourist.net Форуми -> HTML / Javascript / CSS Часовете са според зоната GMT + 2 Часа
12
Страница 1 от 2


 
Идете на:  
Не Можете да пускате нови теми
Не Можете да отговаряте на темите
Не Можете да променяте съобщенията си
Не Можете да изтривате съобщенията си
Не Можете да гласувате в анкети