Question

I am getting document.getElementById("#toHide") is null. How can solve this? how to convert this statement to jquery?

html:

<form wicket:id="safeForm" class="clearfix" />
<div id="toHide" class="pb-text-align-center">
<img id="loadingImg" src="my image location" style="margin-left: auto; margin-right: auto;"/>
</div>  

Java code creating JavaScript code in string buffer:

if(flag == false){
    flag = true;
    buffer.append("$('#toHide').doTimeout(1000, ");
    buffer.append("function() { ");
    buffer.append("$('#").append(component.getMarkupId()).append("').submit(");     
    buffer.append(");");
    buffer.append("$('#toHide').html('<img id=\"loadingImg\" src=\"../../img/load.gif\" style=\"margin-left: auto; margin-right: auto;\"/>'); ");
    buffer.append("});\n");
    }
    else{
       buffer.append("\n document.getElementById(\'#toHide\').style.display='none';\n");    
    }
    buffer.append("</script>");

2) i have declared flag=false at the global level. i am verifying for the first time for flag and allowing to enter if block shown above. But after this, image still display in next page. why? what changes i need to make?

Answer 1

For jQuery, try:

buffer.append("\n $(\'#toHide\').hide();\n");

instead of

buffer.append("\n document.getElementById(\'#toHide\').style.display='none';\n");