Modify div after it's created

Question

I've a php page with a menu.

One of the items of the menu, invokes another php, which returns a div element filled with data, that is inserted into the former page (that the user is already seeing).

I'm trying to modify this div content using JavaScript, after loading it. However, I can't achieve it.

I've tried using ready() method, but since it happens at a random time after loading it, this method doesn't work.

I've also tried with a load() method I found which seemed to trigger after the item is loaded completely, but I didn't complete it neither. This was something like:

$( "#overlay #overlay_text div #panes div #tableInOverlay" ).load(function() {

  alert("The table has been loaded");  

});

How can I achieve it?

Thank you in advance

Edit: in order to try to make it clear

User access to the web page (File 1) -> User clicks in (File 1) Menu -> File 2 is invoked, which creates a response with a div element -> (File 1) gets the response, and insert it into the HTML code, so the new div is shown.

Then, at this moment, I need (File 1) to modify this div that it just received.

You mean you want to run your script exactly after the div element is created? Dom ready is too slow for you? — Ortiga, Sep 18 '15 at 19:46
The problem is, that `div` is being received after click in one link in the menu, so another php file is generating it. I need to modify my first file in order to modify this div after it's received, whatever the time is, not when my first file was loaded. — Btc Sources, Sep 18 '15 at 19:50
@BtcSources Ok, now I understand it. How is file 2 loaded, exactly? — Ortiga, Sep 18 '15 at 19:58
@Andre file 2 is just another php file that generates a html snippet, which is sent back to file 1. It's called using AJAX I think, but not sure cause I didn't code this part. — Btc Sources, Sep 18 '15 at 20:04
@BtcSources You'll have to check how it's loaded and modify that... There is not an easier way AFAIK — Ortiga, Sep 18 '15 at 20:11
Put the modification code right after the code that inserts the HTML. — Barmar, Sep 18 '15 at 20:11
I can't @Barmar because this code isn't done by me, and I can't access to modify this files. — Btc Sources, Sep 18 '15 at 20:17

score 1 · Answer 1 · answered Sep 18 '15 at 20:10

1

There is no html event that is triggered when elements are inserted, modified or removed.

Possible solutions:

1- Trigger an even yourself in the callback:

$('#myDiv').load('url', function(){
    $('#myDiv').trigger('foohappened')
});

$('#myDiv').on('foohappened', function(){
    // modify content
});

NOTE: myDiv is an element on the page, not the one that loads via ajax

2- Change the data before inserting

$.ajax({
    success: function(data){
        var loadedElement = $.parseHTML(data);
        var modifiedContent = modifyContent(loadedElements);
        $('#myDiv').insert(modifiedContent);
    }
})

answered Sep 18 '15 at 20:10

Ortiga

8,455
5
42
71

The second option seem a possibility for my case. I'll keep trying, upvote! – Btc Sources Sep 18 '15 at 20:23
What about mutation observers? Hmm? – May 01 '17 at 22:49
@3.1415926535897932384626433833 mutation observers was unusable at the time I wrote this question, and it's proposal probably unknown to me too, otherwise I would have mentioned it as a future feature. If you do know how to use mutation observers, feel free to edit my answer. – Ortiga May 15 '17 at 19:14

score 0 · Answer 2 · answered Sep 18 '15 at 20:15

0

Can you try this?

$(window).load( function() {
    // YOUR CODE HERE
});

also, if you know the amount of the delay, you could postpone your function using setTimeout()

answered Sep 18 '15 at 20:15

GrafiCode

3,307
3
26
31

If I puts this with an `alert()`, the message is shown after click in the menu link, but then the div is never shown and instead of it it seems to return to the main webpage of the web-app. – Btc Sources Sep 18 '15 at 20:20

Modify div after it's created

2 Answers2