Question 30580 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Trying to reload DIV content after class change – WordPress

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search