The display of data attributes is not being rendered correctly

Check out the fiddle I'm currently working on: http://jsfiddle.net/7Z8wY/9/

The HTML section looks like this:

<div class="container">
   <div class="right">
       <div id="cityList" class="inner-table"></div>
   </div>
   <div class="left">
       <div id="cityList2" class="inner-table"></div>
   </div>
   <div class="middle">
       <div id="cityList3" class="inner-table"></div>
   </div>

The issue arises when mycars[i] has data-attributes and the rendering does not occur. You can see the fiddle with the data-attributes removed here:http://jsfiddle.net/7Z8wY/10/

Could someone provide a solution for rendering in cases where data-attributes are present (or suggest an alternative method)?

javascriptjqueryhtmlcss

Answer №1

Errors are present in the syntax of string literals

mycars[0] = '<span data-modelName="city1">S</span>';
mycars[1] = '<span data-modelname="city2">SE</span>';
mycars[2] = '<span data-modelname="city3">SECUNDERABAD</span>';

See a demonstration here: Fiddle

When a string is initiated with ", all instances of " within the string must be escaped

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

Troubleshooting: AngularJS routing issue

I'm facing an issue with my AngularJS routing code. Here is the code snippet: /// <reference path="C:\Users\elwany\documents\visual studio 2015\Projects\spaapplication\spaapplication\scripts/angular.js" /& ...

javascripthtmlangularjs

Transforming a string in AngularJS to a "controller as" approach using $parse

How can I modify foo.callbacke to reference the timerController.callbacke method? <div ng-app="timerApp" ng-controller="timerController as foo"> <div ng-repeat="item in [1,2,3,4]"> <div watcher="{'seconds': 'foo.callbacke ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat

Increasing and decreasing values

I'd like to create two buttons for increasing and decreasing a value. For example, if the variable k is initially set to 4 and I press the decrement button, it should decrease from 4 to 3. This is what I attempted: var k = 1; function qtrFunction ...

javascripthtml

Submitting a form using an anchor tag in Angular 8: A step-by-step guide

I have a question about how to submit form data using hidden input fields when a user clicks on an <a> tag. <form action="/submit/form/link"> <input type="hidden" [attr.value]="orderNumber.id" /> <input type="hidden" [attr.value]= ...

javascriptangulartypescriptformssubmit

Stop automated web crawlers from crawling through JavaScript links

To enable remote jQuery templating, I have embedded some links in JavaScript. For example: <script type="text/javascript"> var catalog = {}; catalog['key1'] = 'somepath/template_1.html'; catalog['key2'] = 'anotherp ...

javascriptjqueryweb-crawler

How can I adjust the size of my elements to be responsive in pixels

While browsing through Quora and Facebook feeds, I noticed the fixed size of user display pictures: width: 40px; height: 40px; Even when resizing the browser window for a responsive design, these pictures maintain their size at 40px x 40px. What other f ...

cssresponsive-design

Button submission for modifying several files

Current Scenario: On my article page (article.php), I have divided the content into two separate sections - one for the title (pulled from title.php) and another for the content (pulled from content.php). I recently added a feature that allows the author ...

phpjquery

Best Practices for Safely Storing the JWT Client Credentials Grant

Currently, I am working on a NodeJS Express Application that connects to an Auth Server using client credentials grant. After receiving the token from the Auth Server, I use it to access data from an API. I am seeking advice on the most effective way to s ...

javascriptnode.jsexpressjwtopenid-connect

Retrieve the input value from a Bootstrap Form Input

When using a Bootstrap Form Input to allow the user to enter text, I am wondering how to save that text and use it as a parameter in a function. Below is the HTML snippet I have: <!--Directory Input Form--> <div class="row"> <div class= ...

jqueryhtmlangularjstwitter-bootstrapangular

Why do React components require immutable props when values are passed by value regardless?

I am not deeply knowledgeable in JavaScript, so I have been experimenting with some code: var demo = 'test'; var obj = { x: 'abc' } function foo(str) { str += '_123'; ...

javascriptreactjsfunctional-programming

How can we bring in a function into a Vue component?

I'm currently facing an issue with importing a single function into my Vue component. To tackle this problem, I separated the function into its own js file: randomId.js: exports.randomId = () => //My function ... Within my Vue component, I attem ...

javascriptwebpackvue.jsecmascript-6

What is the process of converting exactPageList from any to any[] before assigning it to pagefield?

Encountering an issue with paging on my angular 7 app where I am unable to assign exactpagelist of any type to pagefield of type array. The problem seems to be occurring on the last line of the function totalNoOfPages at this point: this.pageField = this ...

javascripttypescriptangular7angular-directiveangular-components

Modifying the HTML attribute value (of input) does not impact the value property

After inputting a single tag, I ran the following code in my Chrome console: https://i.stack.imgur.com/ySErA.jpg The result was unexpected for me. According to what I have read in a book, when I change an HTML attribute, the corresponding property should ...

javascripthtmlgoogle-chromeattributes

The error message "bind this is not defined in react" is displayed when attempting to read

Is it necessary to use bind in the constructor if you already have bind(this) in JSX? render(){ return( <input onChange={this.myFunc.bind(this)} type="text"/> ) } myFunc(){ alert('should trigger'); } I encountered an erro ...

javascriptreactjs

Learn the process of creating various themes with Tailwind CSS

When exploring Tailwind CSS, it appears that specific colors need to be specified in classes like this: <div class="bg-yellow-200 dark:bg-gray-800"></div> However, I am interested in offering 10 different themes for users to choose f ...

htmlcsstailwind-css

Pass the name and value of the selected option to AJAX

My goal is to use AJAX to send both the name and value of a selected option from a dropdown menu. This will allow me to launch a SQL request including the selected option. This is what I have so far: jQuery: $('#form_stadt_kanton').select(func ...

jqueryajaxselect

Processing data from a Buffer object using the .map() method and sending it as props to a component

As I work on my application, I encounter a challenge when dealing with a Buffer object that contains data from a file. My intention is to render the component Bar for each byte in this buffer and pass the byte as a prop. However, I am facing an issue with ...

javascriptnode.jsreactjs

What could be the reason for the dropdown-item not being displayed?

I've encountered an issue with my navigation bar while using Bootstrap 5. The dropdown item (Login) for the user icon is not appearing as expected. Below is the code snippet in question: <button class="btn dropdown-toggle" type="butt ...

htmldropdownbootstrap-5

The MomentJS difference calculation is incorporating an additional hour

I am currently working on a project that involves time calculations. const currentCETTime = moment.tz('2020-03-18 15:58:38', 'Europe/Madrid'); const limitCETTime = moment.tz('2020-03-18 18:00:00', 'Europe/Madrid') ...

javascriptmomentjsmoment-timezone

Eliminating data from selection options on a HTML menu list

Currently, I am facing an issue while attempting to incorporate a menu bar into my HTML page. After adding the icons, they are displaying with both underlines and dots at the back. I have tried using text-decoration=none; to remove the underline, but unf ...

htmlcssmenunavigation