TypeError: $(...).modal is not a function - Boostrap 4

User avatar
Ticketa
Турист
Турист
Posts: 437
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 23
Location: in /root
Contact:

TypeError: $(...).modal is not a function - Boostrap 4

Post by Ticketa » Wed Jan 09, 2019 6:34 pm

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

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

[js]$(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');
[/js]

На ред 29:
[js] $(id).modal();[/js]

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

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

HTML частта:
[php] <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>[/php]

Fakeheal
Гуру
Гуру
Posts: 2701
Joined: Sat Apr 17, 2010 6:37 am
Answers: 351
Location: /r/eyebleach
Contact:

Post by Fakeheal » Wed Jan 09, 2019 8:16 pm

Какво ти връща console.log(id), ако го сложиш след декларирането на променливата id?

User avatar
Ticketa
Турист
Турист
Posts: 437
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 23
Location: in /root
Contact:

Post by Ticketa » Thu Jan 10, 2019 12:11 am

Така:
[js]
console.log(id);
$(id).modal();[/js]

резултат:
#exampleModal1
Така
[js]
$(id).modal();
console.log(id);[/js]

резултат:
нищо

joTunkiq
Потребител
Потребител
Posts: 825
Joined: Tue Dec 25, 2012 10:03 am
Answers: 142
Contact:

Post by joTunkiq » Thu Jan 10, 2019 7:31 am

Здравей,

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

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

Ето ти пример, след като напрвих това, което написах си се актирива модала https://jsfiddle.net/jx21raog/ :?: :idea:

User avatar
Ticketa
Турист
Турист
Posts: 437
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 23
Location: in /root
Contact:

Post by Ticketa » Thu Jan 10, 2019 8:10 am

Здрасти тънък! :D

В 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
Потребител
Потребител
Posts: 825
Joined: Tue Dec 25, 2012 10:03 am
Answers: 142
Contact:

Post by joTunkiq » Thu Jan 10, 2019 8:34 am

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

[html]
<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> [/html]

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


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

[html]<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... per.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>[/html] :idea:

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

[html]
<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> [/html]

User avatar
Ticketa
Турист
Турист
Posts: 437
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 23
Location: in /root
Contact:

Post by Ticketa » Thu Jan 10, 2019 8: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>


ЕДИТ: Поправих го. Изкарах скриптовете от хеад тага и ги бутнах преди боди.
Last edited by Ticketa on Thu Jan 10, 2019 9:43 am, edited 1 time in total.

joTunkiq
Потребител
Потребител
Posts: 825
Joined: Tue Dec 25, 2012 10:03 am
Answers: 142
Contact:

Post by joTunkiq » Thu Jan 10, 2019 9:41 am

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

Ако искаш може да покажеш някаква друга част от кода (примерно цялата html страница за да видим какво се дъни) и може би снимка на конзолата какво ти изкарва? :?:

User avatar
Ticketa
Турист
Турист
Posts: 437
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 23
Location: in /root
Contact:

Post by Ticketa » Thu Jan 10, 2019 9:44 am

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

joTunkiq
Потребител
Потребител
Posts: 825
Joined: Tue Dec 25, 2012 10:03 am
Answers: 142
Contact:

Post by joTunkiq » Thu Jan 10, 2019 9:52 am

Ticketa wrote:Поправих го. Изкарах скриптовете от хеад тага и ги бутнах преди боди. За активността +1
Пробвай да ги бутнеш най-долу скриптовете преди затварящия таг на бодито в тази поредност ?
Това ти го предложих преди 2 поста :D :D Но, добре, радвам се, че се оправи :D :?:

Post Reply