How do you remove a class from an AJAX loaded DIV?

mike99c
mike99c used Ask the Experts™
on
I am trying to remove a class from a DIV section loaded using AJAX but it does not seem to work.

Normally I would do this:

$("#MyLoadedDIV").removeClass("module-expand");

I also tried doing this:

$(document).on("load", "#MyLoadedDIV", function() {
  $(this).removeClass("module-expand");
});

The event has to be when the DIV section is loaded.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
F P
Top Expert 2015

Commented:
You can throw a delay in there and run it after it's been loaded, or put a trigger on the element that's loading it to hook in the removal of the class once it appears. Usually, having an active monitor is a bit much, but also having ajax parse the return of the div being added and removing it with a regex might work too
Top Expert 2015
Commented:
You might also try,

window.onload = function() {
  var MyLoadedDIV = $('#MyLoadedDIV');
  MyLoadedDIV.removeClass("module-expand");
};

Open in new window

Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
If you want to run some code after an AJAX event, then just use the .done() method.

$.ajax({
   // your AJAX settings
})
.done(function(data) {
   // AJAX is completed, so do whatever you need in here.
   $('body').append(data);
   $('#MyLoadedDIV').removeClass('module-expand');
});

Open in new window

Exploring SQL Server 2016: Fundamentals

Learn the fundamentals of Microsoft SQL Server, a relational database management system that stores and retrieves data when requested by other software applications.

why is the server code adding a CLASS to the div, that should NOT be used, shouldn't you change the server code that sends back the <div> html string to ajax, to NOT ADD the unneeded class designation of 'module-expand' ?
F P
Top Expert 2015

Commented:
If you don't know the language on the back end, might I suggest(change the directory):

find dir/ -type f -exec grep -H 'module-expand' {} +

or

grep -R 'module-expand' dir/

make sure you have permissions, it's a *nix based system, and that you have the correct directory and it will tell you where in the backend the line of code which adds it exists. Most IDE's have a "find in path" option too.

Author

Commented:
Thanks for all your examples. I cannot get it to work so will be putting together a simple example.

I must stress that I am looking for a JQuery solution to remove the class once the section is loaded via AJAX. I know that I can do this server side but that is not the point of this post. It needs to be done in JQuery from the parent page.
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
I think an example would definitely help. It's not clear from your question exactly what you're loading with AJAX.

For example, does the #MyLoadedDIV element exist prior to the AJAX call, or is that being loaded as part of the call. Also, what data format are you returning from AJAX, and how are you injecting that into the DOM.

Author

Commented:
OK the #MyLoadedDIV does not exist prior to the AJAX call. It is all contained server side then is oaded using AJAX.
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
OK. Once you've pulled that data from the server side, what format is it in (HTML / JSON etc), and how do you then inject it into the DOM?

Author

Commented:
It is simple HTML as follows:

<div id="MyLoadedDIV" class="standard-form-module module-expand">

</div>

I am simply trying to remove the class "module-expand" using JQuery,

Yes I know it can simply be removed server side but for architectural reasons I don't want to go into I am unable to do this. It has to be done in JQuery from the page loading the DIV.

I am able to trigger on click and change events from loaded HTML so not sure why I can't simply remove a class.
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
It's usually straight forward enough. Do you want to post your jQuery script so we can see what's going on.

Author

Commented:
Yes I will try to cut it down to a bare minimum which is what I am doing now.

Author

Commented:
Ok I managed to cut the script down and it was in fact working. I went back to the original script and isolated where the problem was. I shall be splitting the points to both contributors.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial