An issue was encountered when the 'open' function was called on an object that lacks the implementation of the XMLHttpRequest interface

Encountering an error while attempting to initiate an ajax request within a class from another class function has left me puzzled. This issue can be observed in the Firefox console using the following examples:

https://jsfiddle.net/d2o1d0eu/

http://codepen.io/anon/pen/dGwwKG

var MyClass = new Class({

    initialize: function(options){

        this.my_request = new Request({
            url: '/echo/html/',
            method: 'post',
            onSuccess: function(resp) {
                alert(resp);
            }
        });

    },

    request: function(param){

        this.my_request.send('html='+param);

    }   

});

var MySecondClass = new Class({

    Implements: [Options],

    options: {
        first_class: {}
    },

    initialize: function(options){

        this.setOptions(options);

        this.options.first_class.request('internal'); // error

    },

    request: function(param){

        this.options.first_class.request(param);

    }

});

var unknown_name = new MyClass();
// unknown_name.request('unknown_name test'); // ok

var test = new MySecondClass({

    'first_class': unknown_name

});

// test.request('second class test'); // error

If you have any suggestions or insights on this matter, please feel free to share. Thank you.

Answer №1

Within its core functionality, the Options mixin relies on Object.merge, which performs a recursive duplication of the provided options parameter.

In your implementation, you are supplying an instance of MyClass as an option to an instance of MySecondClass. By passing an object in this manner, Object.merge will create a recursive copy of the object. As a result, within your second class, the property

this.options.first_class.my_request
contains a replicated version of a Request instance, with all of its object properties also being duplicated.

This situation poses a challenge, as the actual XMLHttpRequest object from the Request class is duplicated during the process. The outcome is a fundamental object (i.e., inheriting solely from Object.prototype) that possesses all the attributes and functions of a genuine XMLHttpRequest instance but is not truly an instance. Consequently, when the methods of XMLHttpRequest attempt to execute on non-instances, a DOMException occurs.

The key lesson here is: avoid passing Class instances as options. Instead, provide them as distinct parameters:

new MySecondClass(unknown_name, options)
.

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

Get the characteristics of the raphael pie chart

How can I access the attributes of a Raphael pie chart? I'm interested in getting attributes such as stroke color, values (excluding legend), radius, and x/y position. Here's how my pie chart is defined: pie = r.piechart(120, 140, 50, [55, 22] ...

What is the process for transforming binary code into a downloadable file format?

Upon receiving a binary response from the backend containing the filename and its corresponding download type, the following code snippet illustrates the data: 01 00 00 00 78 02 00 00 6c 02 00 00 91 16 a2 3d ....x...l....... 9d e3 a6 4d 8a 4b b4 38 77 bc b ...

Dealing with React Native text overflowing beyond the screen width when using FlexWrap

I'm currently working on implementing a component in react native that consists of a row containing and components, but I'm struggling to achieve the desired outcome. Here's my current code: <View style={{ flexDirection: ...

Issue with BlobUrl not functioning properly when included as the source in an audio tag

I need help with playing an audio file on click. I tried to implement it but for some reason, it's not working as expected. The response from the server is in binary format, which I decoded using base64_decode(responseFromServer); On the frontend (Vu ...

Concurrent Accordion and Color Transformation Animations

I am currently utilizing jQuery version 2.0.3 and jQuery UI version 1.10.3, specifically using the accordion feature. I am attempting to modify the color of the accordion panels as they open and close by implementing the following code: $(".main-content") ...

Error: The function isInitial of chunk cannot be found

Currently, I am attempting to build my program using the following command: "build": "NODE_ENV='production' webpack -p", However, I encountered an error message: node_modules/extract-text-webpack-plugin/index.js:267 var shouldE ...

Enhance videojs player source with personalized headers

Currently, I have a backend API running on Express that manages a streaming video m3u8 file. The endpoint for this file is: http://localhost:3000/api/stream.m3u8 It is important to note that access to this endpoint requires a valid user token. router r ...

Oops! You forgot to include the necessary getStaticPaths function for dynamic SSG pages on '/blogs/[post]'

Whenever I attempt to execute npm run build, an error occurs. The following build error occurred: Error: getStaticPaths is required for dynamic SSG pages and is missing for '/blogs/[post]'. This is the code snippet causing the issue: function ...

How can I extract the width of an uploaded image and verify it using JavaScript?

Is it possible to retrieve the image width through upload using PHP and then validate it in JavaScript? $_FILES['image'] If the image size is not equal to 560px, can we return false and display an alert message using JavaScript? Also, I am won ...

Exploring AngularJS and Jasmine: Testing a controller function that interacts with a service via $http

I encountered an issue while testing a controller that relies on a service. The problem arises because the service is currently set to null in order to focus solely on testing the controller. The current test setup is failing due to the BoardService being ...

Mapping through multiple items in a loop using Javascript

Typescript also functions Consider an array structured like this const elementList = ['one', 'two', 'three', 'four', 'five'] Now, suppose I want to generate components that appear as follows <div&g ...

The success variable is not functioning properly in the Statamic Antlers template when attempting to submit a form via AJAX

I have encountered an issue while using Statamic Form and Antlers template with AJAX to submit a form. The success variable does not seem to be functioning correctly, preventing me from updating the text to indicate that the form has been submitted. {{ for ...

What is the best way to design a button that can toggle a sidebar on and off

I'm struggling with creating a toggle button for the sidebar. I have the sidebar and the button ready, but I'm not sure how to make the toggle function work. Can someone please guide me on what steps I need to take to achieve this? Your help woul ...

Encountering issues with Webpack 2 failing to resolve the entry point specified in the

Encountering an issue while trying to compile my application with webpack 2. This is how my app folder structure looks: / | - dist/ | | - src/ | | | | - modules/ | | | | | | - module1.js | | | | - index.js * | | _ webpack.config.js | | ...

Issue: [$injector:unpr] The provider "someProvider" is not recognized by the system and is causing an error

When using angularjs I made sure to register a service in the services directory under modules -> module_name angular.module('module_name').factory('service_name', [ function() { // Public API console.log('hell ...

Is there a way to trigger a confirmation function for form submission exclusively when clicking one specific submit button, and not the other?

Here is the layout of my form: <form action="newsletter.php" name="newsletter" id="newsletter" method="post"> <input type="submit" value="Submit" class="c-btn" id="submit_value" name="submit_value"> <input type="submit" value="Send" cla ...

When it comes to successful payments, should you use `checkout.session.async_payment_succeeded` or `checkout.session.completed` in the Stripe event?

I'm feeling a little uncertain about the differences between two events: checkout.session.async_payment_succeeded & checkout.session.completed Currently, I am utilizing checkout.session.completed, but I'm wondering if checkout.session.async ...

AngularJS Jasmine test failure: Module instantiation failed

Everything was running smoothly with my angular app and tests using karma and jasmine. However, after adding a dependency in ui.bootstrap, my app continues to function as expected but now my tests won't run. Here is what I have: app.js - added depend ...

In MVC, the Ajax call will successfully execute only if the designated page is set as the startup page

Hello everyone, I'm just starting out with MVC and I have a few basic questions. I recently created a simple MVC2 website using VS2010. In the controller folder, I added a new controller with the following code: namespace MVC2TestApp.Controllers { ...