How to hide "No records found" and Header

[SunakoChan]

Hi - I want to hide the message 'No record found ' and the header of the DataPage.

[telly]

Hi ,

You want to hide the "no records found" message and also the header of the Page.
To achieve this we need to add custom code, below is the other workaround to hide the message and header:

To hide the header, follow the following steps:

1) Edit Localization, customize the HTML text in the Custom Text by adding div tag:<div id="norecord"><h1>No records found.</h1></div>
2) Edit DataPage. Go to the 'Configure Results Page Fields'. Insert Header&Footer.
3) Paste the code in the 'Header' field: <span id="HideHeader"><h1>Text</h1></span> Enter your header text instead of Text.
4) Paste the code in the 'Footer' field:
<script>function func_NoRec_Header()
{
if (document.getElementById("norecord"))
document.getElementById("HideHeader").style.display = "none";
}
window.onload=func_NoRec_Header;
</script>

To Hide the message, follow the following step: Go to the Header and paste this code: <style>#norecord{Display:None!important}</style>(For reference you may check this link:https://c0acs764.caspio.com/dp/ba4a60009a119570a12e4c478dc4/files/3879089).

For reference you may check these link:
- https://forums.caspio.com/topic/3282-hiding-the-header/
- https://howto.caspio.com/faq/map-mashup/how-to-hide-the-map-if-no-records-found-on-the-result-page/
 

[JayDub]

Hi - I tried this method to hide a couple of buttons I had placed in the footer and it worked wonderfully if there were no records initially displayed in the DataForm. However, if a user adds a record (which then displays the footer with the buttons successfully), then deletes that record, the buttons in the footer still remain showing. I'm guessing this is because the page is not doing a full refresh so the onload event of the window is not being called again? Is there a different event that this function could be attached to so that it will fire if a user deletes all records as well? Thanks.

[Alison]

Hi @JayDub,

There is a special event in Caspio that is used instead of windows.onload - it is called DataPageReady. More details can be found her:
https://howto.caspio.com/datapages/ajax-loading/

[JayDub]

Thank you, @Alison!

[JayDub]

I've tried to replace my previous function that was called by window.onload with the code below. I've placed the code in my form header. The HideFooter element that it references (to hide) is in the form footer and is a span that contains two buttons, that I only want to show when there are records in the form. I'm sure I'm doing something wrong as the buttons show no matter whether there are records or not. Any help is appreciated!

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
        if (event.detail.appKey == '--i put my form's app key here--') {
if (document.getElementById('norecord')){
document.getElementById('HideFooter').style.display = 'none';
}
}
}
</script>

 

[Vitalikssssss]

Hi @JayDub,

Do you have an element with ID "norecord" or you trying to reference the message of Caspio Form?

Do you see any errors in browser console?

Regards,

vitalikssssss

 

[JayDub]

Hi @Vitalikssssss,

I replaced error message 351 in my localization file for the form with:

<div id="norecord"><h3>Please add a student to continue.</h3></div>

I originally used the code higher in this thread in the window.onload event and it worked to hide the buttons when the form first loaded. But due to the Ajax functionality employed when records are deleted, it did not remove the buttons when all records were deleted. So at the suggestion of @Alison I changed the code to listen for the DataPageReady event of the specific form on my page but now it doesn't work at all, the buttons always show.

Thank you for the suggestion to use the Console in the browser. I wasn't familiar with how to use it, but I looked it up and when I did try it, it showed an error that there was a missing ) in my code. I went back to the original example here https://howto.caspio.com/datapages/ajax-loading/  and realized I was missing ); from the very end of my script. So the complete block should have been:

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
        if (event.detail.appKey == '--i put my form's app key here--') {
if (document.getElementById('norecord')){
document.getElementById('HideFooter').style.display = 'none';
}
}
}); //added right parentheses and semicolon here
</script>

It works like a charm now!