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

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.
mike99cAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

F PCommented:
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
0
F PCommented:
You might also try,

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

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Chris StanyonWebDevCommented:
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

0
Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

Slick812Commented:
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' ?
0
F PCommented:
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.
0
mike99cAuthor 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.
0
Chris StanyonWebDevCommented:
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.
0
mike99cAuthor Commented:
OK the #MyLoadedDIV does not exist prior to the AJAX call. It is all contained server side then is oaded using AJAX.
0
Chris StanyonWebDevCommented:
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?
0
mike99cAuthor 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.
0
Chris StanyonWebDevCommented:
It's usually straight forward enough. Do you want to post your jQuery script so we can see what's going on.
0
mike99cAuthor Commented:
Yes I will try to cut it down to a bare minimum which is what I am doing now.
0
mike99cAuthor 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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.