I am trying to use fetch to load a partial view which includes several Quill containers. Using Fetch, the Quill editors are not rendered. There is no comparable problem using jQuery's load method.

The Fetch call looks something like the following, found with Google:

async function loadPartialView(url, container) {
    await fetch(url)
        .then(response => response.text())
        .then(html => {
            document.getElementById(container).innerHTML = html;
        })
        .catch(error => {
            console.error('Error fetching PartialView:', error);
        });
}

The code for the Quill editors is loaded from the partial view.

I am trying to use fetch to load a partial view which includes several Quill containers. Using Fetch, the Quill editors are not rendered. There is no comparable problem using jQuery's load method.

The Fetch call looks something like the following, found with Google:

async function loadPartialView(url, container) {
    await fetch(url)
        .then(response => response.text())
        .then(html => {
            document.getElementById(container).innerHTML = html;
        })
        .catch(error => {
            console.error('Error fetching PartialView:', error);
        });
}

The code for the Quill editors is loaded from the partial view.

• javascript
• fetch-api
• quill
• asp-mvc-partialview

1 Answer 1

You need to initialize the Quill containers in the fetch method after the PartialView is loaded into the DOM. With jQuery.load, I had been initializing Quill in the PartialView.

Google's AI Overview gave me the answer:

fetch('/your-partial-view-url')
      .then(response => response.text())
      .then(html => {
        document.getElementById('your-container').innerHTML = html;
        initializeQuill();
      })
      .catch(error => console.error('Error fetching partial view:', error));