"The application is experiencing issues with loading styles correctly when using jQuery append (Fiddler has been

When attempting to load a div tag using the .append() method, the styles are not loading correctly. Here's the code that was tested:

<section id="year-2020" class="tab-panel">
 <div class="row accordion">
                    <header>
                        <h3>2019 4th Quarter and Annual Results Conference Call</h3>
                        <p>February 27, 2020</p>
                    </header>
                    <ul>
                        <li>
                            <a href="http://services.choruscall.ca/links/husky20191202.html" target="_blank">
                                <strong>4th Quarter Conference Call</strong>
                            </a>
                        </li>

                        <li>
                            <a href="/downloads/InvestorRelations/2020/2020GuidanceChart.pdf" target="_blank"><strong>2020 Guidance Chart</strong> (PDF)</a>
                        </li>

                    </ul>
                </div>
  </section>

This code produces the following output: https://i.stack.imgur.com/7kMNB.png

When trying to add the same div through .append() like below:

 var el = $('  <div class="row accordion ui-accordion ui-widget ui-helper-reset"><header><h3>2019 4th Quarter and Annual Results Conference Call</h3><p>February 27, 2020</p></header><ul><li><a href="http://services.choruscall.ca/links/husky20191202.html" target="_blank">   <strong>4th Quarter Conference Call</strong></a></li><li><a href="/downloads/InvestorRelations/2020/2020GuidanceChart.pdf" target="_blank"><strong>2020 Guidance Chart</strong> (PDF)</a></li></ul></div>');
        $('#year-2020').append(el);

It resulted in the following output: https://i.stack.imgur.com/gJCEM.png

The + accordion is being removed. If both the html and jQuery code are the same, it should load the same as the html, but it's not happening. Please assist me in resolving this issue as I have been struggling for 2 days.

Thank you in advance.

P.S : I've tried without using var el=.. in jQuery

Here is the JSFiddle

jqueryhtmlcssappendstyles

Answer №1

Your markup had a few errors, and in order to fix it you should call 

$('#year-2020').append(el).accordion("refresh");
to refresh the accordion. Be sure to view the snippet for a demonstration of it working correctly. You can also toggle to full screen mode by clicking on the option in the top corner.

If you encounter any issues, feel free to drop me a message :)

 $(document).ready(function() {
 $('#year-2020').accordion({active: false,
collapsible: true});
   $('#click').click(function() {
   
     var el =`<header><h3>2019 4th Quarter and Annual Results Conference Call</h3><p>February 27, 2020</p></header><ul><li><a href="http://services.choruscall.ca/links/husky20191202.html" target="_blank">   <strong>4th Quarter Conference Call</strong></a></li><li><a href="/downloads/InvestorRelations/2020/2020GuidanceChart.pdf" target="_blank"><strong>2020 Guidance Chart</strong> (PDF)</a></li></ul>`;
     $('#year-2020').append(el).accordion("refresh"); 
   })
 })
<!doctype html>
<html>

<head>
    <link rel="stylesheet" href="https://huskyenergy.com/library/css/global.css">
    <link rel="stylesheet" href="https://huskyenergy.com/library/css/print.css" media="print">
    <link rel="stylesheet" href="https://huskyenergy.com/library/css/magnific-popup.css">
    <link rel="shortcut icon" href="https://huskyenergy.com/favicon.ico">
    <script src="https://huskyenergy.com/library/js/jquery.js"></script>
    <script src="https://huskyenergy.com/library/js/jquery-ui-custom.js"></script>
    <script src="https://huskyenergy.com/library/js/jquery.magnific-popup.js"></script>
    <script src="https://huskyenergy.com/library/js/utility.js"></script>
    <script src="https://huskyenergy.com/library/js/global.js"></script>
    <script src="https://huskyenergy.com/library/js/typeahead.bundle.min.js"></script>
    <title>Conference Calls &amp; Presentations - Husky Energy</title>
