The Add and Update functions of an AngularJS application are malfunctioning in Internet Explorer

Encountered a situation where updates and additions in IE show results in Chrome :D

// Extract category object and id from the parent
    $scope.addNewCategory = function (category, parentId) {
        $scope.resetError();
        category.parentId = parentId.id;

        $http.post('/guardian/springmvc/categories/addCategoryValue', category).success(function () {
            $scope.retriveCategoryValues(parentId);
            $scope.category.parentId = '';
            $scope.category.name = '';
            $scope.category.description = '';

        }).
            error(function (data, status, headers, config) {
                // execute this block if an error occurs asynchronously 
                // or server responds with an error status.
                $scope.setError('Could not add new category');
                console.log(data);
            });
    };

    // Extract category value object and id from the parent
    $scope.editCategoryValue = function (categoryValue, parentId) {
        $scope.resetError();
        categoryValue.id = categoryValue.id;
        categoryValue.parentId = parentId.id;
        $http.put('/guardian/springmvc/categories/updateCategoryValue', categoryValue).success(function () {
            $scope.retriveCategoryValues(parentId);
            $scope.categoryValue.parentId = '';
            $scope.categoryValue.id = '';
            $scope.categoryValue.name = '';
            $scope.categoryValue.description = '';
            $scope.editMode = false;
        }).
            error(function (data, status, headers, config) {
                // execute this block if an error occurs asynchronously
                // or server returns response with an error status.
                $scope.setError('Could not update category');
                console.log(data);
            });
    };

Refer to Rest Controller code provided below.

In Chrome, Insert and Update operations are functioning correctly.

/**
 * Creates a new category.
 * @param created The information of the category to create.
 * @return The created category.
 */
@RequestMapping(method = RequestMethod.POST, value = "/addCategoryValue", produces = "application/json")
public
@ResponseBody
OrgCategoryDTO addNewCategory(@RequestBody OrgCategoryDTO categoryToCreate) {
    try {
        if(LOGGER.isInfoEnabled()) {
            LOGGER.info("CategoryController: calling categoryService's create");
        }
        if(categoryToCreate != null)
        return categoryService.create(categoryToCreate);
    } catch (Exception e) {
        LOGGER.debug("Exception  " + e);
    }
    return new OrgCategoryDTO();
}

/**
 * Updates the information of a category.
 * @param updated The information of the category to update.
 * @return void.
 */

@RequestMapping(method = RequestMethod.PUT, value = "/updateCategoryValue", produces = "application/json")
public
@ResponseBody
void updateCategory(@RequestBody OrgCategoryDTO categoryToUpdate) {
    if(LOGGER.isInfoEnabled()) {
        LOGGER.info("CategoryController: calling categoryService's update");
    }
    try {
        if(categoryToUpdate != null)
        categoryService.update(categoryToUpdate);
    } catch (Exception e) {
        LOGGER.debug("Exception  " + e);
    }
}

Server Logs for Update action

SUCCESSFULLY LOADED validation.properties via the CLASSPATH from '/ (root)' using current thread context class loader!
Hibernate: select orgcategor0_.CATEGORY_ID as CATEGORY1_0_0_, orgcategor0_.CMS_TIMESTAMP as CMS2_0_0_, orgcategor0_.DESCRIPTION as DESCRIPT3_0_0_, orgcategor0_.ENABLED as ENABLED4_0_0_, orgcategor0_.ROW_TIMESTAMP as ROW5_0_0_, orgcategor0_.CATEGORY_LEVEL as CATEGORY6_0_0_, orgcategor0_.NAME as NAME7_0_0_, orgcategor0_.CATEGORY_TYPE as CATEGORY8_0_0_ from ORG_CATEGORY orgcategor0_ where orgcategor0_.CATEGORY_ID=?
Hibernate: update ORG_CATEGORY set CMS_TIMESTAMP=?, DESCRIPTION=?, ENABLED=?, ROW_TIMESTAMP=?, CATEGORY_LEVEL=?, NAME=?, CATEGORY_TYPE=? where CATEGORY_ID=?

Server logs for Insert Action

