Question

In relation to another post: innerHTML works jQuery html() doesn't, I would like to ask if the content of a div that I reference by a jQuery object, is set immediately at creation of the object.

JSF page:

<!-- initialize script with the formId and the id of the input -->
<script type="text/javascript">
    $(document).ready(function(){
        mx.autocomp.overlay.init('formId', 'searchValue');
    });
</script>

<!-- input text that at "keyup" calls on sendRemoteCommand -->
<p:inputText
    id="searchValue"
    value="#{searchBean.searchValue}"
    onkeyup="sendRemoteCommand();" />

<!-- PrimeFaces remoteCommand that executes db search -->
<!-- and present result in "searchResult" div -->
<p:remoteCommand 
    name="sendRemoteCommand" 
    actionListener="#{searchBean.complete()}" 
    update="searchResult"
    oncomplete="mx.autocomp.overlay.handleOverlay();" />

<!-- PrimeFaces overlayPanel that is displayed if the search returned a result -->
<!-- i.e. the div "searchResult" has content ($searchResult.html() has content) -->
<p:overlayPanel 
    id="overlay" 
    widgetVar="overlayWid" 
    for="formId:searchValue" 
    showEvent="none">

    <h:panelGroup layout="block" id="searchResult">

        <!-- Content will be presented here after a p:remoteCommand is finished -->

    </h:panelGroup>

</p:overlayPanel>

As seen above, the script is initialized as soon as the page is ready.

Script (partial):

var formId;
var $searchValueComp;
var $searchResultComp;

function init(inFormId, inSearchValue){
    formId = inFormId;
    $searchValueComp = $("#"+inFormId).find("[id$="+inSearchValue+"]");
    $searchResultComp = $("#"+inFormId).find("[id$=searchResult]");
}

function handleOverlay(){
    var fn = window["overlayWid"];
    var result = document.getElementById($searchResultComp.attr("id")).innerHTML;

    if($searchValueComp.val().length==0){
        fn.hide();
    }

    // Test - This does not work as I get an empty alert
    alert($searchResultComp.html());

    // Test - This works.
    var $test = $("#"+formId).find("[id$=searchResult]");
    alert($test.html());

    // I need to check if the div: "searchResultComp" has any content. 
    // As I don't get $searchResultComp.html() to work, I'm forced to 
    // use the "getElementById" way instead. 
    if(result.length==0){
        fn.hide();
    }else{
        fn.show();
    }

}

As described above, the jQuery object in “init” seems to not have access to the content of the div, while the jQuery object created in “handleOverlay” does.

My expectation was that the “html()” function of the jQuery object would check the content in real time, not – as it seems – get old information from when it was created. Therefore my question:

Is the content of a div that I reference by a jQuery object set only at creation of the object?

Answer 1

This is because the variable $searchResultComp was set in the init function, the jquery object itself is dynamic, but not the result of a query using the jquery object.

The find() method looks for all descendants of the jquery object that match the pattern you have specified as the condition of find, and returns them as a new jquery object. If there are no descendants that match it will return a jquery object with no content. You can test this by alerting the length of the object, it should be zero.

So in the handleOverlay function you need to reset $searchResultComp to find all the descendants that now match your condition.