jquery document ready return null but the console are able to get value

Question

I'm working in a solution inside a CMS (EPiServer).

If I use the console.log to check my object I get a null value.

$(document).ready(function () {
    console.log("$('.EPiRequester').html() =" + $('.EPiRequester').html());
}); 

(function myLoop(i) {
      setTimeout(function () {
        console.log(i + $('.EPiRequester').html());
          if (--i) myLoop(i); 
      }, 3000)
})(10);

10 times return null as well.

but if I right in the console to check, the html() method return a value.

$('.EPiRequester').html()
"EPi Requester"

any idea about this problem?

can you show html and if possible fiddle demostrating problem — Ehsan Sajjad, Aug 05 '14 at 07:27
In your first code you have wrapped with ready handler and that's consoling null (I suppose from somewhere the html is being empty by js) and in your second code, the code is outside the ready handler so it's showing you the html value as before the html is ready. — Bhojendra Rauniyar, Aug 05 '14 at 07:28

score 1 · Answer 1 · answered Aug 05 '14 at 07:27

...I get a null value...

Neither $() nor html() ever returns null. I assume you mean either that $('.EPiRequester') returns an empty jQuery object, or that $('.EPiRequester').html() returns undefined (as opposed to "").

html() will only return undefined if you call it on an empty jQuery set. So this tells us that the .EPiRequester element is added to the page dynamically by the CMS sometime after the jQuery ready event fires. It may even be triggered by ready (e.g., the CMS code waiting for ready before doing some ajax call to fill in something that doesn't have to be delivered with the main page content).

Ideally, the CMS should give you some other event you can respond to when all the content is there. If not, and this is very much a second-class option, you can use a repeated setTimeout to deal with it:

$(document).ready(useEPiRequester); 
function useEPiRequester() {
    var elm = $('.EPiRequester');
    if (elm[0]) {
        // It's there now, use it...
    } else {
        // Not there yet, wait a bit longer
        setTimeout(useEPiRequester, 50);
    }
}

Thank you for your help, but this code are in infinite loop. — AFetter, Aug 05 '14 at 07:44
@AFetter: Then the element never exists. If that's a possibility, you can easily add a counter. — T.J. Crowder, Aug 05 '14 at 08:13

score 0 · Accepted Answer · edited May 01 '16 at 18:56

To fix this issue, I changed my method to open the Dialog box. Opening a Dialog with a Iframe I'm able to run all javascript and jQuery.

I didn't understand what was the problem.

function openModalFromIframe(that) {
    require(["epi/shell/widget/dialog/Dialog"], function (Dialog) {

        var url = $(that).attr('data-iframe-url');
        var title = $(that).attr('data-title');

        var dialog = new Dialog({
            Title: title,
            loadingMessage: "Loading...",
            defaultActionsVisible: false,
            preventCache: true,
            style: "width: 800px; ",
        });
        dialog.attr("content", '<iframe src="' + url + '" style=" width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden;"></iframe>');
        dialog.show();
    });
}

If someone get the same issue here are my workaround.

jquery document ready return null but the console are able to get value

2 Answers2