Combining multiple Quill editors in Angular and JavaScript: a comprehensive guide

I am interested in adding multiple Quill editors to a div using the append function.

My objective is to add the appropriate template when the post type is either 1 or 2, and then attach a Quill editor with the relevant content for each of these posts.

However, I'm struggling to figure out how to generate multiple Quill editors. Here is what I have tried:

    $http.post("/getwallpost", reqGetPost).then(function(response) {
         
        response.data.forEach(function(item) {

            if(item.type_id == 1) {
                var youp = "#" + item.id
                wallcontent.append("<div id='" + item.id + "'></div>");
                new Quill("#" + item.id, optionwall).setContents(JSON.parse(item.content));
                
            } else if(item.type_id == 2) {
                wallcontent.append('<div class="myArticles">This is article</div>');
            }
        });
       
    });

                                                                        
 <div id="wallcontent"> </div>

Answer №1

That's fine, it does the job.

I incorporated alphanumeric characters in the HTML id instead of just numbers to ensure uniqueness, like "#sqjdofjez" + item.id instead of just "#5".

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

Is it possible for OrbitControls to maintain rotation based on model origin even while panning?

Let me illustrate my question through an image: Shown here is the top view from the camera, with a grey cube representing a 3D model. The 'X' marks the center of rotation, while the arrow indicates the direction of rotation: Typically, when p ...

creating infowindows on the fly for numerous markers

I'm struggling to populate Google InfoWindows with dynamic content. My current approach involves loading 60 markers and attaching a click event handler to each one. Upon clicking a marker, I aim to retrieve the corresponding data from a fusion table b ...

Testing NodeJS Database Functionality using Mocha and Asserting with should.js

Currently, I am in the process of testing my NodeJS application using mocha and should. The issue I am facing is that while the first test executes smoothly, the second one fails with an error of null. Interestingly, both tests result in a valid user being ...

Generate a JSON line for each value in the ARRAY

Hello everyone, I'm currently working on implementing handlebars templating and to do so I need to generate a JSON from array values {"path":"Avions", "fileName":"AvionsEdit.vue"},{"path":"Avions", "fileName":"AvionsShow.vue"}etc... While I can cre ...

unable to add browse-sync to Ubuntu 16.04

I recently installed nodejs and npm and attempted to install browser-sync using the command npm install -g browser-sync. However, I encountered an error. npm install -g browser-sync npm ERR! Linux 4.15.0-101-generic npm ERR! argv "/usr/bin/nodejs" "/ ...

Tips for providing support to a website without an internet connection

I am in the process of creating a sales platform for a grocery store that utilizes PHP/MySQL. I have come across some websites that are able to fully reload and function even without internet access. For instance, when I initially visited abc.com, everyth ...

AngularJS - Update URL without refreshing the controller and maintaining scope state

Looking for some help with my AngularJS application. I have a list page with an add button that opens a pop-up window with a form. I want to change the URL when the pop-up appears, all within the same controller. Additionally, I need to add buttons and dis ...

Troubleshooting: Replacing onClick() in HTML with JavaScript when addEventListener is not functioning as expected

I've tested several solutions already, but unfortunately, none of them seem to work for me. My Flask application utilizes a combination of HTML and JavaScript to present a few web pages. At the moment, I still have some inline code (which is also pr ...

What is the most effective approach for managing nested callbacks in Node.js/Expressjs?

My server side coding is done using Node.js and Expressjs, with MongoDB as the backend. Although I am new to these technologies, I need to perform a list of actions based on requests. For example, in user management: Check if the user is already registe ...

A Sweet Alert to Deliver your Morning Toasty Message

I seem to be encountering an issue with my toast message. Instead of the toast popping up immediately after submitting the form, it keeps appearing even if I haven't submitted the form and even when navigating from another page to this one, the toast ...

Vuetify: Utilizing Time Range Inputs for Start and End Time

I am encountering some difficulty in identifying what I may have missed. I am dealing with 2 inputs: time, startTime, and endTime startTime <v-col cols="12" sm="6" md="2"> <v-menu ref="menu" ...

Issue with variable not being refreshed within requestJS's data event

I have been attempting to store the response from a URL in a variable for caching purposes and then send it upon subsequent requests. I am currently writing to the variable during the data event of the request. The variable does get updated, but I am encou ...

Tips for managing URL parameters in a search box

Could someone assist me in understanding how these codes will work? I am aware that they are not functioning codes. My main issue is figuring out how to pass the URL parameters for name and start date. I would like to create a search button where if you ty ...

Is it possible to utilize the everyone role in discord.js?

I'm currently working on integrating my lock and mute command with a per-server settings feature that I recently implemented using mongodb. My goal is to have the command retrieve the member's role from the database (roles.cache.get(guildProfile. ...

Differences between Vue.js onMounted and watching refsVue.js offers

When it comes to calling a function that requires an HTMLElement as an argument, the element in question is rendered within my page template and therefore I need to ensure it is actually in the DOM before making the call. Two potential methods for waiting ...

Retrieve JSON data within an HTML element, where the element is sourced from an AJAX GET response

What is the best way to extract JSON data from the response below? $.get('http://localhost:8000/json', function(response) { alert(response); }); The response is as follows: <div id="dom-target" style="display: none;"> {"logo":"log ...

What could be causing the useState function to not update the value?

I am experimenting with React.js but unfortunately, my desired functionality is not working as expected. Here is the code snippet I am currently working with: import React, { useState } from 'react'; function App() { const [count, setCount ...

Issues with maximum tag functionality in Angular's ng-tag-input feature

Is there a way to limit the number of tags that can be added using ng-tag-input and prevent new tags from being added once the limit is reached? <tags-input ng-model="searchTerm" display-property="Name" add-from-autocomplete-on ...

Use Javascript to set cookies and remember the show state when clicked

Can you offer some advice? I am looking to add cookies to my simple JavaScript code. Currently, the div is displayed when clicking on a link, but it hides again when the page reloads. I would like to implement cookies to remember the show state for 7 days. ...

Three.js: Buffer geometry does not provide any performance improvement

After examining the Three.js example found at webgl_performance, I decided to try improving performance by converting the model into a buffer geometry using the following code: var buffer = THREE.BufferGeometryUtils.fromGeometry( geometry ); Despite my e ...