Error: You cannot assign a value to the left side of the console, it is

JavaScript Code

if ($language == 'english') {
  var displayvalue = "";
  if (data[i].report_name.length >= 20) {
    displayvalue = data[i].report_name.substr(0, 20) + "...";
  } else {
    displayvalue = data[i].report_name;
  }
  subMDesign += '<a  href=""  ng-click="getIndividualGraph(' + data[i].report_id + ',' + data[i].report_type + ')" ondragstart="event.dataTransfer.setData(text, drag.action?reportId=' + data[i].report_id + '&reportType=' + data[i].report_type + '_' + data[i].report_id + '_' + data[i].report_type + '_22)"><span class="iconsweet">r</span><span class="tooltips" title="' + data[i].report_description + '" unselectable="on">' + displayvalue + '</span></a>';

} else {
  var displayvalue = "";
  if (data[i].report_name.length >= 20) {
    displayvalue = data[i].report_name_ar.substr(0, 20) + "...";
  } else {
    displayvalue = data[i].report_name_ar;
  }
  subMDesign += '<a  href=""  ng-click="getIndividualGraph(' + data[i].report_id + ',' + data[i].report_type + ')" ondragstart="event.dataTransfer.setData(text, drag.action?reportId=' + data[i].report_id + '&reportType=' + data[i].report_type + '_' + data[i].report_id + '_' + data[i].report_type + '_22)"><span class="iconsweet">r</span><span class="tooltips" title="' + data[i].report_description + '" unselectable="on">' + displayvalue + '</span></a>';
}
}
var temp = $compile(subMDesign)($scope);
$("#reportUl" + $catid).html(temp);

I have a dynamic addition of subMDesign to a div in the last line. Upon examination in the console, subMDesign is represented as displayed below:

https://i.sstatic.net/TEzN6.png

During dragging, an error appears in the console like so:

ReferenceError: invalid assignment left-hand side event.dataTransfer.setData(text, drag.action?reportId=93&reportType=6_93_6_22)

The arrow points to the segment where there seems to be an issue with reportId=93. I am seeking assistance to resolve this problem.

javascriptjquerycssangularjs

Answer №1

The issue is arising because you are not specifying the string correctly; for instance, when you want to display this content on the page:

// Make sure to use quotes to indicate it as a string:
event.dataTransfer.setData(text, 'drag.action?reportId=93&reportType=6_93_6_22')

To resolve this, here is a straightforward refactor that also enhances the readability of your code by eliminating repetition. I observed that the only variation between English and non-English lies in the report name field:

var displayvalue = "";
var field = ($language == 'english') ? 'report_name' : 'report_name_ar';

if (data[i].report_name.length >= 20) {
  displayvalue = data[i][field].substr(0, 20) + "...";
} else {
  displayvalue = data[i][field];
}

subMDesign += '<a  href=""  ng-click="getIndividualGraph(' + data[i].report_id + ',' + data[i].report_type + ')" ondragstart="event.dataTransfer.setData(text, \'drag.action?reportId=' + data[i].report_id + '&reportType=' + data[i].report_type + '_' + data[i].report_id + '_' + data[i].report_type + '_22\')"><span class="iconsweet">r</span><span class="tooltips" title="' + data[i].report_description + '" unselectable="on">' + displayvalue + '</span></a>';

var temp = $compile(subMDesign)($scope);
$("#reportUl" + $catid).html(temp);