Hibernate: select orgcategor0_.CATEGORY_ID as CATEGORY1_0_0_, orgcategor0_.CMS_TIMESTAMP as CMS2_0_0_, orgcategor0_.DESCRIPTION as DESCRIPT3_0_0_, orgcategor0_.ENABLED as ENABLED4_0_0_, orgcategor0_.ROW_TIMESTAMP as ROW5_0_0_, orgcategor0_.CATEGORY_LEVEL as CATEGORY6_0_0_, orgcategor0_.NAME as NAME7_0_0_, orgcategor0_.CATEGORY_TYPE as CATEGORY8_0_0_ from ORG_CATEGORY orgcategor0_ where orgcategor0_.CATEGORY_ID=?
Hibernate: select childcateg0_.FK_ORG_CATEGORY_ID as FK5_0_2_, childcateg0_.CATEGORY_IMPCATEGORY_ID as CATEGORY1_2_2_, childcateg0_.CATEGORY_IMPCATEGORY_ID as CATEGORY1_2_1_, childcateg0_.FK_ORG_IMP_CAT_ID as FK4_2_1_, childcateg0_.CMS_TIMESTAMP as CMS2_2_1_, childcateg0_.ROW_TIMESTAMP as ROW3_2_1_, childcateg0_.FK_ORG_CATEGORY_ID as FK5_2_1_, orgcategor1_.CATEGORY_ID as CATEGORY1_0_0_, orgcategor1_.CMS_TIMESTAMP as CMS2_0_0_, orgcategor1_.DESCRIPTION as DESCRIPT3_0_0_, orgcategor1_.ENABLED as ENABLED4_0_0_, orgcategor1_.ROW_TIMESTAMP as ROW5_0_0_, orgcategor1_.CATEGORY_LEVEL as CATEGORY6_0_0_, orgcategor1_.NAME as NAME7_0_0_, orgcategor1_.CATEGORY_TYPE as CATEGORY8_0_0_ from ORG_CATEGORY_MAP childcateg0_ left outer join ORG_CATEGORY orgcategor1_ on childcateg0_.FK_ORG_IMP_CAT_ID=orgcategor1_.CATEGORY_ID where childcateg0_.FK_ORG_CATEGORY_ID=?
Hibernate: insert into ORG_CATEGORY (CMS_TIMESTAMP, DESCRIPTION, ENABLED, ROW_TIMESTAMP, CATEGORY_LEVEL, NAME, CATEGORY_TYPE, CATEGORY_ID) values (?, ?, ?, ?, ?, ?, ?, ?)
Hibernate: insert into ORG_CATEGORY_MAP (FK_ORG_IMP_CAT_ID, CMS_TIMESTAMP, ROW_TIMESTAMP, FK_ORG_CATEGORY_ID, CATEGORY_IMPCATEGORY_ID) values (?, ?, ?, ?, ?)

Answer №1

Implemented the instructions outlined in https://docs.angularjs.org/guide/ie Followed each step carefully as provided in the link above and successfully resolved the compatibility issue with IE browser.

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

Encountering a problem with configuring webpack's CommonsChunkPlugin for multiple entry points

entry: { page1: '~/page1', page2: '~/page2', page3: '~/page3', lib: ['date-fns', 'lodash'], vendor: ['vue', 'vuex', 'vue-router'] }, new webpack.optimize.C ...

Looking to conceal the edges of a ThreeJS box primitive

I'm trying to figure out how to hide the edges displayed in a box primitive using ThreeJS. The edges only appear when I apply a texture to the faces. I've attempted various options such as setting wireframe=false, but the edges persist. Here&ap ...

Utilizing Ajax: Sending Customized Data to a Modal

Having never worked with jquery before, I struggled to find a solution for my specific case. On the cockpit.php page, I have a form that retrieves content from a mysql database. Currently, I am able to display this content in a div on the same cockpit.php ...

Loop through the v-for based on the input number that was selected

I'm looking to accomplish the following: if a user selects input X (a number between 1 and 10), I want to render a specific vue component X times. It seems to work if I use v-for n in 10, but not when I use variables. <template> <div> ...

