Is the "content" of the jquery object set immediately upon creation?
Regarding another post: innerHTML jQuery html () does not work , I would like to ask if the content of the div that I link to the jQuery object is set immediately when the object is created.
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" doesn't seem to have access to the content of the div, but the jQuery object created in "handleOverlay" does.
I expected the "html ()" function of the jQuery object to validate the content in real time, and not - as it seems - get old information from the time it was created. So my question is:
Is the content of the div I am referencing to the jQuery object only set when the object is created?
source to share
This is because the $ searchResultComp variable 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 searches for all descendants of the jquery object that match the pattern you specified as the find condition and returns them as a new jquery object. If there are no descendants that match it, a jquery object with no content will be returned. You can check this by warning 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.
source to share
It depends on when you call the function init()
. For example, if you call it when the DOM is not ready yet, the selection is empty.
Therefore, whenever you use it $('#selector').find()
, it gives you a selection of items at that exact time. If you put this in yours handleOverlay()
, it should work.
Try to get used to jQuery event delegation and you won't have to deal with such things.
source to share