Numerous asynchronous requests

I'm trying to figure out why the application keeps making multiple ajax calls.

Check out this directive:

gameApp.directive('mapActivity', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$watch(function(scope) {
                angular.element('.click#1').addClass('dotted').html($("<img src='images/dot.png'>"));
                var j = null;
                for(var i = 1; i <= 4; i++)
                {
                    $.ajax({
                        type: 'GET',
                        url: 'lib/terrain.php',
                        dataType: 'html',
                        data: {i: i},
                        success: function(data) {
                            var randomRuta = Math.floor((Math.random() * 100) + 1);
                            angular.element('.click#'+randomRuta).addClass('monster').html($("<img src='images/blackdot.png' title='"+data+"'>"));

                        },
                        error: function(xhr, ajaxOptions, thrownError) { alert(thrownError); }
                    });
                    j=i;
                }  
                angular.element('.click').click(function() {
                    if(angular.element(this).hasClass('monster'))
                    {
                        if(confirm('Vill du anfalla monster?'))
                        {
                            alert("Du vann");
                            angular.element('.click.monster'+j).empty();
                            angular.element('.click.monster').removeClass('monster'+j);

                            angular.element('.click.dotted').empty();
                            angular.element('.click.dotted').removeClass('dotted');
                            angular.element(this).addClass('dotted');
                            angular.element('.click.dotted').html($('<img src="images/dot.png">'));
                        }
                    }
                    else
                    {
                        angular.element('.click.dotted').empty();
                        angular.element('.click.dotted').removeClass('dotted');

                        if(!angular.element(this).hasClass('dotted'))
                        {
                            angular.element(this).addClass('dotted');
                            angular.element(this).html($('<img src="images/dot.png">'));
                        }
                    }
                });
            });                     
        }
    };
});

It seems like the ajax call is being made twice instead of just four times inside the loop. This inconsistency is causing issues in the functionality of the application.

Below is my controller configuration:

var gameApp = angular.module("gameApp", ['ngRoute','ngSanitize']);

// code for service and additional app configurations

Here is a snippet of the HTML code where the directive is used:

<div ng-controller="gameCtrl">
    <table ng-bind-html="safeHtml()" map-Activity>
    </table>
</div>

If anyone has any insights or suggestions on how to resolve this issue, it would be greatly appreciated!

Answer №1

It appears that the function makeTableFrom is being called (to build HTML for manipulation) after the response from $http.post("lib/action.php") is received. The link function of the mapActivity directive, however, runs much earlier than this response. Therefore, the element that angular.element('.click#1') refers to does not currently exist. By enclosing it in a scope.$watch, you are ensuring that it runs every time there is a change on the scope. The line

$scope.result = makeTableFrom(data);
definitely causes a change on the scope, meaning that once the response is received, there will be an element matched by angular.element('.click#1') (created by makeTableFrom). The issue is that the code within scope.$watch executes at least once before the response arrives. To address this, you either need to reconsider the entire approach or take a quick fix by checking if the elements exist before manipulating them:

