Generate a division element that inherits the attributes specified by its unique identifier

I have a div element that dynamically fetches information (rss feeds) based on its id (id="rss-feeds") using the jQuery-rss plugin as shown below

jQuery(function($) {
    $("#rss-feeds").rss("http://feeds.feedburner.com/tar-home?format=xml", {
      limit: 1,
      effect: 'slideFastSynced'
    });
  });

I am attempting to create the div element through JQuery so that when a button is clicked, a new Div with the id="rss-feeds" is generated and automatically displays the characteristics of the original id along with its contents fetched from the plugin.

The corresponding HTML code looks like this

<button name="tech">Technology</button>

The JavaScript I am using is as follows

$(document).ready(function (){

    $("button[name='tech']").click(function(){

      var create = ('<div id="rss-feeds"></div>');
      $(this).after(create);
    });
});

Currently, a new Div gets created but it does not inherit the CSS styles associated with id="rss-feeds" nor does it display the fetched content. It appears invisible, although inspection reveals its presence.

How can I achieve the desired outcome in this scenario?

jqueryhtmlcssjquery-pluginsrss

Answer №1

It's important to remember that the rss function should be called after the rss div has been created.

function loadRssFeed(){
    $("#rss-feeds").rss("http://feeds.feedburner.com/tar-home?format=xml", {
      limit: 1,
      effect: 'slideFastSynced'
    });
}

$("button[name='tech']").click(function(){
    var rssDiv = ('<div id="rss-feeds"></div>');
    $(this).after(rssDiv);
    loadRssFeed();
});

Hopefully this explanation is helpful!

Answer №2

After creating the div, remember to call the rss() function.

Here is an example of how your click handler should be set up:

$(document).ready(function (){
   $("button[name='tech']").click(function(){
      var newDiv = ('<div id="rss-feeds"></div>');

      $(newDiv).rss("http://feeds.feedburner.com/tar-home?format=xml", {
         limit: 1,
         effect: 'slideFastSynced'
      });

      $(this).after(newDiv);
    });
});

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

Scanner (IE5) impact on page load speeds

I have developed an MVC project which is designed as a single-page application (SPA) utilizing knockoutjs and sammy frameworks. The following script is placed in the head section of the page: <script> var startTime = (new Date()).getTime(); </ ...

javascriptjqueryasp.net-mvcknockout.js

Which HTML tag can prevent the number "1,008" from breaking onto a new line?

Currently, I am learning about HTML tables and working on creating a periodic table for my school project. I am facing some challenges with formatting the text. Ideally, I want the atomic number and mass to be displayed on the same line, with the atomic nu ...

htmlcss

Encountering an undefined error while attempting to retrieve an object from an array by index in Angular

Once the page is loaded, it retrieves data on countries from my rest api. When a user selects a country, it then loads the corresponding cities for that country. Everything is functioning properly up to this point, however, upon opening the page, the city ...

javascripthtmlangulartypescript

Fill in the form using JSON data by matching the names with their corresponding values

