Показать файл по нажатию кнопки без отправки страницы - PullRequest
Новая
       13

Показать файл по нажатию кнопки без отправки страницы

0 голосов
/ 24 августа 2018

У меня есть большое количество файлов, которые мне нужно отобразить относительно видимого div. В основном у меня есть div в следующем формате, который появляется в выпадающем списке. 

<code><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"))."
"; echo $ content;?>

Поэтому мне нужно отобразить файл, соответствующий отображаемому div.

Проблема с этим кодом заключается в том, что все файлы загружаются при загрузке страницы, поэтому, когда количество файлов увеличивается в числе, страница становится медленнее.

Итак, чтобы решить эту проблему, я хочу загрузить содержимое нажатием кнопки в этом разделе.

Я новичок в этом, пожалуйста, помогите.

Или же я даже могу получить данные из сети, используя следующую команду оболочки 

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)

Так что я не знаю, как выполнить сценарий без загрузки полной страницы, а также как отобразить содержимое в том же элементе div вместо кнопки.

Ответы [ 2 ]

0 голосов
/ 25 августа 2018

Спасибо, Гари,

Да, это сработало, когда я разместил кнопку за пределами 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>

Единственная проблема, с которой я сталкиваюсь - все данные поступают в одну строку. это оригинальный файл

Вот как это выглядит

Любые предложения, чтобы сделать вкладки и новую строку видимыми или для стилизации отображаемых данных.

0 голосов
/ 24 августа 2018

Загрузка контента на лету - идеальный сценарий для JavaScript.Мы будем использовать новый Fetch API для динамического получения содержимого файла и добавления его в поле. 

<!-- 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>
...