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

Ticketa

Registered
Привет ДАМИ и ГОСПОДА! Бъдете здрави и щастливи послучай новата 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>
 
Здравей,

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

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

Ето ти пример, след като напрвих това, което написах си се актирива модала https://jsfiddle.net/jx21raog/ :?: :idea:
 
Здрасти тънък! :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>

Като в него е по горния код. Тоесст последователността е спазена?
 
Пробвай да ги бутнеш най-долу скриптовете преди затварящия таг на бодито в тази поредност ? И пробвай друга версия на 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>

Ако може да дадеш компилиран хтмл (не със 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/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
: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>
 
Смених с 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>



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

Ако искаш може да покажеш някаква друга част от кода (примерно цялата html страница за да видим какво се дъни) и може би снимка на конзолата какво ти изкарва? :?:
 
Поправих го. Изкарах скриптовете от хеад тага и ги бутнах преди боди. За активността +1
 
Ticketa каза:
Поправих го. Изкарах скриптовете от хеад тага и ги бутнах преди боди. За активността +1

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

Това ти го предложих преди 2 поста :D :D Но, добре, радвам се, че се оправи :D :?:
 
Честита нова година първо.

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

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


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

[js]
$(this).data('target');

// така и с останалите
[/js]
 
Тези също могат да се оптимизрат:

Код:
$(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 ще върне първоначалната стойност, което в някои случаи е търсения ефект :p
 
Fakeheal каза:
Тези също могат да се оптимизрат:

Код:
$(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 ще върне първоначалната стойност, което в някои случаи е търсения ефект :p

По-правилния вариант би бил просто да си запазиш стойността преди да я смениш, ако смяташ, че ще ти трябва.

Аз лично никога не бих използвал attr, защото ще ми върне първоначалната стойност.

Но, ако трябва да казвам какво бих направил е, че просто няма да използвам повече тези библиотеки и ще спра да мажа. Има сума frameworks, които предпочитам да използвам.
 

Горе