</head>

<body>
    <div class="content-width page-header-bar">
        <div class="page-header">
            <a href="default.asp">Investors</a> /
            <h1 class="current-page">Conference Calls &amp; Presentations</h1>
        </div>
    </div>
    <div class="content-width">
        <article class="article-width">
            <div class="tabs">
                <input type="button" value="Click" id="click" />
                <h3>
                    Click Here to Add one more Accordion!!!!!!!!
                </h3>
                <ul class="years">
                    <li><a href="#year-2020">2020</a></li>
                    <li><a href="#year-2019">2019</a></li>
                    <li><a href="#year-2018">2018</a></li>
                    <li><a href="#year-2017">2017</a></li>
                    <li><a href="#year-2016">2016</a></li>
                    <li><a href="#year-2015">2015</a></li>
                    <li><a href="#year-2014">2014</a></li>
                    <li><a href="#year-2013">2013</a></li>
                    <li><a href="#year-2012">2012</a></li>
                    <li><a href="#year-2011">2011</a></li>
                    <li><a href="#year-2010">2010</a></li>
                </ul>
                <section id="year-2020" class="tab-panel">
                        <header>
                            <h3>2019 4th Quarter and Annual Results Conference Call</h3>
                            <p>February 27, 2020</p>
                        </header>
                        <ul>
                            <li>
                                <a href="http://services.choruscall.ca/links/husky20191202.html" target="_blank">
                                    <strong>4th Quarter Conference Call</strong>
                                </a>
                            </li>
                            <li>
                                <a href="/downloads/InvestorRelations/2020/2020GuidanceChart.pdf"
                                    target="_blank"><strong>2020 Guidance Chart</strong> (PDF)</a>
                            </li>
                        </ul>
                </section>
            </div>
            <!--tabs --> <a href="https://cs.globenewswire.com/NewsArchive/View/32RYhiCdPkN2Sw1zwhvuZA==?iFrame=true"
                class="subscribe-enotify action-link" target="_blank">Subscribe to E-Notify</a>
        </article>
    </div>
</body>

</html>

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

Gather information from "div" tag with the class attribute using Python

I am looking to extract specific financial data (referred to as the Key data) that is housed within <div> </div> tags. I then aim to consolidate this extracted information into an excel sheet which already contains additional harvested data. Th ...

htmlpython-3.xbeautifulsoup

Tips for wrapping a div around its floated children

I'm currently developing a website for an online shopping cart and working on making the search results responsive. I am aiming to display as many items as possible across the screen (usually 3) when viewed on any device with a resolution lower than t ...

javascripthtmlcsse-commerce

Adding a div to the preceding div based on matching IDs in AngularJS

Here is a representation of my layout in HTML: <div ng-repeat="message in messages"> <div ng-class="{'messages messages--sent': userId == message.id, 'messages messages--received': userId != me ...

javascripthtmlcssangularjs

Retrieve the visible text content of an element by utilizing various ids

I am currently working on a project using AngularJS with multiple conditions all sharing the same id. My goal is to extract text only from the condition that evaluates to true. Recently, I discovered a major bug in an app that I am preparing for release. ...

javascriptjqueryangularjsionic-framework

Guide on sending the selected document through Kartik Input File using Ajax

I am looking to implement a drag and drop file upload feature using the Kartik Input File extension in my Yii2 application. I have read that this "drag and drop" input file model requires AJAX for sending the data. As a beginner programmer, I referred to t ...

phpjqueryajaxyii2kartik-v

What is the best way to utilize a color picker to apply CSS color to a parent element?

When the pencil glyphicon is clicked, a color picker appears. I only want to apply the selected color from the color picker to the list elements that are the grand parent of the pencil glyphicon. Here's a snippet of my Ruby front-end code: <% cat ...

javascriptjqueryhtmlcss

``There Seems to be an Issue with Loading Content in Tabs

