Error: The function leanModal is not defined within the HTML document at an anonymous location

Working with Materialize CSS library and Laravel to build a Survey application. Below is the HTML code I am using:

<div id="doDelete" class="modal bottom-sheet">
        <div class="modal-content">
          <div class="container">
            <div class="row">
              <h4>Are you sure?</h4>
              <p>Do you want to remove this survey titled "{{ $survey->title }}"?</p>
              <div class="modal-footer">
                <a href="/survey/{{ $survey->id }}/delete" class=" modal-action waves-effect waves-light btn-flat red-text">Yes, delete it!</a>
                <a class=" modal-action modal-close waves-effect waves-light green white-text btn">No, keep it!</a>
              </div>
            </div>
          </div>
        </div>
      </div>

And here is the init.js code:

$(document).ready(function() {
  $('.collapsible').collapsible({
    accordion: false
  });

 $('.modal-trigger').leanModal();

  $(document).on('click', '.delete-option', function() {
    $(this).parent(".input-field").remove();
  });

Encountering an error while trying to execute the delete function:

init.js:6 Uncaught TypeError: $(...).leanModal is not a function
    at HTMLDocument.<anonymous> (init.js:6)
    at j (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.I (jquery.min.js:2)

In addition, included init.js and jquery.min.js as well:

 <script src="{{ URL::asset('jquery.min.js') }}"></script>
    {!! MaterializeCSS::include_js() !!}
    <script src="{{ URL::asset('init.js') }}"></script>

Appreciate any assistance provided. Thanks!

Answer №1

               <section class="new">
                    <center><h2 class="text center">LATEST-PROJECTS</h2></center>
                    <div id="carousel">
                            <img src="project1.jpg" id="item-1"/>
                            <img src="project2.jpg" id="item-2"/>
                            <img src="project3.jpg" id="item-3"/>
                             <img src="project4.jpg" id="item-4"/>
                             <img src="project5.jpg" id="item-5"/>
                             <img src="project6.jpg" id="item-6"/>
                             <img src="project7.jpg" id="item-7"/>
                             <img src="project8.jpg" id="item-8"/>
                        </div>

                        <script>
                                $(document).ready(function () {
                                  var carousel = $("#carousel").waterwheelCarousel({
                                    flankingItems: 3,
                                  });

                                  $('#prev').bind('click', function () {
                                    carousel.prev();
                                    return false
                                  });

                                  $('#next').bind('click', function () {
                                    carousel.next();
                                    return false;
                                  });
                                });
                            </script>
                    </section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Managing the placement of the expanded autocomplete input in Material-UI

Whenever I use the autocomplete fields on my website, I've observed an interesting behavior. When I select multiple options, the height of the input increases significantly, causing everything below it to shift downward like this. Is there a way to m ...

Having trouble with JQuery Tooltip content not being overridden as expected

Hey, I'm having an issue with the tooltip in my code snippet on JSFiddle. The text specified in JQuery's tooltip content option is not replacing the tooltip as expected. Can someone help me figure out what I might be doing wrong or missing? Than ...

Combining Django, ajax, and modal form in Bootstrap 5: A step-by-step guide for successful implementation

I've been struggling to implement an Ajax request for a while now. Whenever it's successful, I want it to redirect, and if it fails, show an error message. I've tried various methods that I can't seem to remember now. It would be greatl ...

What is the best way to create a cornered button using CSS?

Is there a way to create a button using only CSS? https://i.stack.imgur.com/7mjVV.png This is the code I've come up with so far: .customButton { width: 100px; height: 100px; background: #6d1a3e; position: relative; transform: rotate(-90 ...

Manually adjust rotation in Three.js by clicking

I am looking to initiate an animated rotation of an object by clicking a button. I have a basic understanding that the render function operates as an infinite loop and that adding 0.1 to cylinder.rotation.x continuously rotates the object. My goal is to ...

Is it possible to drag and drop without using jQuery UI?

Currently, I'm developing a jquery plugin that incorporates drag and drop functionalities using HTML5 drag attributes. The functionality is working well, except for one issue - linking the function names to their designated targets. Although the func ...

Utilizing jQuery to consistently position an element next to another regardless of its properties

Discovering this website has been a delight. As a novice programmer, I am struggling to grasp the concept of positioning one element next to another regardless of the preceding element. For instance, If Element A can hold any value, And if Element B resem ...

Guide on populating a series of rectangles in a line based on values stored in an array using d3.js

I have 100 rectangles arranged in a 10x10 square. My goal is to assign colors to the rectangles based on values from an array var avg = [1, 4, 4, 7, 11, 15, 58] I'm facing an issue at the value 4 being repeated and I find the current code quite mess ...

Troubleshooting Problem with $.ajax Call in jQuery Full Calendar (Using Static Events Upon Page Load)

Currently, I am utilizing Yii along with the FullCalendar widget in a view of CalendarController. When the widget is called, it retrieves existing events from the database and displays them within the FullCalendar. In addition to this, I have implemented a ...

hiding html elements by using the display property set to none instead of physically removing

I am currently utilizing an if-else statement to display different HTML structures. As a result, the entire HTML is being rendered twice. Is there a way we can utilize 'display: none' instead? I attempted to use it in th ...

having difficulty altering a string in EJS

After passing a JSON string to my EJS page, I noticed that it displays the string with inverted commas. To resolve this issue, I am looking for a way to eliminate the inverted comma's and convert the string to UPPERCASE. Does anyone know how to achiev ...

Filtering the inner ng-repeat based on the variable of the outer ng-repeat

I have a collection of elements. Some of these elements are considered "children" of other elements known as "parent" elements. Instead of rearranging the JSON data received from the server, I am attempting to filter the results within the ng-repeat loop. ...

Troubleshooting CSS problems with positioning 3 fluid div elements

I am in need of 3 dynamic div containers. container for main content image display container that changes size container on the side with changing width The issue I am facing is that the text needs to be below the image container which has a wider width ...

Unable to supersede the current CSS styling

I have implemented the example found here in my project and now I am trying to make the table stretch to fit the entire page. To achieve this, I have added the following CSS: html, body{ height: 100%; } #gridContainer { height: 100%; } table{ ...

Creating groups using address strings from a list of users with pre-assigned groupings

In order to extract a list of distinct groups from a list of users, where each user is affiliated with one or more groups at various levels governed by a hierarchy, the hierarchy needs to be reflected in the group as an address similar to an IP address. It ...

Effective methods for eliminating Stripe's iframes

I am integrating Stripe Elements using vue-stripe-elements-plus on a single page application. I want to completely unload Stripe after the user leaves the credit card module, but it seems more complicated than expected. Even after unloading it in the comp ...

Having trouble rendering a private route screen in React, while all the other screens work perfectly

I am encountering an issue with my Private Route in React where it fails to render, while every other screen renders successfully. I have set up the Private Route to render my PrivateScreen.js component, everything seems to be set up correctly but I cannot ...

fadeTo and slideToggle are exhibiting unexpected behavior

Unfortunately, with my limited understanding of the situation, I am struggling to identify where I have gone wrong that has caused this behavior. In this scenario, there is a hidden div containing a contact form. When a user hovers over the 'contact& ...

Connect 'this' to an imported function using pure JavaScript

function EmployeeListView() { this._html = html; /../ } EmployeeListView.prototype = { registerEmployeeHandler: function (handler) { syncEmployeeList().bind(this); } function syncEmployeeList() { let elList = this._mHtml.querySel ...

incorrect sequence of div elements appearing vertically

I'm having trouble organizing the header, page title, and navigation bar on my webpage. Despite my attempts to structure them correctly, they are not displaying in the desired order as shown below: https://i.stack.imgur.com/A3rQe.jpg The issue arises ...