How to get dynamically generated text after page loads? (jQuery)

Question

so my jQuery loads a page that contains some Mako code which loads in content that Python spits out.

My problem is that I need to capture the text that gets generated by the Mako code into a jQuery variable, however nothing gets captured in the jQuery until the page is fully loaded.

How would you code in jQuery to do something or wait until the page is fully loaded? I tried using the $('#inbox_conversation').html() inside of $(document).ready(function () { however it just returns undefined.

Mako template code

<p id="inbox_conversation">
    %if inbox_details.body:
        ${inbox_details.body}
    %endif
</p>

jQuery: in Main Class

var navigateToInboxDetails = function(messageID) {
    WHOAT.networking.redirectToURL("#!"+inboxDetailsURL(messageID));
};

var combined_message = $('#inbox_conversation').html();
alert('combined_message = '+combined_message);
// ^ Returns nothing because it runs before HTML is loaded

jQuery: in Networking Class

//redirect to another page... as the name suggests
var redirectToURL = function (url) {
    window.location = url;
};

---

The Ajax flow:

The code that is in the jQuery: in Main Class and jQuery: in Networking Class sections gets activated after the this ajax

In my wireInbox function:

var loadInbox = function() {
    loadResource(inboxURL(), null, function() {
        wireInbox();
        wireTableHighlighting();
    });
};

The loadResource function

var loadResource = function(url, params, callback) {
    WHOAT.networking.getToServerWithAjax(url, params, function (response) {
        //var $content = $($.parseHTML(response.trim()));
        var $content = $($.parseHTML($.trim(response)));
        var $container = $('#dashboard-display');
        var $content_to_hide = $container.children();

        $.when($content_to_hide.fadeOut('fast')).then(function () {
            $content.hide();
            $container.append($content);

            $content.fadeIn('fast', function(){
                $content_to_hide.remove();

                if(callback) {
                    callback();
                }
            });
        });
    });

Note: If I place $('#inbox_conversation').html(); on a button action, then it will alert me with the content I'm needing to get. So I know the issue is that my it's a page hasn't finish rendering issue.

What I'm attempting to do is get the text from inside the P tag, then split it and put part of it into another div. How would you accomplish this?

Answer 1

Make sure jQuery is loaded after the relevant HTML you want to update:

<p id="inbox_conversation">
    %if inbox_details.body:
        ${inbox_details.body}
    %endif
</p>
...
<script type='text/javascript' src='PATH_TO_JQUERY'></script>

Answer 2

You just can't get data from a page until it is loaded.

$(document).ready(function () {
    var combined_message = $('#inbox_conversation').html();
    alert('combined_message = '+combined_message);
});

Your attempt to put $('#inbox_conversation').html() inside of $(document).ready(function () { }); failed, because it was called asynchronously, i.e. sometime in the future. So it can't return anything useful. You need to wait until your page is loaded and then manipulate it. What you were trying to do is basically to travel back in time. You first tried to execute alert(value) and only after that you actually loaded value.