Encountering an error while trying to call a function from the datepicker.js

I encountered an issue while trying to call a function from app.js in the datepicker.js file when a button is clicked. The error message "Uncaught Reference: submitDetails is not defined" is displayed.

This error indicates that the function submitDetails is not recognized.

app.js

 clickApply: function(e) {
            
            console.log("hi&hello");
            submitDetails();
            
            this.hide();
            this.element.trigger('apply.daterangepicker', this);
  }

    

datepicker.js

$scope.submitDetails=function(){
                        
                        var k= $scope.timeRangeValue;

                        console.log('In K', k);
                        k= k.split("-");
                        console.log('sec k', k);
                        k[0]= k[0].split("/").join("-");
                        console.log(k[0]);
                        k[1]= k[1].split("/").join("-");
                        console.log(k[1]);
                        var s1 = k[0].split(" ");
                        var s2 = k[1].split(" ");
                        $scope.final1 = s1[0] + "T" + s1[1] + "Z"
                        $scope.final2 = s2[1] + "T" + s2[2] + "Z"
                        console.log($scope.final1);
                        console.log($scope.final2);
                        
                        $scope.requestDataFrEvents();
                        
                    }

Answer №1

Ensuring that the scripts are loaded in the correct order is crucial for proper functioning. It's typically recommended to follow this sequence: 1. moment.js 2. daterangepicker.js 3. your script.js

Consolidating these scripts into a bundle and loading them at the bottom of the page can optimize performance. I hope this information proves helpful!

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

What steps should be taken to trigger an API call once 3 characters have been entered into a field

In my current project, I am dealing with a parent and child component setup. The child component includes an input field that will emit the user-entered value to the parent component using the following syntax: <parent-component (sendInputValue)="g ...

I'm in need of some coding assistance! My goal is to change the background and hover colors for a specific section

I'm attempting to replicate a section of the menu, but I want the background and hover colors to be reversed. The CSS code for the website wasn't done by me and coding isn't my strong suit. This page is still a work in progress: However, I ...

Arrange left side item to bottom right in mobile view using Bootstrap 4

Is there a way to rearrange the left side item to display at the bottom in mobile view only? Currently, it appears at the top in mobile view, but I would like it to show up at the beginning. Can anyone assist me with organizing this? Below is the code sn ...

Redirect due to a fetch process

I am currently working on a minimalist website using pure JavaScript and the fetch API to interact with a backend powered by Node.js and Express.js. Once the user logs in, a session cookie is generated. The issue I'm encountering is related to redire ...

What could be causing my Bootstrap modal to fail to load dynamically?

I'm currently immersed in a fun side project, where data is fetched from a MySQL database and dynamically displayed. Everything seems to be running smoothly except for the modal display issue. The ID always matches, but the modal just won't open. ...

A creative CSS technique to eliminate borders from ul elements without relying on the calc() function

I'm currently using the top bar component from Zurb Foundation and have added a 1px border at the top and a 3px border at the bottom of the nav tag. However, I am facing height issues because the ul menu inside is set to 100% height. What would be th ...

Dynamic Next.js Redirects configured in next.config.js

After building the project, I am looking to update Redirects routes. Currently, we have redirect routes on our BE Api. My goal is to fetch these redirect routes dynamically and implement them in next.config.js. Here is what I have attempted: const getUrls ...

Issue with TinyMCE Editor: Inoperative

<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: "textarea", theme: "modern", plugins: [ "advlist autolink li ...

What's the best way to align text at the center of this DIV?

I recently created a small offline website with a header that includes a logo, navigation bar, and notification bar. While I managed to align everything as intended, I encountered an issue with the text alignment within the notification bar (header-alert). ...

Avoid having Vue CLI delete all files in the dist folder

As I work on my Vue project, I am facing a challenge in syncing the dist folder with Git. Previously, this process ran smoothly when using webpack. However, after transitioning to @vue/cli and creating my project with vue create myProject instead of vue in ...

Preventing certain special characters such as %, &, and " from being entered into the input field using ng-pattern

I need a password that is at least 8 characters long and includes alphanumeric characters and symbols, excluding &,",% . I have set a ng-pattern and restricted some symbols, but it still accepts & when typed. The ng-Pattern works fine otherwise. ...

What is the best way to determine if two arrays are equal in Javascript?

I need the position and values of two arrays to be identical. var array1 = [4,8,9,10]; var array2 = [4,8,9,10]; This is what I attempted: var array3 = array1 === array2 // returns false ...

Deactivating the click event for a personalized checkbox's label in Bootstrap

Greetings, <div class="form-check"><input class="form-check-input" type="checkbox" value="" id="defaultCheck1"><label class="form-check-label" for="defaultCheck1">Default checkbox</label></div> Is there a way to disable the ...

Encountering an error with my JSONP call

Similar Question: json with google geocoding api json Uncaught SyntaxError: Unexpected token : $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452&sensor=true&callback=?', function(data) { ...

Updating the total on the Infusionsoft order form can be achieved using either Jquery or custom code

Is there a way to automatically calculate and update the total amount on the order form based on user input in two quantity fields? The price should increase as the user adjusts the quantity. I've been searching for a solution, but haven't found ...

Exploring the functionality of Angular.js through QUnit testing

Is it possible to integrate angular.mock.inject() with QUnit instead of Jasmine? In the provided code snippet, angular.mock.dump is defined, but unfortunately angular.mock.inject remains undefined. <!DOCTYPE html> <html ng-app="mymodule"> & ...

error displays stating that the module '../util/http_util' cannot be located

I'm currently using node and Notepad++ to develop a website that allows users to log in, save their details, and access the site. I've encountered an issue that I can't quite figure out even though everything seems fine in the code. Below yo ...

Exciting jQuery animations and transitions

Is there a way in JavaScript to call function or method names using a string? For example, when writing jQuery code that applies an effect to specific targets, can the effect be dynamic and changeable by the user? I'm hoping for something like jQuer ...

Including a label for an array within an unnamed array in a JSON string

Is there a way to transform the following data: [{"name": "Donald"}, {"name": "George"}] Into this format instead: {MyArray: [{"name": "Donald"}, {"name": "George"}]} I am currently working on a database server that I built using node.js, express, an ...

In TypeScript, use a Record<string, any> to convert to {name: string}

I have developed a custom react hook to handle API calls: const useFetch: (string) => Record<string, any> | null = (path: string) => { const [data, setData] = useState<Record<string, any> | null>(null); var requestOptions: Requ ...