Header and Footer Disappear

Dave.D.109

I'm using a javascript file that searches a .csv on an HTML page. As soon as the javascript is used the page header disappears and a white block appears in the footer. Any ideas how to prevent this from happening?

Miguel.S.245

Hi Dave!

It sounds like the JavaScript file you’re using is causing some unintended side effects on your HTML page. Here are a few suggestions that might help:

1. Check for Conflicts: Ensure that the JavaScript file isn’t conflicting with any other scripts or CSS on your page. It’s possible that the script could be altering the DOM in a way that affects your header and footer.
2. Inspect the Elements: Use the browser’s developer tools to inspect the header and footer elements when the issue occurs. This can help you identify any changes being made by the JavaScript file.
3. Review the JavaScript File: Look through the JavaScript file for any code that could be causing these issues. For example, look for any functions that are manipulating the DOM, altering styles, or hiding elements.
4. Try Isolation: Try running the JavaScript file on a simple HTML page with just a header and footer to see if the issue persists. This can help you determine if the issue is with the JavaScript file itself or if it’s a conflict with something else on your original page.

Remember, without seeing the actual JavaScript file or the HTML page, it’s difficult to provide a definitive solution. The suggestions above should help guide your troubleshooting process.

If you can provide more details or share the code, I might be able to provide more specific advice.

Dave.D.109

sample1.csv.txt

search-course.html.txt

papaparse.min.js.txt

Hi Miguel, thanks for your response. Here are the files I'm using and a screenshot.

Miguel.S.245

Based on the HTML file you provided and the image of the issue, it seems like the JavaScript file is interacting with the DOM in a way that’s causing the header to disappear and a white block to appear at the bottom of the page. Here are some potential causes and solutions:

1. CSS Styles: The CSS styles defined in the HTML file might conflict with the styles of the header and footer on your Brightspace page. You could try removing or commenting out the CSS in this file to see if the issue persists.
2. DOM Manipulation: The JavaScript code in this file manipulates the DOM to display the search results. If there’s an error in this code, it could potentially cause issues with other elements on the page. You could try commenting out sections of the JavaScript code to see if the issue persists.
3. Script Loading Order: The order in which scripts are loaded can sometimes cause issues. If there are other scripts running on your Brightspace page, they might be interfering with the script in this file. You could try changing the order in which your scripts are loaded.
4. External Resources: The script in this file fetches a CSV file from an external URL. If there’s an issue with this resource (e.g., it’s not available, or there’s an error in the CSV data), it could potentially cause issues with the script.
5. Event Handlers: The script adds an event listener to an input field. If there’s an issue with this event handler (e.g., it’s not defined correctly, or it’s conflicting with another event handler), it could potentially cause issues.

Remember, these are just suggestions based on the information available. For a more accurate solution and a more in-depth investigation, you can also open a support ticket. It would be helpful to have more context, such as any error messages displayed in the browser console or a description of the exact behaviour of the issue.

I hope this helps! Let me know if you have any other questions.