Django - Javascript : Как я могу динамически отобразить эти файлы в этом iframe

Я начинаю изучать Django Framework для своего проекта.

В настоящее время я пытаюсь заставить эту новую функцию работать. Я знаю, что мне нужно сделать, но не знаю, как это сделать.

Отображение изображения (src iframe пуст, поэтому сообщение об ошибке firefox

)

Я создаю для каждого элемента массива кнопку. Каждый из этих элементов имеет txt файл, который я хочу отобразить на этом iframe (ниже этих кнопок).

На этом изображении показаны, в данном случае, три кнопки (3 элемента в массиве). Я хочу сделать следующее: когда я нажму на одну из этих кнопок, она изменит src iframe в соответствии с текущим индексом массива (он будет указывать на src элемента). Затем он покажет содержимое txt файла в iframe.

JS:

function createHeader() {
let iframe = document.getElementById("iframe-overplot")
let buttons = document.querySelectorAll("div > div > div > button");
console.log(buttons);
for (let i = 0; i < spectra_list.length; i++) { // the array
    let button = document.createElement("button");
    button.innerText = " ";
    button.style.backgroundColor = colors[i];
    button.classList.add("h-10", "py-1", "text-xl", "text-gray-100", "font-medium", "transition-colors", "hover:text-gray-900", "focus:outline-none", "display:inline-block", "flex-row", "w-1/2");
    div_header.appendChild(button);
    button.addEventListener("click", function (){
        // change the iframe src to "i" index
    })

}

}

HTML:

<div class="relative w-1/2 flex flex-col mr-1 border border-gray-400" id="div_header_iframe">
        <div class="w-full flex flex-row" id = "div_header_buttons">
        </div>
        <iframe class ="h-full rounded-r bg-gray-50 flex-col" src = "..." id ="iframe_overplot"></iframe>
</div>

Я пытался сделать новый def в views.py:

def get_headers_spectrum(request):
spectra_list = SyntheticSpectra.objects.values('spec_type', 'collection', 'short_name').filter(
    calc_key__in=request.POST.getlist('spectra'))

   return '/' + 'pollux' + '/' + spectra_list.spec_type + '/'+ get_spectra_list.collection + '/' + 'FlatTable' + '/' + spectra_list.shortname + '.txt'

Я добавил его в urls.py:

path('my-spectra/overplot/get_headers_spectrum', views.get_headers_spectrum, name='get_headers_spectrum'),

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

Вернуться на верх