Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Materialize Cssmodal showing $(..)leanmodal is not a function Error

When I try to create a a materialize css moal using the below code , I am getting Error.

<script src="~/Scripts/jquery-1.10.2.js"></script>


<link href="~/css/materialize.css" rel="stylesheet" />
<script src="~/js/materialize.js"></script>

<a id="btnReset" class="waves-effect waves-light btn modal-trigger" data-target="modal1">Reset</a>

    <!-- Modal Structure -->
    <div id="modal1" class="modal">


        <div class="modal-content">
            <h4>Warning !</h4>
            <p>Do you really want to reset ?</p>
        </div>
        <div class="modal-footer">
            <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Yes</a>
            <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">No</a>
        </div>
    </div>

<script>

    $(document).ready(function () {
        // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
        $('.modal-trigger').leanModal();

    });
</script>

Error Image

I tried this question also.

like image 859
Aneez Avatar asked Nov 10 '15 17:11

Aneez


4 Answers

Maybe you're using Materialize 0.97.8, which doesn't support leanModal anymore (it change simply to modal - check out Materialize Documentation.

I had this issue also and solved it by using Materialize 0.97.7.

like image 135
Bruno Silvano Avatar answered Nov 16 '22 14:11

Bruno Silvano


check this good path of your files , as the code is well . I leave an example for you to have strength . Modal Materialize

<!--SCRIPT-->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>

<div class="container">
<a id="btnReset" class="waves-effect waves-light btn modal-trigger" data-target="modal1">Reset</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
    <div class="modal-content">
        <h4>Warning !</h4>
        <p>Do you really want to reset ?</p>
    </div>
    <div class="modal-footer">
        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Yes</a>
        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">No</a>
    </div>
</div>
</div>  
<script>

$(document).ready(function () {
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal();

});
</script>
like image 45
MBahamondes Avatar answered Nov 16 '22 15:11

MBahamondes


Materialize switched from leanModal to modal with version 0.97.8

For anyone that wants to use the latest version of Materialize, but doesn't want to refactor code, simply apply this to any page that loads a modal.

(function($){
  $.fn.leanModal = function(options) {
    if( $('.modal').length > 0 ){
        $('.modal').modal(options);
    }
  };

  $.fn.openModal = function(options) {
    $(this).modal(options);
    $(this).modal('open');
  };

  $.fn.closeModal = function() {
    $(this).modal('close');
  };
})(jQuery);

This will allow you to use leanModal(), openModal(), and closeModal() functions with the new modal API.

like image 2
Ron Ross Avatar answered Nov 16 '22 15:11

Ron Ross


Without an example or link it is hard to know but most likely, the following js files are not being loaded. Do you really have a folder on your site with "~" as the name? Post a link or jsfiddle.

 <script src="~/Scripts/jquery-1.10.2.js"></script>
 <link href="~/css/materialize.css" rel="stylesheet" />
 <script src="~/js/materialize.js"></script>
like image 1
Macsupport Avatar answered Nov 16 '22 16:11

Macsupport