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

Utilizing AngularJS to selectively filter objects based on specific fields using the OR operator

My collection includes various items with different attributes. For instance, here is the information for one item: {"id":7,"name":"ItemName","status":"Active","statusFrom":"2016-01-04T00:00:00","development":"Started","devStartedFrom":"2016-01-04T00:00:0 ...

"Ensure only one checkbox is selected at a time by unchecking the previous

Hi, I'm facing two issues with the code below. The first problem is that when I select checkbox number 3, it automatically selects number 2 as well. I only want this to happen if I manually check it (similar to checkbox number 2). The second issue i ...

Why is applying CSS on an li element using .css() in JQuery not functioning?

Hey there! Could you please review my code? I'm attempting to add a top position to the <li> element using a variable in jQuery, but I'm not sure how to do it. Here's the code: <script> $(document).ready(function(){ ...

Enable the button if at least one checkbox has been selected

I've written some code similar to this: $('input[type=checkbox]').click(function(event) { $('.chuis').each(function() { if(this.checked) { $('#delete_all_vm').prop("disabled",false); } ...

Listen for events in a child process in NodeJS

I am currently utilizing the node child_process API https://nodejs.org/api/child_process.html#child_process_child_process_spawn_command_args_options var child = child_process.spawn(cmd, val, options); Within the child process, I make use of the followin ...

Altering the playback of a flash object using HTML or JavaScript

Can the playback speed of a flash object be adjusted without recompiling the object, like through HTML attributes or JavaScript? Appreciate any help in advance ...

Unraveling the Power of Recursive Functions within a React.JS

I'm encountering an issue with a React project. It involves a tic tac toe game where I'm currently working on the implementation of the computer player. The problem arises when the human player clicks on one square (Field-component), triggering ...

What exactly does a 'hoisted manifest' mean when it comes to using Yarn?

Encountering an issue while attempting to install a package using yarn, I am receiving the error message: expected hoisted manifest for \"myPackage#@material-ui/core#react-dom\" However, the concept of a 'hoisted manifest' is not entir ...

The debate between importing images and including them inline in NextJS is a hot

When using NextJS, what sets apart importing an image from directly including it with next/image? import logo from './logo.png'; <Image src={logo} /> /* versus */ <Image src={'/logo.png'} /> (This is pseudocode meant for ...

The number of articles in the MongoDB database is currently unknown

Currently, I am in the process of developing a blog using nodejs, express, and mongodb with jade as the template engine. The folder structure of my project looks like this: project/ modules/ views/ index.jade app. ...

Ensuring the safety of PHP JSON output results on a web server

I am currently developing an app using phonegap that submits and retrieves data from a MySQL database hosted on a server (website). I have successfully implemented the data submission and retrieval features in the app. The data is fetched through AJAX fro ...

What is the best way to incorporate products as components into the cart component?

ProductCard import React from 'react'; import { Card, Container, Row, Col, Button} from 'react-bootstrap'; import Cart from './Cart'; import './ItemCard.css'; function ProductCard(props){ return( <Car ...

What is the best way to keep the navbar contained within the parent div (hero image) no matter the size of the screen?

After working on adjusting my website layout for different screen sizes, I encountered an issue with the navbar overflowing the parent image when viewed on my laptop. Despite trying both relative and absolute positioning for the .navbar element and setting ...

Searching in real-time with ajax in CodeIgniter framework is a seamless and efficient process

I'm a beginner in CodeIgniter and eager to learn. Currently, I'm facing an issue where the data is not being populated on the search page. In the model: function fetch_data($query) { $this->db->select('*'); $this-> ...

What methods can I use to design a splash screen using Vue.js?

I am interested in creating a splash screen that will be displayed for a minimum of X seconds or until the app finishes loading. My vision is to have the app logo prominently displayed in the center of the screen, fading in and out against a black, opaque ...

The issue with MVC4 and Ajax requests for converting image ByteArrays appears to be problematic

I am attempting to change an image in my View with a click event. However, when the controller returns a byte array, the original image is replaced with an empty one. Below is the code from my Controller: [HttpPost] public byte[] GetSelectedI ...

Updating an Object in vue.js Upon Click Event to Add a New Value

I currently have a code snippet that looks like the following: arr = [ { val1: a, val2: b }, { val1: a, val2: b }, { val1: a, val2: b } ] <div v-for="single in arr"> <button v-on:click="addSome"></button> </div> When I c ...

What impact does incorporating a new test case have on code coverage in Jest?

I recently encountered an unexpected situation while working on a Jest test suite. Despite not making any changes to the codebase, I simply added a new test. Originally: mylibrary.js | 95.65 | 89.66 | 100 | 95.65 | 54-56,84 ------------ ...

React Timer App: The setInterval function is being reset after each render operation

I'm currently working on a straightforward timer application that will begin counting seconds when a button is clicked. To implement this, I am utilizing react hooks. import React, { useState } from 'react' function Timer() { const [sec ...

"How to set the header in AngularJS when opening a new window with a GET request URL

Can anyone provide guidance on setting headers and opening a URL (https://www.example.com) in a new window without including sensitive authentication information in the URL parameters? I am working with AngularJS for this task. I have searched through exi ...