Trying to reload DIV content after class change

Question

I am trying to create a script that when a button is clicked it changes the class of a DIV and then reloads the content of that DIV.

So far I have created a script that successfully changes the class of the DIV.

document.addEventListener("DOMContentLoaded", function (event) {
  jQuery("#button").click(function () {
    document.getElementById("id").className = "newClass";
  });
});

but I still need it to reload the content of the DIV with the new class. I have looked around for a solution and found the following code that I have tried to add:

$("#id").load(window.location.href + " #id");

But gives me the following error:

(index):470 Uncaught TypeError: $ is not a function

What am I doing wrong here?

`jQuery("#id").load(window.location.href + " #id");` https://stackoverflow.com/questions/10787342/why-does-jquery-have-dollar-signs-everywhere — GrafiCode, Feb 15 '22 at 18:31
`document.addEventListener("DOMContentLoaded", function (event) {` why? Simply place your ` — Roko C. Buljan, Feb 15 '22 at 18:45
I don't understand what have in common a code that changes some class - with you trying to load some external content into a DIV wrapper?! Any why would you want to listen to a class-change (which BTW is possible!) to perform some actions? What are you actually trying to achieve? — Roko C. Buljan, Feb 15 '22 at 18:50
`$ is not a function` just means that you used the jQuery's alias `$` somewhere in your code (unrelated to your question BTW) - without making sure jQuery is loaded first. https://stackoverflow.com/a/18295564/383904 — Roko C. Buljan, Feb 15 '22 at 18:53
What is the content of the div? You're trying to reload the entire window which is not what you want. — Nathaniel Flick, Feb 15 '22 at 19:04

Roko C. Buljan · Accepted Answer · 2022-02-15T19:13:03.120

1

In plain jQuery you would use:

jQuery(function($) { // DOM is now ready and jQuery's $ alias sandboxed

    $("#button").on("click", function () {
        $("#id")
          .addClass("newClass")
          .load(window.location.href + " #id");
    });

});

but I'm not sure why would you use the same location.href - and how is that correlated to any "content refreshing".
Also, by doing the above you'll get yourself duplicated #id elements, one inside the other:

_{Initial state:}

<div id="id">Test test test</div>

_{After clicking the "Button" one or more times:}

<div id="id" class="newClass">
  <div id="id">Test test test</div>
</div>

which is clearly not something you'd want.

edited Feb 15 '22 at 19:13

answered Feb 15 '22 at 18:56

Roko C. Buljan

196,159
39
305
313

Thank you very much for the help. I edited it a bit and used .load(location.href+" #newClass>*",""); to remove the other DIV. The code works but I can see that my idea is wrong. So I have a javascript chart that gets loaded on a specific DIV id, and I want to show another chart when the ID changes on button click. What would be the best approach here? – Frederik Feb 15 '22 at 19:42
Simply `$someDiv.empty()` from existing content and than initialize your Chart JS script inside it `$someDiv.someSpecificChartPlugin({options.......})` If you had some other plugins attached such a plugin might most likely have a `.destroy()` method. – Roko C. Buljan Feb 15 '22 at 20:19
@Frederik see this example where the chart data changes dynamically: https://stackoverflow.com/questions/60244808/how-can-i-create-a-time-series-line-graph-in-chart-js - on the same Element, without the need to reload / refresh anything! – Roko C. Buljan Feb 15 '22 at 20:20

score 0 · Answer 2 · edited Feb 15 '22 at 19:03

At first you have to map jQuery to $ to use code like $("#id").load(window.location.href + " #id"); Otherwise you have to use jQuery("#id").load(window.location.href + " #id"), like you did in your example. This is done by:

jQuery(document).ready(function( $ ){       
    // your Code goes here  
});

You also used plain JavaScript and jQuery for the same purpose. document.getElementById("id") is equal to $('#id').

There can be many classnames, so a function or attribute .className can't make a sense. There is a list of classnames, and you you can add /remove them per .addClass() / removeClass() in jQuery or .classList.add() / classList.remove() in plain javaScript.

jQuery(document).ready(function( $ ) {
    
    $("#button").click(function () {
      $("#id")
         .addClass("newClass")
         .load(window.location.href + " #id");
  });
    
});

An load the content as Roko described.

Trying to reload DIV content after class change

2 Answers2