Hey! I'm encountering an issue with my jquery tabs. The first tab content loads fine, but when I select another tab, the content doesn't display. Then, when I try to go back to the first tab, it doesn't load either. Here's the HTML cod ...

javascriptjqueryhtmlcssajax

Generating a JQuery mobile page on the fly using JSON data

Currently, I am working on developing a Jquery mobile app within cordova. My goal is to dynamically construct the entire page based on Remote Restful JSON results. Since the content of this page is not fixed and will change when the JSON data on the server ...

jquerycordovamobile

Spring load without CSS

Upon successful login, I am redirected to my main site using the following controller: //Login Success @GetMapping("/login-success") public ModelAndView loginSuccess() { return new ModelAndView("/cont/home.html"); } The URL for this redirection i ...

javahtmlcssspring

The margin-bottom attribute for the final element within a div does not cause the div to be "stretched."

Having a div with a background image containing an element with margin-bottom applied can cause a gap between that div and another one below it, also with a background image. This leads to the issue illustrated in this screenshot: Screenshot http://img40.i ...

htmlcssmargin

Using JavaFX to showcase FontAwesome icons

I've been working on a project to create a custom icon class that can load FontAwesome icons, but I'm facing issues with reading the fontawesome-webfont.ttf file. Here is the code for creating an icon: import javafx.scene.control.Label; import ...

javacssjavafxfont-awesome

How can you reposition a component within the dom using Angular?

Just started learning Angular, so I'm hoping this question is simple :) Without getting too specific with code, I could use some guidance to point me in the right direction. I'm currently developing a small shopping list application. The idea i ...

javascripthtmlangulartypescript

The div is not displaying the background image as intended

.cover-image { margin-bottom: 0px; height: 350px; color: white; text-shadow: black 0.3em 0.3em 0.3em; } <div class="cover-image" style="background: url('~/images/hdpic.jpg') no-repeat; background-size:cover"> </div> I&apo ...

htmlcss

executing a controller method in AngularJS

Looking to trigger a controller function from a directive tag. Check out this demo: https://jsfiddle.net/6qqfv61k/ When the 'Export to Excel' button is clicked, I need to call the dataToExport() function from appCtrl since the data is ready for ...

htmlangularjstwitter-bootstrap

Display a PHP warning message when attempting to add methods to ajax jQuery

Recently, I have delved into the world of ajax and jQuery while working on my final year project. However, I have encountered a problem when adding methods to my JavaScript code. Here is an excerpt from my ajax script: $(document).ready(function() { $ ...

phpjqueryhtmlajaxdebugging

Enhance the "content switcher" code

I have been working on improving my "contenthandler" function. It currently changes different articles when I click different buttons, which I am satisfied with. However, I believe there may be a better approach to this and would appreciate any advice on h ...

javascripthtml

The form submits automatically upon loading the page with empty input fields

I recently created a form on my website located at . Initially, the form functioned correctly and the PHP script executed as expected. However, I am now encountering an issue where every time I load the page, a popup message appears indicating that the for ...

javascriptphphtmlforms

Refinement of website footer alignment

As a web designer, I am experiencing difficulty in adjusting the footer on my website. I would like the footer to be fixed at a specific height and remain in the same position unless the content increases, in which case it should move down accordingly. Can ...

htmlcss

Having trouble applying CSS to SVG icons from defs file in Webkit Browser

I've been tinkering with a project that incorporates SVG icons, hoping to style them using CSS for various scenarios and hover effects. However, my attempts are falling short in Webkit, while Firefox is displaying the icons as intended: http://codepe ...

htmlcsssvg

What is the best way to customize the color of the border and icon in an outlined MaterialUI input field

I'm a newcomer to materialUI and I have a question regarding customizing an outlined input field with an icon. Due to my dark background, I need the icon, border, and text color to be lighter, such as grey. Can someone please advise on the materialUI ...

cssreactjsmaterial-ui