Display file on button click without submitting page

I have large number of files that I need to display with respect to visible div.
Basically I have divs in the following format which appears on a dropdown selection.

<div id="PRJNA252931" class="invisible" style="position: absolute; top: 60px; right: 50px; background-color: #f1f1f1; width: 480px; height:190px; padding: 10px; border: #0000cc 2px solid; border-radius: 5px; overflow:auto;">
<?php $file="PRJNA252931"; $content="<code><pre>".htmlspecialchars(file_get_contents("layout/files/Project_Detail/$file"))."</pre></code>";echo $content;?>
</div>


So I need to display the file corresponding to the div visible.

The problem with this code is all the files are loaded on page load, so when number of files increases in number page becomes slower.

So To resolve this I want to load the content on a button click in that div.

I am new to this, please help.

Or else I can even get data from web using the following shell command

for i in `esearch -db sra -query PRJNA252931 | efetch --format runinfo
|cut -d "," -f 1|tail -n +2`;do echo $i; efetch --format xml -id $i
-db sra |xtract -pattern SAMPLE_ATTRIBUTE -element TAG -element VALUE|sed 's/^/t/g'; done)


So I don't know how to execute the script without loading the full page and also how to display content in the same div replacing the button.

2 Answers
2

Loading content on-the-fly is the perfect scenario for JavaScript. We will use the new Fetch API to dynamically get the contents on the file, and add it into the box.

<!-- Display div -->
<div id="PRJNA252931" class="invisible" style="position: absolute; top: 60px; right: 50px; background-color: #f1f1f1; width: 480px; height:190px; padding: 10px; border: #0000cc 2px solid; border-radius: 5px; overflow:auto;">
<?php
$file = "PRJNA252931";

// Here we add a button that calls loadFile() when it is clicked, function parameters are the button element itself and the file URL we want to download
$content = "
<code>
<button onclick='loadFile($(this), "layout/files/Project_Detail/".$file."");'
</code>
";

echo $content;
?>
</div>

<!-- JavaScript -->
<script>
function loadFile(btn, file)

// Use Fetch API to get the file, then replace the button we click with the contents of that file
fetch(file).then((resp) => resp.text()).then(function(data)
btn.replaceWith(data);
);

</script>


Thanks Gary,

Yes this worked when I Placed the button outside of php.

<div id="PRJNA252931" class="inv" style="position: absolute; top: 60px; right: 50px; background-color: #f1f1f1; width: 480px; height:190px; padding: 10px; border: #0000cc 2px solid; border-radius: 5px; overflow:auto;">
<button type="button" name="PRJNA252931_btn" id="PRJNA252931_btn" onclick="loadFile(PRJNA252931_btn, 'layout/files/Project_Detail/PRJNA252931')">Load Detail</button>
</div>


The only problem I am facing is all the data is coming in one line.
this is the original file

This is how it is appearing

Any suggestions to make tabs and new line visible or for styling the data shown.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.