Conflicting scripts… probably

Question

On my website , there's a code that adds a couple of elements to the page. This code is not something that I can edit, and I'm not happy with where it puts these elements because it messes up some of my layout. So I came up with a little jQuery to move them into a more ideal location - I want them to be siblings of the element that the other code uses for their parents.

$('.mini-profile').after(function() {
    var $infection = [$(this).children('.infection_badge'), $(this).children('.infection_button')];
    return $infection;
});

And I have a working JSFiddle .

The problem is that this code doesn't work when I add it to the page. I thought that it might be running before the other script adds the elements so I tried calling it when the window was finished loading, but that didn't work and I'm not sure what else to try. Is there a way to get this working or am I going to have to come up with another way solve my layout problem?

Answer 1

UPDATE

Forget the rest of my answer (I will keep it because it can contain useful tips for other people) and modify your code to this:

$( '.mini-profile' ).after( function() { 
    return $( this ).find( '.infection_badge, .infection_button' ) ; 
});

---

I don't think they are "conflicting". That would happen is jQuery is clashing with other JS library. And, as you can read in jQuery's documentation:

The jQuery library and virtually all of its plugins are contained within the jQuery namespace. As a general rule, global objects are stored inside the jQuery namespace as well, so you shouldn't get a clash between jQuery and any other library... (read more)

If that is actually the problem (you will know it because no jQuery code will work), you can read the rest of that document to learn how to avoid running into conflicts.

But, most likely, jQuery works and your issue is that the external script didn't finish its job when you call your jQuery function.

If you can't edit the other script (and you are sure the jQuery library is properly referenced), you could try this workarounds:

1. Listen for the $(window).load() event:

   It will be executed later than $(document).ready() , when all the content has been loaded. So, if the other script use it, you can't modify its work with $(document).ready() :

    $(window).load( function() { $('.mini-profile').after(function() { return [$(this).children('.infection_badge'), $(this).children('.infection_button')]; }); }); 

2. Set a timeout:

   So you give time to the other code to be executed.

    $(document).ready(function() { setTimeout(function() { $('.mini-profile').after(function() { return [$(this).children('.infection_badge'), $(this).children('.infection_button')]; }); }, 1000); }); 

3. Use MutationObserver :

   As defined in MDN:

   MutationObserver provides developers a way to react to changes in a DOM

   So you could wait until the other script modifis that elements to make your own modifications.

4. CSS hacks:

   Sure it is messy, but maybe you can achieve the desired result using just CSS. For example, go to your fiddle, delete all the JS and add this CSS:

    .infection_button { float: left; margin-top: 10px; } 

   As you see it looks the same. I know that it will get more complicated in your actual layout, but still is something to try out when the rest is failing.

Hope it helps!