Is there a way for a DOMWindow popup to automatically resize to fit its

Currently exploring JQuery and learning on the fly, I'm wondering if there's a method to automatically adjust the size of a DOM window based on its content? I've successfully modified the parameters to accept % width and height instead of p ...

What is the best way to integrate jQuery Masonry with ES6 modules?

Attempting to utilize the npm package https://www.npmjs.com/package/masonry-layout Following the installation instructions, I executed: npm install masonry-layout --save Then, in my file, import '../../../node_modules/masonry-layout/dist/masonry.p ...

What is the impact on positioning when including a class in Angular?

I've encountered a peculiar bug while trying to add a class to a ui-router element. When I apply the active class, an absolutely positioned element that spans the entire view suddenly snaps to the width of its parent. To see the issue in action, chec ...

`On mouseup event, changing specific text`

I've been working on a real-time HTML highlighter that surrounds selected text with span elements containing a background property. Check out the fiddle here: https://jsfiddle.net/4hd2vrex/ The issue arises when users make multiple selections, leadi ...

Updating a component when a prop changes

Embarking on my journey into the world of React, I find myself in need of assistance. The issue at hand involves re-rendering data within my Table component. Whenever a new API call is made to create an entry in my database using Prisma, the newly added d ...

The nested directive link function failed to execute and the controller was not recognized

Apologies in advance for adding to the sea of 'mah directive link function isn't called!' posts on Stack Overflow, but none of the solutions seem to work for me. I have a directive named sgMapHeader nested inside another directive called sg ...

Javascript datatables do not allow for setting a default column sort

I am encountering an issue where I need to sort the results by a specific column on page load. In this case, I want the initial results to be displayed in descending order based on "RecordDate". However, it seems that the server side is blocking any sort ...

Where can I find the previous version of three.js? What is causing the incompatibility between the old and new versions of

Why is my app facing issues with the updated version of three.js? Can I find the previous version of three.js and why isn't the new version compatible? ...

The absence of text is not displayed in an empty slot of a Buefy table

Currently, I am working on a Nuxt project with Buefy implementation. I attempted to create a table with an #empty slot that displays a message when no data is available. However, my code does not seem to be working as expected. If you refer to the Buefy do ...

Issue with Material-UI Dialog Reusable Component: No error messages in console and app remains stable

Here is a component I've created for reusability: import { Dialog, DialogContent, DialogContentText, DialogTitle, Divider, Button, DialogActions, } from "@mui/material"; const Modal = ({ title, subtitle, children, isOpen, hand ...

Can a constructor function be utilized as a parameter type in another function within TypeScript?

Recently, I came across TypeScript and after watching some video reviews, I see great potential in it. It seems to offer better code completion, implicit code documentation, and enhanced type safety for JavaScript. I'm currently in the process of con ...

What is the best way to calculate checksum and convert it to a 64-bit value using Javascript for handling extremely large files to avoid RAM overflow?

Question: What is the best method for generating a unique and consistent checksum across all browsers? Additionally, how can a SHA256/MD5 checksum string be converted to 64-bit? How can files be read without requiring excessive amounts of RAM when ...

The nearby diversion inexplicably triggers a phantom GET request

My goal is to build a website with specific functionality: If a user tries to access the /home page without authentication, they should be redirected to the /login page. After successfully logging in on the /login page, the user should receive a session c ...

Generating Dynamic Object Keys following Array Mapping

I have a vision of creating a sophisticated data structure resembling the configuration below: slots: { 'slot_1': { id: 'slot_1', associatedCard: {} }, 'slot_2': { id: 'slot_2& ...

Modifying the color of multiple cells simultaneously

I'm currently facing an issue where I need to change the cell color of multiple cells at once, all stored within a specific range. However, I only want certain cells to change based on a particular condition. While I can manually change each cell, it& ...

Is it feasible to develop a Grafana datasource plugin that does not rely on an external backend system?

I am in the process of developing a Grafana datasource plugin that operates independently without relying on an external backend. My plugin is based on the simple-json datasource plugin available at: https://github.com/grafana/simple-json-datasource In a ...