The Angular 4 click event with jQuery is failing to work properly within an HTTP get request

I'm having trouble with the code I used. When the PHP call succeeds, I trigger the click event but it's not working inside the HTTP GET method. However, if I place it outside the HTTP method, it works fine.

In my component.html file:

<a #myDiv id="anchorID" href="{{details.url}}&a={{affid}}&b={{sid}}&c={{ordid}}" target="_blank"></a>

In my component.ts file:

this.http.get(this.apiurl+'api/insertorder.phpumid="+this.loginid).subscribe(data=>{
          var jsonData = data.json();    
          let urlpass = jsonData.url;
          this.ordid = jsonData.orderid;
          $("#anchorID")[0].click();

          },error => {
          console.log('error in sub');
          console.log(error);
          });

I'm wondering what could be wrong here. I need to make sure this gets called after a successful response.

If I use window.open(urlpass,'_blank'); then it triggers a popup blocker issue. Any help on how to resolve this would be greatly appreciated.

Answer №1

Avoiding the use of JQuery in combination with Angular is not ideal, as it can lead to bad practices. Instead, utilize local variables within your template to allow Angular to handle tasks more efficiently.

Consider implementing the following approach:

@ViewChild('myDiv') div: ElementRef;

Replace any existing JQuery code with:

this.div.nativeElement.click();

If you are experiencing issues, it is possible that your HTTP request was unsuccessful. Have you verified this?

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

Which module system is best suited for your tsconfig: commonjs, umd, or es6?

Which module should be specified in tsconfig, commonjs or es6? What factors should be considered when deciding? The output module needs to work on both the client and back ends. ...

What to do when encountering error TS2339: Property 'tz' is not found on type 'Moment'?

Within my Rails application, I have developed a frontend app utilizing angular. In this setup, I am incorporating both moment and moment-timezone as shown below: "moment": "^2.22.2", "moment-timezone": "^0.5.23", Fo ...

Dividing a JSON object into arrays containing keys and values within an Angular framework

I have a code snippet that involves receiving a JSON object of type Tenant from an API. I need to separate this object into keys and values within my function called tenantParser(). However, when I try to log displayedValues and displayedKeys, both show ...

Metamorphosed Version.execute SourceText and TypeScript Writer

I'm currently working on transforming a TypeScript source file and I have successfully made the necessary changes to the code. Despite seeing my transformed node in the statements property of the transformed source file, the SourceFile.text property d ...

Sharing Information Across Angular Routes

I've been encountering a slight issue when working with routes in Angular 4. Whenever I attempt to pass data from one component to another using navigate('root', data), all I end up receiving is [object Object],[object Object],[object Object ...

My Angular-based todo application has encountered an error notification from the system

Every time I try to post something, the system responds with a 405 error message in the console. I'm not sure what caused this issue or how to resolve it. Alternatively, if I click the done button, the console displays a 500 error message. Here is t ...

Finding ways to access intricate JSON objects in Angular 2

//component.ts public items: any; getResult(){ var jsonBody = {}; jsonBody['activity'] = this.activity; jsonBody['seatnumber'] = this.seatNo; this.localService.postCall(jsonBody) .subscribe( data =& ...

A guide on mapping an array and removing the associated element

I have an array called responseData, which is used to display the available card options on the screen. public responseData = [ { id: 1399, pessoa_id: 75898, created_at: '2022-11-08T16:59:59.000000Z', holder: 'LEONARDO ', validade: ...

Retrieve the data in JSON format including the child elements from a PostgreSQL

I have data from a table in Postgres that I need to be returned in Json format with its children properly ordered. So far, I haven't found a solution to achieve this. Is there a way in PostgreSQL to order the parent modules along with their child modu ...

Unable to circumvent the Angular sanitize security measures

Using a wysiwyg editor (angular-editor): <angular-editor [(ngModel)]="code" name="code"></angular-editor> Underneath the editor, attempting to implement ngx-highlightjs: <pre> <code [highlight]="code" [lineNumbers]="true"></ ...

Navigating with Angular 7

Encountering an issue with my Angular 7 Application Here is the error message: Error: Invalid configuration of route 'dashboard'. One of the following must be provided: component, redirectTo, children or loadChildren In the process of develo ...

Angular Material selectionChanged function is providing the previous step instead of the current step

I need to make a page with two columns: one for a vertical stepper and the other for step descriptions. I want the description to update based on the current step selected. However, I am running into an issue where the selectedIndex shows the previously ch ...

The child module is unable to locate the route URL for the parent module

I'm new to Angular and I'm working on organizing my code into modules. So far, I have an admin module that responds to the /admin request, but now I want to add a child module called Portfolio Module. Everything is working fine, except for the f ...

running a gulp task to compile all scss files within subdirectories

I'm facing an issue with my angular2 project structure, specifically in the following section: |templates |index -index.scss -index.template.html |About -about.scss -about.template.html My goal is to use gulp to com ...

Leverage the power of ngx-translate by incorporating multiple translations simultaneously and injecting dynamic text directly from your

I am seeking to incorporate dynamic elements into multiple translations using ngx-translate. This involves combining this solution for handling multiple translations: this.translate.get(['HOME', 'MY_ACCOUNT', 'CHANGE_PASSWORD&apos ...

Issue with dynamic opening and closing functionality of Mat Accordion

In my attempt to dynamically open and close my mat-accordion, I have encountered a problem where it doesn't seem to be working as intended. The goal is to create a component that can be reused in various scenarios. Below is the code snippet: side-pa ...

Do I really need to install @angular/router as a dependency in Angular CLI even if I don't plan on using it?

After creating a new Angular CLI project, I noticed that certain dependencies in the package.json file seemed unnecessary. I wanted to remove them along with FormModules and HttpModules from imports: @angular/forms": "^4.0.0", @angular/http": "^4.0.0", @a ...

Problem with Angular Material Tree icons' borders

Currently, I am utilizing the angular material tree component , but unfortunately I am facing an issue with removing the icon border as shown in this image: https://i.sstatic.net/p5QuU.png I have already imported MatIconModule import {MatIconModule} from & ...

No versions for "cra-template-typescript" that align with "latest" were located in our cache

Currently attempting to follow the steps outlined in this helpful guide: How to Develop a Basic React Application With an Express API. However, upon executing the command: npx create-react-app react-express-app --template typescript I encountered the foll ...

Angular's Http Interceptor causing FormData to malfunction

Hello, I'm currently facing an issue with sending http post formData to the server using httpInterceptor along with a Bearer token. Unfortunately, the formData doesn't seem to be working as expected. const myheader = new HttpHeaders(); myheader.s ...