"Error: The $ variable is not defined" - encountered while working with a date-time picker in Jade/Pug

I am attempting to implement a date/time picker in jade/pug that resembles the example provided on this page: . I am working with a Node/express js server. However, when I click on the glyphicon-calendar icon, the calendar fails to display. I have already installed the package below: npm i bootstrap-datetimepicker-npm

My current code attempts include:

block console_content

  .sensor-page(ng-controller="ambientCtrl")
    h1 Sensors


    // Date-Time Widget
    div(class="container")
      div(class="row")
        div(class="col-sm-6")
          div(class="form-group")
            div(class='input-group date' id='datetimepicker1')
              input(type='text' class="form-control")
              span(class="input-group-addon")
                span.glyphicon.glyphicon-calendar
        script(type="text/javascript"). 
            $( document ).ready(function () {$('#datetimepicker1').datetimepicker()});

    // Sensor Checkbox Widget
    p {{selection}}
    label(ng-repeat='sensorName in sensors')
      input(type='checkbox', name='selectedSenors[]', value='{{sensorName}}', ng-checked='selection.indexOf(sensorName) > -1', ng-click='toggleSelection(sensorName)')
      |  {{sensorName}}

    button(ng-click="changeSensors()") Show


    canvas(id="myChart")


    h1 Sensor
    p Info about sensors here

    script(src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js')
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css')
    link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js')
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js')
    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js')

Nevertheless, I encountered an error with this approach. This has led me to pose the following questions:

  1. What is the issue within the given code, and how should it be adjusted to mirror the implementation seen at the provided link?

  2. How can I retain the chosen date-time in JavaScript and transform it into a Unix timestamp?

javascriptexpresspug

Answer №1

Update:

The issue with the 'Uncaught Reference Error: $ Undefined" has been resolved by repositioning the scripts at the beginning of the page, as shown below:

block console_content

  .sensor-page(ng-controller="ambientCtrl")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js")
    script(type='text/javascript', src='https://cdn.jsdelivr.net/jquery/latest/jquery.min.js')
    script(type='text/javascript', src='https://cdn.jsdelivr.net/momentjs/latest/moment.min.js')
    script(type='text/javascript', src='https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js')
    link(rel='stylesheet', type='text/css', href='https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css')


    h1 Sensors


    // Date-Time Widget
    div(class="container")
      div(class="row")
        div(class="col-sm-6")
          div(class="form-group")
            div(class='input-group date' id='datetimepicker1')
              input(type='text' class="form-control")
              span(class="input-group-addon")
                span.glyphicon.glyphicon-calendar
        script(type="text/javascript").
          $( document ).ready(function () {$('#datetimepicker1').datetimepicker()});


    // Sensor Checkbox Widget
    p {{selection}}
    label(ng-repeat='sensorName in sensors')
      input(type='checkbox', name='selectedSenors[]', value='{{sensorName}}', ng-checked='selection.indexOf(sensorName) > -1', ng-click='toggleSelection(sensorName)')
      |  {{sensorName}}

    button(ng-click="changeSensors()") Show


    canvas(id="myChart")


    h1 Sensor
    p Info about sensors here

However, this has led to a new issue "jQuery.Deferred exception: $(...).datetimepicker is not a function TypeError: $(...).datetimepicker is not a function" view image description here

Answer №2

When I encountered the same error, I experimented with placing jquery and bootstrap declarations at the beginning before adding other links.

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

Adding the unzip feature is not within my capabilities

I am a novice Japanese web developer. Unfortunately, my English skills are not great. I apologize for any inconvenience. I am interested in utilizing this specific module: https://www.npmjs.com/package/unzip To do so, I executed the following commands ...

javascripttypescriptyarnpkg

Unable to preserve special characters in express js route URL request

When attempting to retrieve a record from the database using the criteria: VITAMINS + ZINC 100MG/10MG PER 5ML SYRUP The request URL appears as follows: http://localhost:4200/api/search?key=VITAMINS%20+%20ZINC%20100MG/10MG%20PER%205ML%20SYRUP This is wha ...

express

SmoothDivScroll jQuery Plugin may encounter issues when JavaScript files are loaded asynchronously

I recently encountered an issue with SmoothDivScroll when I attempted to load all the JS files asynchronously. I implemented my own async loading pattern using Lazyload.js by Ryan Grove. I also experimented with Modernizr's load/complete pattern, but ...

javascriptjquerypluginsasynchronoussmooth-scrolling

Securing Confidential Information in Vue Data Storage

For the last month, I've dedicated my time to learning Vue. However, there's still one question that puzzles me: The web application I'm currently developing allows users to maintain daily diaries for different projects. They should be able ...

node.jsexpressvue.jssecurity

Why isn't this ajax script able to successfully transmit the data?

I'm having some trouble sending a JavaScript variable to a PHP file in order to create a query. Here's the script I've been using, but unfortunately it doesn't seem to be working. Any assistance would be greatly appreciated. <select ...

javascriptphpjqueryjsonajax

Socket.io operates individually with each user

Showing a basic web-chat using socket.io. Node.js code: io.on('connection', function(socket) { // Sends 'hello world' message to all users socket.emit('send:message', { text: 'hello world' }); ...

javascriptnode.jsexpresswebsocketsocket.io

Generating random indexes for the Answer button to render

How can we ensure that the correct button within the Question component is not always rendered first among the mapped incorrect buttons for each question? Is there a way to randomize the positions of both correct and incorrect answers when displaying them, ...

javascriptreactjs

Embracing Interfaces Over 'any' Types in TypeScript

https://i.stack.imgur.com/W6NMa.pngWould it be beneficial to utilize an interface as a variable type rather than opting for any? For instance, if I have 3 functions where I am declaring variables that can contain alphanumeric data, would defining them us ...

javascripttypescript

Transform the data format received from the AJAX request - modify the input value

I have a data variable that contains an object structured as follows: { "details": { "id": 10, "name": John Doe, "hobbies": [{ "id": 1, "name": "Football" }, { "id": 2, "name": "Badminton" }, ...

javascriptjqueryajax

Transforming data in javascript

I am faced with a data transformation challenge involving extracting information from user input in Apache Superset using metrics. The data is assigned to the variable dataTransformation. {country: "Afghanistan", region: "South Asia", y ...

javascriptreactjs

How to fetch a single document from a nested array using Mongoose

Currently, I am working on a MongoDB database using Mongoose in Node.js. The collection structure resembles the following: { cinema: 'xxx', account: 'yyy', media: { data: [{ id: 1, name: 'zzz& ...

javascriptnode.jsmongodbexpressmongoose

Error alert: Blinking display, do not dismiss

I am trying to make it so that when the "enviar" button is clicked, the "resultado" goes from being hidden ("display:none") to being visible ("display:block"). This is my html document: <script type="text/javascript"> function showResu ...

javascripthtmlcssblock

What is the best way to modify an object within a pure function in JavaScript?

Currently, I am exploring different strategies to ensure that a function remains pure while depending on object updates. Would creating a deep copy be the only solution? I understand that questions regarding object copying are quite common here. However, ...

javascriptreactjstypescript

How can I change the color of a cube in Three.js?

I'm currently working on developing a basic 3D game using three.js. My goal is to create colored cubes, but I'm encountering an issue where all the cubes are displaying the same color. My cube creation code looks like this: var geometry = new ...

javascript3dthree.js

Making a Jquery 1.10.2 cross-domain request

I am in need of assistance with the following code snippet: function doPoolPartyGetChildrenAjaxRequest(parent) { return $.ajax({ url: "http://127.0.0.1:8086/PoolParty/api/thesaurus/1DCE2E49-7DD8-0001-524C-1A1B14A0141A/childconcepts", data: {lan ...

javascriptjqueryajaxtomcat

I am unable to configure the value using NG-Options

Currently, I am facing an issue with loading a select box using the ng-options directive. The problem is that I am unable to have the options display values ranging from 23-26, instead of 0-3. The values should match the "eigenschap_id" that I pass throug ...

javascriptangularjsng-options

Preserve HTML element states upon refreshing the page

On my webpage, I have draggable and resizable DIVs that I want to save the state of so they remain the same after a page refresh. This functionality is seen in features like Facebook chat where open windows remain open even after refreshing the page. Can ...

javascripthtml

Exploring JSON data to locate specific characters with JavaScript

[ {"lastName":"Noyce","gender":"Male","patientID":19389,"firstName":"Scott","age":"53Y,"}, {"lastName":"noyce724","gender":"Male","patientID":24607,"firstName":"rita","age":"0Y,"} ] When comparing my input with the JSON data, I utilize a loop to search f ...

javascriptjson

My web browser doesn't recognize my JavaScript as actual JavaScript?

HTML: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="/js/grabber.js" type="text/javascript"></script> <script type="text/javascript"> $(docu ...

javascriptjquerybrowser

What could be causing the TypeError that is preventing my code from running smoothly?

I can't seem to figure out why I'm constantly encountering the error message Cannot destructure property 'id' of 'this.props.customer' as it is undefined.. Despite double-checking my code and making sure everything looks corre ...

javascriptreactjsdebugging