The function call with Ajax failed due to an error: TypeError - this.X is not a function

I am encountering an issue when trying to invoke the successLogin() function from within an Ajax code block using Typescript in an Ionic v3 project. The error message "this.successLogin() is not a function" keeps popping up. Can anyone provide guidance on how to work around this problem?


signin() 
  {
    var ajaxResp = $.ajax({
      type: "POST",
      url: "XXX",
      data: { 
        'uid': "50", 
        'pass': "100" 
    }
      })
    .done(function(response){
      let js = JSON.parse(response).data;      
      console.log(js);
      this.successLogin(js);
    });
  }

successLogin(msg){
  console.log(msg);
}

An image of the error can be seen here.

jqueryangulartypescriptionic-framework

Answer №1

The problem might lie within the this keyword.

Consider binding this, or modifying the method declaration to:

signin = () => 
  { ... }

Answer №2

Consider implementing a similar approach, ensuring that you are sending JSON data in your AJAX request

performLogin() 
  {
    var ajaxResponse = $.ajax({
      type: "POST",
      url: "YYY",
      dataType: 'json',
      data: { 
        'username': "exampleuser", 
        'password': "examplepass" 
    },
    success: function(response){     
      handleLoginResponse(response);
    },
      });
  }

handleLoginResponse(data){
  console.log(data);
}

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 is more costly in terms of performance: toggling the visibility of a DOM node or adding/removing a DOM node?

When it comes to calling, which is the more costly operation? Displaying and hiding a DOM node Creating and deleting DOM nodes Let's assume we only have one or a few (less than 5) nodes that require manipulation, and the application is running on a ...

javascriptjquerydom

Adding a panel dynamically with Bootstrap incorrectly

I have been using the Collapse panel in Bootstrap and it was working perfectly when implemented statically. However, I encountered an issue when trying to add it dynamically. HTML <form> <div class="form-group" > <label for="c ...

javascriptjqueryajaxtwitter-bootstraptwitter-bootstrap-3

Steps to add text to a bar chart in morris.js

I have a morris.js bar graph and I want to display the count on top of each bar. After checking the morris.js bar documentation, I couldn't find a solution for it. When hovering over the bars, it should show the value, but I specifically need to show ...

javascriptjquerymorris.js

Creating a digital collection using Vue, Typescript, and Webpack

A short while back, I made the decision to transform my Vue project into a library in order to make it easier to reuse the components across different projects. Following some guidelines, I successfully converted the project into a library. However, when ...

typescriptwebpackvuejs2semantic-ui

Can an object serve as a property name for another object?

Can this be achieved using JavaScript? I'm attempting to assign the property name of an object as a "HTMLInputElement": var el = $('#something').get(0), obj = {}; obj[el] = 'some random data'; Unfortunately, it ...

javascriptjqueryobject

The assignment of `accessToken` is restricted in Mapbox-gl's typing

I'm currently utilizing the mapbox-gl library in conjunction with TypeScript. Moreover, I have successfully installed its type definitions that are sourced from the community using @types/mapbox-gl. However, when attempting to import and assign an acc ...

typescriptmapbox

How to form an array using rxjs before the adding sequence is completed

I am currently exploring a way to utilize rxjs to achieve the following scenario: You have two observables, onAddObs and onRemoveObs. Assume that onAddObs.next() is triggered multiple times, adding "A", "B", "C". I aim to then extract ["A", "B", "C"]. .t ...

javascriptangularrxjs

Separate the label and content sections in an Angular Material vertical stepper

https://i.sstatic.net/S1gIH.jpg After applying the following CSS: mat-step-header{ display: flex ; justify-content: flex-end ; } I am attempting to make this stepper function properly. I have implemented Angular Material design for a vertical stepp ...

cssangularangular-material

Observable function encountering difficulties returning nested values

I've been working on a function that returns an observable. test(id: int): Observable<Group>{ this.http.get('test/').subscribe( (result:any) => { resultingVal = Group.fromJson(result.group); }); } Right now, the function ...

angulartypescriptobservable

Alter the browser's URI without having to reload the page

Is there a way to change the browser URL (or URI) without refreshing the page using HTML5 and HTML5Shiv for IE? For example, if I am currently on http://www.example.com but want to transition to http://www.example.com/4f6gt without the need for a full pa ...

javascriptjqueryajaxhtmluri

The .ts source file is mysteriously missing from the development tool's view after being deployed

When I work locally, I can see the .ts source files, but once I deploy them, they are not visible in any environment. Despite setting my sourcemap to true and configuring browserTargets for serve, it still doesn't work. Can someone help with this issu ...

angulartypescriptgoogle-chrome-devtoolspackage.jsonangular.json

PHP AJAX Request Failing to Transfer Files

I am having trouble with sending files in a PHP AJAX Request: Here is the form code: <form class="frmContact" action="#" method="post"> <div class="col-md-6"> <input type="hidden" name="emailTo" id= ...

javascriptphpjqueryajax

Help needed: Encountered an error stating "Module not found: Error can't resolve 'child_process', any solutions to resolve this issue?

I'm currently in the process of developing a JupyterLab extension using TypeScript. After successfully incorporating the package "@types/node" to access functionalities like 'require('http')', I encountered an issue when attemptin ...

node.jstypescriptnpmjupyter-lab

How can I make jQuery and $.ajax function properly on Internet Explorer versions 7, 8, or 9?

My AJAX code is not working in Internet Explorer versions 7, 8, or 9. The data does not display in IE - how can I fix this issue? <script type="text/javascript"> $(document).ready(function () { $.ajax({ url: "http://www.wideawakemarket ...

jquery

Retrieve the data attribute from a specific dropdown menu using jQuery

Here is the code snippet I am currently working with: $('.tmp-class').change(function() { $('.tmp-class option:selected').each(function() { console.log($('.tmp-class').data('type')); }) ...

javascriptjquery

Guide on invoking the callback function using the class name specified in a different JavaScript file

After attempting to invoke the callback function using a classname defined in another JavaScript file, I encountered difficulties and was unable to make the call successfully. Despite my efforts, I couldn't pinpoint the mistake I made. Kindly review t ...

javascriptjqueryajax

What is the best way to pass the answerId in the action that I am dispatching, when the answerId is nested within an array object within another array object in

Reflect on the following: private listenToAnswerDeleted() { this.uiService.onGlobalEvent('ANSWER_DELETED').subscribe((response) => { this.store.dispatch(deleteAnswerAction({'answerId': })); }); } Upon receiving a respon ...

angularrxjsobservableactionngrx

Having trouble with typecasting in Angular 9 after receiving an HTTP response?

When initializing my component, it fetches student information from an API. Here is the ngOnInit code for component-version1: ngOnInit(): void { if(!this.student) { this.studentsService.getStudentDetail(this.id).subscribe( (response: Stu ...

javascriptarraysangulartypescriptobservable

Changing dot notation to bracket notation in Angular

Having trouble using dynamic columns in a Primeng table? The column fields need to be in bracket notation for this setup. What if you have a column with nested JSON structure and you're not sure how to write that in bracket notation? Don't worry, ...

jsonangulartypescript

The process of selecting particular words from a data-attribute value

Is it possible to extract specific words from a data attribute in a web application while preserving spaces? I am looking to: Select the first word Select the last word Select the word that precedes... Select the word that follows... Select everything t ...

javascriptjquery