Backbone.js encountered an illegal invocation

http://jsfiddle.net/herrturtur/ExWFH/

If you want to give this a try, follow these steps:

  1. Click the plus button.
  2. Double click on the newly created name field.
  3. Enter information into the fields.
  4. Press Enter.

The era fields (from and until) will be displayed correctly, but they will not be saved (you need to reload to see the effect). Additionally, the Name field does not get updated at all.

In line 153, after setting the attributes in the NameView's close function which is triggered by an Enter-keypress, I call this.model.save(). Here is the code snippet:

close: function(e){ 
    this.$el.removeClass('editing');
    this.model.set({
        value: this.$('.name-value').val(), 
        from: this.model.from, // this is saved in the 
        until: this.model.until
    });

    this.model.save();

    if(this.eraView.$el.attr('editing')){
        this.eraView.close();
    }
    this.render();
},

I'm unsure what mistake I might be making, so if anyone could provide some insights, it would be greatly appreciated.

To add to the challenges, I am encountering a TypeError: Illegal Invocation error in Chrome.

Answer №1

The problem you're encountering arises when the terminate function is invoked.

It appears that in your terminate function, there is a recursive pattern being created, causing redundancy.

JS Bin

Furthermore, within your karass.TerminateView, you are redundantly triggering the same function unnecessarily. It might be beneficial to rename it to a more fitting name based on the purpose of the task.

this.fire('terminate');

Answer №2

The reason for the error you are encountering is due to this line of code: this.eraView.on('close', close);

It should actually be written as:

this.eraView.on('close', this.close, this);

Furthermore, when you perform this action:

this.model.set({
            value: this.$('.name-value').val(), 
            from: this.model.from, 
            until: this.model.until
        });

this.model.from and this.model.until are not defined, since you have already set those attributes earlier. The model already contains them. If you wish to retrieve them, you should use this.model.get('from') instead of this.model.from. However, obtaining the value from the model and resetting it is redundant. You can simply use set for the value, as the other two attributes are already present.

A similar issue arises during the rendering of NameView, where you have implemented:

this.$el.html(this.template({value: this.model.value}));

Similar to before, you must utilize this.model.get('value') instead.

I suggest setting breakpoints in Chrome and stepping through the code. It's quite easy to debug and identify what is causing the problem :)

Check out the updated jsFiddle.

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

Ways to adjust the size of the parent element based on the height of a specific element

I am faced with a situation where I need to identify all elements belonging to a specific class and adjust the padding-bottom of their parent div based on the height of the matched element. For example, consider the following structure: <div class=&ap ...

Issue with Google Maps API v3 controls appearing behind the map

Hello there, I am diving into the world of Google Maps API for the first time. I'm utilizing WordPress along with the Genesis Framework, Currently, I am following a tutorial on http://tympanus.net/codrops/2011/04/13/interactive-google-map/ and suc ...

Guide on adjusting the darkness of a MaterialUI Avatar component image and adding text to it

I'm currently working with the Avatar component from Material UI along with Tailwind CSS. I found that by simply adding the image URL to the src, it displays the avatar successfully. <Avatar alt="Cindy Baker" src="https://mui.com/sta ...

How can JSON data be passed to the Google Charts API?

I am currently working on a project that involves retrieving JSON data from a website and visualizing it on a live graph using the Google Charts API. Despite my efforts, I am unable to get the chart to display properly. Can someone please guide me in the r ...

What could be causing my AngularJS directive to malfunction in Edge browser?

I have encountered an issue where this code works fine in all major browsers, but Edge only shows the valid value in the DOM inspector. The page still displays the old value. Why is this happening? (function (angular, module) { 'use strict'; ...

Is there a way to have one element automatically expand when another is selected?

I'm currently utilizing the date and time picker from . However, I need some assistance with the current setup. Currently, the date and time pickers are in separate input fields. In order to select a date, I have to click on the Date input field, and ...

Having issues setting a property value on a Mongoose result in a Node.js application

Hello there, I am currently working with a MongoDB object retrieved via a findById method, and I need to convert the _id within this object from an ObjectID type to a string. I have developed the following function: student: async (parent, { _id }, ...

Guide on organizing items into rows with 3 columns through iteration

Click on the provided JSFiddle link to view a dropdown menu that filters items into categories. Each item is stored as an object in an array for its respective category. Currently, all items are displayed in one column and I want to divide them into three ...

Get the file from the web browser

Hey there, greetings from my part of the world. I have some straightforward questions that I'm not sure have simple answers. Currently, I am working on a web application using the JSP/Servlet framework. In this app, users can download a flat text fil ...

The success function is failing to display the Ajax response

Is there a way to correctly display the ajax response of my code? I noticed that when using async=true, only the last value of yy is shown. However, I want to display it for all values from 0 to a. Interestingly, everything works fine when using async=fa ...

Sorting the array in MongoDB before slicing it

Currently, I have a pipeline that aggregates Regions along with their respective countries and sales values. My goal is to obtain the top 5 countries by sales in each region using the $slice method. However, the issue I am facing is that it returns the fir ...

What are the advantages of using history.push or another method from react-router-dom compared to simply assigning the path to window.location.pathname?

When I need to navigate within my code, I find it more convenient to simply assign the desired path to window.location.pathname. Can this approach have any drawbacks? ...

The $.ajax request encounters an error when trying to parse the data as JSON

I am encountering an issue where my ajax call to a JSON file fails when using dataType: "json". However, changing it to "text" allows the ajax call to succeed. See the code snippet below: $.ajax({ type: "POST", url: url, dataType: "json", ...

What is the best way to conceal an HTML element on a particular page that is already styled as (visibility: visible), but only if its child has a specific class assigned to it?

I have a grid of content and posts displayed on multiple webpages. Users can select specific items from the grid to navigate to more detailed information on another page. Each webpage has its own grid which I want to filter based on a specific class. The ...

What is the best way to retrieve a value from a function that contains multiple nested functions in Javascript?

The issue at hand is my struggle to extract a value from a nested method and utilize it outside of its parent method. I am aiming for the output of "console.log(someObjects[i].valueChecker);" to display either "true" or "false," but instead, it simply retu ...

Adjust the style of an element when hovering over a different element

Below is the HTML code in question: <div> class="module-title" <h2 class="title" style="visibility: visible;"> <span>Spantext</span> Nonspantext </h2> </div> I am looking to change th ...

The font size appears significantly smaller than expected when using wkhtmltoimage to render

I am trying to convert text into an image, with a static layout and size while adjusting the font size based on the amount of text. I prefer using wkhtmltoimage 0.12.5 as it offers various CSS styling options. Currently, I am working on a Mac. Below is a ...

Cutting-edge framework for Single Page Applications

Can you assist me in identifying the most recent framework suitable for creating single page applications? Your help is greatly appreciated. Thank you. ...

Tips for enabling JSON access to the content inside a textarea element in HTML:

I'm attempting to develop a button that enables users to save edits to a post they write in a textarea using JSON. However, when attempting to save the data with a PUT request, I encounter the following error: raise JSONDecodeError("Expecting val ...

using jQuery to eliminate an HTML element based on its attribute

How can I remove an element with the attribute cursor = "pointer"? I want to achieve this using JavaScript in HTML. Specifically, I am looking to remove the following item: <g cursor="pointer"></g>. It's unclear to me why this element has ...