仅使用 static 文件加载页面的特定部分

Question

I am trying to make a single app website. Each page on the site includes the header which contains the static files that are reused over and over throughout the site like jQuery for example. When a user goes on the main page for example, all static files are loaded for the site and for that specific page. Let's say the user wants to go to a new link. What I'd like to do is update the content of that page without loading the full page (again this next page will contain the header, which is already loaded). An example sketch looks like this:

{% extends 'core/base.html' %}  //This is the header file (contains base static files)
{% block styles %}
    {% load static %}
    <link href="{% static 'core/profile.css' %}?v1" rel="stylesheet" type="text/css">
{% endblock %}

{% block content %}
..actual content...
{% endblock %}
  <script>
     ...inline javascript specific to page only...
  </script>

I'd like to load the actual content. I can do that by just finding the class within this HTML page and appending it to the current page. However, the static for that specific page won't get loaded. That is my current problem right now. How do I get the static files loaded along with portion that I want loaded? How do I also load the specific JavaScript specific to that page only (Script tags at the bottom).

My current solution is just creating a new page and removing the {% extends 'core/base.html' %} , but this defeats the purpose of doing things only once. I don't want to update 2 pages each time there's an update. Is there a better way to do what I'm trying to achieve?

Answer 1

you need to have 1 global js file and then update html elements with id or class name like other js library... try onload="myFunction()"