Here is how I am collecting and storing the data from my web form as JSON, utilizing the name attribute and values. What is the best way to populate the form again with the saved JSON data in the same structure using name and value? (context: I will keep ...

javascriptjqueryformsserialization

What is the procedure for closing a snackbar when the close button is clicked?

I am having trouble closing a snackbar when the close button is clicked. The snackbar should initially pop up on page load and only close when manually triggered. I have set the timeout to zero, but the snackbar does not close when the close button is clic ...

javascripthtmlvue.js

shading a cell when the mouse cursor passes over it

I am looking to make the table cells change background color when the mouse hovers over them. Below are the styles defined: .cells{ border-style:inset; border-width:1px; border-color:#06F; background-color:#D6D6D6; font-style: italic; ...

csshtml-tablestylesbackground-color

Extracting URLs using Selenium from specific cells within a table

While parsing a webpage table, I noticed that one of the columns contains a hyperlink. The structure of the table is as follows: <table id="GridView1"> <tbody> <tr> ... </tr> <tr> ...

pythonhtmlseleniumpandas

stop bootstrap collapse from re-activating when an item is clicked

I'm currently facing an issue with my sidebar that is implemented using bootstrap collapsible. The menus are all in tags, but the problem arises when I click on one of these tags - the page refreshes, re-animating the collapsible panel and creating a ...

javascripthtmljquerycssbootstrap-5

Yii2 ajax call not redirecting as expected

After clicking a button, I attempted to redirect the user but encountered an issue with the redirection not functioning properly. Below is my JavaScript code for handling the button click event. $('#MyButton').click(function() { $.ajax({ url ...

javascriptphpjqueryajaxyii2

Arrange the footers in the bootstrap card deck to be perfectly aligned at the top

Using bootstrap 4 to showcase cards has been successful, but there is an issue with footers that have varying content lengths. Instead of the footer adjusting its position based on the content, is there a way to keep the tops aligned while pushing the cont ...

htmlcssbootstrap-4flexboxbootstrap-cards

The name 'SafeUrl' cannot be located

I'm working on resolving the unsafe warning in the console by using the bypassSecurityTrustUrl method, but unfortunately, I keep encountering an error. user.component.ts import {Component,OnInit} from '@angular/core'; import { DomSanitizer ...

javascripthtmlangularionic2

Having trouble with the clear button for text input in Javascript when using Bootstrap and adding custom CSS. Any suggestions on how to fix

My code was working perfectly until I decided to add some CSS to it. You can view the code snippet by clicking on this link (I couldn't include it here due to issues with the code editor): View Gist code snippet here The code is based on Bootstrap. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Transmit a parameter from a JavaScript code to a Python script

I am using a python script to execute queries in an Oracle Database by passing arguments. prov.py #!/usr/local/bin/python2.7 import sys import argparse import cx_Oracle import json import cgi import cgitb cgitb.enable() lst_proveedores=[{}] conn_str = & ...

javascriptpythonhtmlajax

Separate the iframe sessions

I am working with 6 iframes from the same domain but with different URLs and subdirectories. Each iframe sets a cookie with the same name but a different value using the HTML header "set-cookie". To prevent interference between these cookies, I need to fin ...

javascripthtmliframe

Tips for aligning specific items to the right side of the navigation bar

I've been grappling with creating a navigation bar for a website, aiming to position 4 elements on the left side of the screen and 2 on the right. Despite knowing that there's likely a straightforward solution, I'm struggling to get the elem ...

htmlcss

What could be causing my table to malfunction in IE8?

Is it just me, or do my CSS tables not work on IE8? <div class="main-table"> <div class="row"> <a class="secondary-table" href="#"> <div class="secondary-row"> <div class="secondary-cell"> ...

htmlcssinternet-explorer-8

Child element with sticky positioning within a flexbox parent

How can I make my .sidebar flex element stay sticky while scrolling if using position: sticky; top: 0; doesn't seem to work? * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; } header { width: 100%; height: 10 ...

htmlcsssticky

Compel IE8 to clear cache

Here are some of the codes I have used to clear the cache: <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="cache-control" content="no-store" /> <meta h ...

c#jqueryasp.netinternet-explorer-8

Error message appears when attempting to display a variable in HTML without defining it

Python if($count == 1) { session_register("username"); $_SESSION['username'] = $username; header("location: ../home"); }else { $error = "Your Login Name or Password is invalid"; } CSS -- line 43 <?php echo "<p cl ...

phphtmlmysqlecho

Adding some extra space inside a flex container using Bootstrap's padding

When attempting to use padding within a d-flex container to separate elements that are placed inline due to the d-flex class, I encountered an issue where the padding was not being applied and did not change anything. If I do not utilize the d-flex class, ...

htmlcsstwitter-bootstrapflexbox