In the above snippet, notice the use of escaped quotes (like this: \') to ensure they are treated as part of the string and not as ending quotes.

For example: 

var foo = "foo"; 
console.log(foo); // prints: foo
var bar = "\"bar\""; // double quotes within double quotes need to be escaped
console.log(bar); // prints: "bar"
var blee = "'blee'"; // single quotes inside double quotes do not require escaping
console.log(blee); // prints: 'blee'
var blar = '\'blar\''; // single quotes within single quotes must be escaped
console.log(blee); // prints: 'blar'

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

Invalid preflight response (redirect) error

I am a beginner in utilizing Laravel and Lumen frameworks for my projects. Currently, I am working on my first project using Lumen and attempting to create an API call from Angular. Below is the Angular code snippet: app.controller('ListCtrl', ...

phpangularjshttplaravellumen

If the text is a single line, center it. However, do not center the text if it

Can we center align text horizontally if it occupies a single line, but refrain from center aligning and use white-space: normal when the text spans multiple lines (ideally without the need for JavaScript)? ...

htmlcss

Creating a new array from an existing array in JavaScript

I am attempting to clean up this particular array of data: [ { "Cpf": null, "Nascimento": null, "Sexo": null, "OnlyPerson": false, "IsFinanc": false, "Senha&qu ...

javascriptarraysfunctionvue.js

Recurring occurrences of Ajax ViewComponent being triggered

I have encountered a problem with an on-click Ajax event that is triggering a Controller action/ViewComponent multiple times. The issue arises when I utilize Ajax on a button click to call a Controller Action, which inserts data into the database and then ...

javascriptjqueryasp.netajaxasp.net-core-viewcomponent

Meta tags, social sharing buttons, and the AngularJS framework

I am in the process of developing a website that utilizes multiple views. The content within the tag and the meta tags on each page are controlled by a $rootScope variable, resulting in code like this: <html> <head> <title ng-bind="page ...

facebookangularjsfacebook-opengraph

Is it possible to customize the selected color of the Chip component?

Is there a way to change the clicked color of a Chip component without modifying the theme.js file? I attempted to override the classes with the desired colors, but it still defaults to primary/secondary colors. This information was found in the source co ...

javascriptreactjsmaterial-ui

The modal is throwing an error because it is unable to split an undefined property

Displaying values in separate spans within a modal dialog, sourced from an object (e.g. skill1, skill2, skill3). All functionality is functioning correctly. But encountering an error message TypeError: Can not read property' split 'of undefined i ...

angularjscordovaionic-framework

How to fix XmlHttpRequest PUT File Upload error when uploading files larger than 1MB

Uploading files to a server (in this case, S3) has been a smooth process for files under ~1MB. However, larger files tend to fail intermittently during the send operation. The issue does not seem to be related to security measures, CORS settings, or signin ...

javascriptajaxfile-uploadxmlhttprequest

The unusual behavior of setTimeout in loopback 3

I'm puzzled by the peculiar behavior exhibited by loopback. To illustrate, I have created a straightforward remote method shown below. Device.getTypes = function(next) { let result = {0: {val: 10}}; setTimeout(function() { result[0].w ...

javascriptnode.jsloopback

Preventing div resizing in AngularJS through scroll functionality

I want to create dialog boxes that are draggable and resizable and can contain arbitrary HTML-formatted content. To achieve this, I am utilizing JQLite within a directive. The resizing functionality is triggered by a mousedown event on a div in the bottom ...

jqueryhtmlcssangularjs

C# .NET Compile Class Name in JSON File

Currently, I am working on a C# project and I find myself in need of some guidance. At the moment, I am posting the following to my site: {Tags : 'App', Limit : '10' } And it is able to be converted to the following class: [Serializ ...

c#jqueryjson

Sometimes, Express may return the message "not found" on and off

After working with express for many years, I find myself a bit out of practice with TypeScript - and it seems like my eyesight is failing me! This is the first time I've encountered this issue, so I must be missing something... My current dilemma is ...

javascripttypescriptexpresscloud-foundryexpress-router

Linking AJAX to a specific URL and controller

In order to submit a form, I utilize an AJAX request that sends data to a specific page like form.ajax.php. On this page, I first check if '_POST' is set and then proceed to validate the form and save the information using my database class. The ...

javascriptphpajax

Provide the remaining arguments in a specific callback function in TypeScript while abiding by strict mode regulations

In my code, I have a function A that accepts another function as an argument. Within function A, I aim to run the given function with one specific parameter and the remaining parameters from the given function. Here's an example: function t(g: number, ...

javascripttypescript

Is there a way to compel the browser or JavaScript to delete/disregard a cached file?

I've encountered an issue with my Javascript program that extracts data from a text file and displays it in a table. The problem arises when I update the text file - the changes don't reflect on the table because the browser is caching the file. ...

javascripthtmlcaching

Enhance the volume of an item within an array using JavaScript, React, and RecoilJS

When I check the console, the result is correct. However, when I try to replace that array in setCart, it doesn't work. This is using RecoilJS. const cartState=[ { id:1, productName:'Apple',price:100,quantity:1}, { id:2, productName: ...

javascriptreactjsrecoiljs

HTML does not occupy the entire width of the page

I'm struggling with an issue on my website where the <html> element doesn't span full width on mobile devices. Currently, I am using Bootstrap and Jquery for my website. If you have any insights on what may be causing this problem, please ...

csshtmlmobile

ReactJS Form: Updates in Parent Component State Result in Child Field Being Cleared and Props Remaining Unchanged

I have devised a ReactJS code for an interactive form that allows the collection of student details. The beauty of this form is that it can accommodate any number of students with ease. In this setup, the parent component is known as App and the child comp ...

javascriptreactjsformsreact-bootstrap

Styling Angular Material Forms: Customizing Input Backgrounds and Button Heights

I'm currently working on a simple email input form with a submit button. Here are the adjustments I want to make: Set the background of the email input to white Ensure that the submit button matches the height of the input field However, my attempts ...

htmlcssangularangular-material

Serving static files in Django

Currently diving into Django and encountering a hurdle with static files. I've followed the setup in both the settings and HTML, but unfortunately, they are not loading on the website. Seeking assistance to resolve this issue! **settings.py:** STATIC ...

pythonhtmlcssdjangostatic