scope.$watch(function(scope) {
    if(angular.element('.click#1').size() > 0) {
        ...
    }  
}

Furthermore, the reason why the idea of using scope.$watch is flawed is because it will also run in the future whenever you modify the scope (`$scope.foo = 'bar`).

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

Receive the button click event outside of the canvas

Is there a way to have separate click events for the button and the ListItem? My focus is on the button click event only, without triggering the ListItem event. Live DEMO import React from "react"; import ReactDOM from "react-dom"; import ListItem from ...

I am experiencing issues with the functionality of front-page.php on my WordPress website

Seeking guidance in addressing a web development issue: I have encountered a problem with a website that I am currently working on locally using WordPress. I added the following code to the header.php file: <link rel="stylesheet" type="text/css" href= ...

Tips for implementing a document ready function on a nested page within a larger full-page website

I am currently working on a website that utilizes fullpage.js, but the same principle applies to all single-page websites. I am trying to figure out how to implement the $(document).ready() function on a 'nested' page within the site. Since every ...

Execute the JS file to retrieve the initial port available within the npm script

Within my package.json, I have the following script: "dev": "webpack-dev-server --config webpack.dev.js --progress --port ${getPort()}", I've also installed a package called get-port, which allows me to set a default port and ...

Confirming the accuracy of multiple fields in a form

Looking for help with validating both password and email fields on a registration form. I've successfully implemented validation for passwords, but need assistance adding validation for the email section as well. Can both be validated on the same form ...

Rendering React Router server-side with client-side session information

Currently, I am working with mozilla client-sessions in conjunction with express/node. My goal is to pass my session.user to the react-router within a standard * request. Despite my efforts and attempts, I keep encountering an issue where it becomes unde ...

Plugin refresh after callback

I have a webpage that features a row of buttons at the top, followed by some content below. Whenever one of the buttons is clicked, the content is updated using UpdatePanels. Within this content, I am attempting to incorporate the royal slider plugin, wh ...

What is the process for accessing my PayPal Sandbox account?

I'm having trouble logging into my SandBox Account since they updated the menu. The old steps mentioned in this post Can't login to paypal sandbox no longer seem to work. Could someone please provide me with detailed, step-by-step instructions o ...

How to implement a Typescript interface without necessarily implementing the parent interfaces

Within my current project, I have defined the following interfaces: interface foo { fooProperty: number; fooFunction(): void; } interface bar extends foo { barProperty: string; barFunction(): void; } Now, I am interested in creating a class like ...

Navigating in Angular with parameters without modifying the URL address

In a nutshell, my goal is to navigate to a page with parameters without showing them in the URL. I have two components: Component A and B. What I want to do is route to B while still needing some parameters from A. I know I can achieve this by setting a ...

Executing getJSON requests in perfect synchronization of time

For my weather project, I have two JSON requests to make. The data from the first request is needed in order to personalize the second request for the user. The first request retrieves the latitude and longitude of the user, which are then required for the ...

Error message in my Angular project: Invalid Target Error

Out of nowhere, I encountered an invalid target error while running my Angular project with the command: npm start An unhandled exception occurred: Invalid target: {"project":"agmbs","target":"build","configur ...

Incorporate a secondary (auxiliary) class into ReactJS

Looking to create a helper class similar to this: export default class A { constructor() { console.log(1); } test() { console.log(2); } } and utilize it within a component like so: import React, { Component } from "react"; import A from ...

Unlocking the power of keys in manipulating JSONP objects

i am uncertain about the accuracy of my title, as i am unsure how to label the task at hand... "modifiers":{"agility":{"type":"attribute","displayname":"agi","value":46}} forms a part of a jsonp callback that is received from this source. i am attempting ...

Localization of date picker in material-table(Material UI)

Does anyone have experience with localizing the date picker in material-table (Material UI)? The date picker is specifically used for filtering in this scenario. import React from 'react'; import MaterialTable from 'material-table'; fu ...

Unable to retrieve form data like the username from my AngularJS controller

I am having trouble implementing the registration functionality to save user details from a form to the database. When trying to access the username in my controller, I keep getting an undefined error. username is:undefined signup.controller.js (13,9) ...

What could be causing the lack of animation in W3schools icons?

I've followed the steps provided and even attempted to copy and paste them. However, I'm experiencing an issue where the animation doesn't fully execute. Instead of the bars turning into an X shape, they reset halfway through the animation. ...

How to obtain the value of TR in JavaScript?

Objective: Extract the value "2TR" from "MARSSTANDGATA132TR" using JavaScript. Need to determine the location of the digit 2 within the extracted string. Issue: Uncertain about the correct syntax to achieve this task. Additional Details: *The cha ...

MUI React: The Smallest Date Possible

Is there a way to ensure that the user cannot select a To Date that is earlier than the From Date? Below are my Two Date Pickers, with date formatting done using moment. <DatePicker v ...

I encountered an issue while using the tab bar feature in Bootstrap where I wasn't able to navigate back to the first tab or any

My current project involves JavaScript, and I integrated a Bootstrap tab bar component. However, when I try to run the code in Google Chrome, I encounter an issue. The first time I select the first tab, the content displays correctly. But when I select the ...