Performing a fetch request within a directive on the Ionic Framework

I am currently working on customizing the angular-pickdate module from https://github.com/jimibi/angular-pickadate to meet my specific requirements. However, I have hit a roadblock because I am unable to make a GET request in the traditional way that I am accustomed to.

Below is a snippet of my code: ...

.directive('pickadate', ['$locale', 'pickadateUtils', 'pickadateI18n', 'dateFilter', function($locale, dateUtils, i18n, dateFilter) {


  return {
    require: 'ngModel',
    scope: {
      date: '=ngModel',
      defaultDate: '=',
      minDate: '=',
      maxDate: '=',
      disabledDates: '='
    },
    template:
      ...,

    link: function(scope, element, attrs, ngModel,$http)  {

      var minDate       = scope.minDate && dateUtils.stringToDate(scope.minDate),
          maxDate       = scope.maxDate && dateUtils.stringToDate(scope.maxDate),
          disabledDates = scope.disabledDates || [],
          currentDate   = (scope.defaultDate && dateUtils.stringToDate(scope.defaultDate)) || new Date();

      scope.dayNames    = $locale.DATETIME_FORMATS['SHORTDAY'];
      scope.currentDate = currentDate;
      scope.t           = i18n.t;
      scope.render = function(initialDate,$http) {
        initialDate = new Date(initialDate.getFullYear(), initialDate.getMonth(), 1, 3);

          $http({url: 'myplace/script_lotacoes.php', method: 'GET'}).success(function(){alert("hheheh");}).error(function(){alert("oops");});

...

The error message I encounter with this code is as follows:

TypeError: undefined is not a function
at Scope.angular.module.provider.factory.directive.link.scope.render (angular-pickadate.js:122)
at angular.module.provider.factory.directive.link.ngModel.$render (angular-pickadate.js:191)
at Object.ngModelWatch (ionic.bundle.js:31576)
at Scope.$get.Scope.$digest (ionic.bundle.js:22518)
at Scope.$get.Scope.$apply (ionic.bundle.js:22789)
at done (ionic.bundle.js:17942)
at completeRequest (ionic.bundle.js:18132)
at XMLHttpRequest.requestLoaded (ionic.bundle.js:18073)

This issue seems to be directly linked to the $http request.

If anyone has insights into why this error occurs and how it can be resolved, your assistance would be greatly appreciated! Thank you in advance.

javascriptangularjshttprequestionic-framework

Answer №1

You have included unnecessary injections of $http in both your link function and scope.render function. To streamline your code, remove these injections and only inject it into your directive.

.directive('pickadate', ['$locale', 'pickadateUtils', 'pickadateI18n', 'dateFilter', '$http', function($locale, dateUtils, i18n, dateFilter, $http) {

Answer №2

Include the $http service within the directive:

.directive('chooseadate', ['$http', '$locale', 'chooseadateUtils', 'chooseadateI18n', 'dateFilter', function($http, $locale, dateUtils, i18n, dateFilter) {

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

Freshening up the data source in a Bootstrap Typeahead using JavaScript

I'm trying to create a dropdown menu that displays options from an array stored in a file called companyinfo.js, which I retrieve using ajax. The dropDownList() function is called when the page loads. function dropDownList (evt) { console.log("dr ...

javascriptajaxtwitter-bootstrap

Difficulty comprehending/implementing callback functions

After reviewing this discussion and chatting about it, I have come to understand that utilizing a callback function is the most effective approach! "Is using a callback the only solution for acquiring a link from the server via ajax, storing it in a varia ...

javascriptphpajaxxml

Incorporating a CSS stylesheet into the theme settings of the Stratus 2 Beta platform

I have been attempting to personalize my Stratus 2 Beta by implementing a custom theme. I created a separate CSS file named "stratus.css" and stored it in the CSS directory of my website - with the CSS code being identical to this example. Below is my Jav ...

javascripthtmlcssthemessoundcloud-stratus

Extracting HTML element from PHP string and placing it in a different page

In a PHP string, there is an HTML structure including a table within it: <html> <head> <!-- not much going on here --> </head> <body> <table border="0" align="center" cellpadding="0" cellspacing="10 ...

javascriptphpjqueryhtml

Aligning a lowercase "i" element within a container

Is there a more effective way to center the "i" element within this div without using specific pixel margins that adjust based on hover? Below is my code snippet: HTML: <div class="nav-collapse"> <i class="fa fa-bars fa-2x" id="bars"></ ...

javascriptjqueryhtmlcsscenter

When trying to apply styles using ng-style attribute with jQuery, Angular does not seem to

Check out this plunker showcasing the issue : http://plnkr.co/edit/1ceWH9o2WNVnUUoWE6Gm Take a look at the code : var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { console.log('yeah'); ...

javascriptjqueryangularjs

Checking Date and Time in JavaScript

I'm struggling with validating a date time string in Javascript, based on the language set in the browser. For example, if the language is set to pt-BR, the format would be dd/MM/yyyy HH:mm:ss I attempted to use the following code: var dateFormat ...

javascriptasp.netvb.net

Angularjs - Implement real-time text input functionality for processing as user types

Trying to create a Roman numeral calculator that converts input numbers to numerals on the fly. I have managed to link a variable to the text input, but not sure how to execute a function as the user types. Any tips on how to achieve this? Appreciate any ...

angularjs

Single-node interaction with three.js

In this demonstration, you can observe two clickable particles that both respond to clicks. I am seeking a way to detect clicks on particles without removing them from the scene, similar to this: if (intersects.length>0){ if(intersects[0].object.ty ...

javascriptthree.js

The value in Angular Js ng-controller is not being populated as expected

Although this question may seem similar to one that was previously asked, I am still in need of a solution. I have recently begun learning Angular Js from scratch, and I am seeking assistance in obtaining the correct value. This is my HTML code: < ...

javascripthtmlangularjs

Tips for using Chrome Dev Tools to troubleshoot JavaScript code embedded in a webpage

Currently, I am deeply involved in a project at my workplace where I am tasked with fixing tickets and debugging issues. I have reached a point where I need to understand what values the Javascript code is returning. Here's the problem I am facing: ...

javascriptjspgoogle-chrome-devtools

Prevent certain images from loading by blocking them

I am trying to create an extension that blocks two specific images from loading. Initially, I attempted to achieve this by using the following code in the content.js file: $("#rated-image").remove(); //id of one image $(".blur-mask").remove(); //class of ...

javascriptjquerygoogle-chromegoogle-chrome-extension

Unable to encode file data as form-data and submit it through an express endpoint

I have two main goals: first, I am looking to upload an mp3 file using the fetch function. Second, in order to accomplish this task, I believe I need to wrap the file in a form-data object. I have managed to successfully store the mp3 file in my react stat ...

javascriptreactjsexpressfetchform-data

Determining the optimal timing to initiate a scroll once images have finished loading

When using the Quasar framework, I encountered a challenge with scrolling to a specific child element after the page has loaded. Currently, I achieve this by implementing a delay using setTimeout, but I am seeking a more reliable solution. My current appr ...

javascriptvue.jsquasar-framework

What steps can I take to display a download button when a file is clicked on?

As a backend developer, I usually don't delve into JavaScript tasks, but I have a simple query for JavaScript developers that I need help with. Here is my question: I am trying to display a download button when a specific file is clicked using jQuery ...

javascriptjquerynode.jsreactjs

Issue with Click event not working on dynamically added button in Angular 8

My goal is to dynamically add and remove product images when a user clicks the add or delete button on the screen. However, I am encountering an issue where the function is not being called when dynamically injecting HTML and binding the click event. Below ...

javascriptangulartypescriptdynamicangular8

A helpful guide on rendering nested maps from JSON data in React.JS

I am attempting to display menu values from a JSON data. This menu has multiple levels, so I am using a nested map function to render the complete menu. const menu = { data:[ { title: "Home", child: [ { title: "SubL ...

javascriptjsonreactjslistdictionary

Ionic project initialization encounters a setback due to a dependency problem

After setting up Ionic by running npm install -g @ionic/cli I encountered an issue while trying to initialize a new project with the command ionic start ionic-test-app The initialization process failed due to an npm dependency error that mentioned a prob ...

node.jsangularionic-frameworknpm

Sending state data in an Axios POST request

I'm trying to include a state in an axios post request to send data to my backend, but I'm getting an error saying the state I selected is not defined. Here's the code snippet: React frontend import React, { Component } from "react&qu ...

javascriptreactjsexpressaxios

How can we insert data at the bottom of a table to begin with?

I am looking to add information retrieved from the iTunes API to the end of a table. The first album I receive will be placed at the very end, with each subsequent album adding on while pushing the previous one up in the hierarchy. Any ideas on how I can ...

javascriptreactjsalgorithmdatatable