• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 226
  • Last Modified:

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.
0
mike99c
Asked:
mike99c
  • 5
  • 4
  • 3
  • +1
2 Solutions
 
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
 
Chris StanyonCommented:
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
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
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 StanyonCommented:
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 StanyonCommented:
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 StanyonCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

  • 5
  • 4
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now