Loading views with JavaScript

Using Django Templates & Frontend
1

Hi, folks. I hope you’re all enjoying your weekend as best as possible.
I have a content submission form that I’m trying to build preview functionality for.
I don’t want to involve the server or database for this, but that’s probably irrelevant for this task here.

I’ve created the url → 

urlpatterns = [
    path('', views.index, name='index'),
    path('search/', views.search, name='search'),
    path('category/<str:category_name>/', views.category, name='category'),
    path('contribute/', views.contribute, name='contribute'),
    path('contribute/preview/', views.preview, name='preview'),
]

I’ve created the view → 

def contribute(request):
    template = 'searchnet/contribute.html'
    context = {
        "categories": CATEGORIES,
        "tags": TAGS,
    }
    
    return render(request, template, context)

def preview(request):
    template = 'searchnet/preview.html'
    context = {}
    return render(request, template, context)

The preview buttons html from contribute.html template is → 

<input class="btn btn-outline my-2 button" type="button" name="preview" id="preview-button" data-bs-toggle="tooltip" title="View how your contetn will appear" data-bs-html="true" value="Preview" onclick="preview_submission()">

and finally the js function →
(I’ve tried many permutations of url strings here, not just the one you see here.)

function preview_submission(){
    window.open("../{appname}/preview.html");
}

window.open("./preview/");

window.open("contribute/preview/");

This function is not internally on within script tags in the contribute.html file
I use vendor/app.js model and they are both located in static/{app_name}/js

The other caveat is that I want this to open in a new window. Obviously from the js function.

How do I load django views with javascript? I’ve not found anything in research that has worked.
I can’t load static files in js files. This isn’t an internal script on an html file where I could use the url tag.

the Page not found error even says it searched in the contribute/ path, but I’m still not gettting it right

So what is the best protocol for doing this? Thank you

2

So I’ve figured out a solution to this and figured I’d share it.
Like I said before, I use the vendor.js/app.js model when I js.
When I made the OP they were called from the contribute.html file. Since then I took out the vendor.js file and defined the js variables before the app.js call from contribute.html like this → 

{% comment %} <script src="{% static 'searchnet/js/vendor.js' %}" defer></script> {% endcomment %}
    <script>
        const title = document.querySelector("#title");
        const output = document.getElementById('output_image');
        const preview_button = document.getElementById('preview-button');
        const preview_page = "{% url 'searchnet:preview' %}";
    </script>
    <script src="{% static 'searchnet/js/app.js' %}" defer></script>

This allowed me to use the url tag to define the preview page. From app.js it was simply → 

//display preview of submission
function preview_submission(){
    window.open(preview_page);
}

Hope someone else can find this useful. I’d still be interested in reading other methods of doing this, and maybe some pro and cons of this method compared to others if someone felt the urge.
Great weekend, all