Django - reload only body page using block not refresh whole page

base.html

<body class="skin-red">
    <!-- Site wrapper -->
    <div class="wrapper">

        <!-- #HEADER -->
        {% include 'HEADER.html' %}
        <!-- /#HEADER -->

        <!-- #SIDEBAR -->
        {% include 'SIDEBAR.html' %}
        <!-- /#SIDEBAR -->

        <!-- #BODY -->
        {% block content %}
        {% endblock %}

        <!-- /#BODY -->

        <!-- #FOOTER -->
        {% include 'FOOTER.html' %}
        <!-- /#FOOTER -->


        {% block extrajavascript %}
        {% endblock %}

  </body>

HEADER.html:

  <header class="main-header">
    <a href="/rm" class="logo"><b>Resource</b> Monitor <i class="fa fa-bar-chart-o" style="color:#ffd400"></i></a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top" role="navigation">
        <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
        </a>

        <ul class="nav navbar-nav">
            <li><a href="/rm">Home <span class="sr-only">(current)</span></a></li>
            <li><a href="/rm/pcinfo"> PC information </a></li>
            <li><a data-toggle="tab" href="#tab_sysuse">??? ???</a></li>
            <li><a data-toggle="tab" href="#tab_procuse">???? ???</a></li>
            <li><a data-toggle="tab" href="#tab_prodet">???? ????</a></li>
            <li><a data-toggle="tab" href="#tab_sdwt">SDWT ????</a></li>
            <li><a data-toggle="tab" href="#tab_pcevents">??? ?? ??</a></li>
            <li><a data-toggle="tab" href="#tab_winevents">??? ?? ID? ??</a></li>
            <li><a data-toggle="tab" href="#tab_agentinfo">Agent ????</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Email ?? ?? <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a data-toggle="tab" href="#tab_emailconfigs">??? ??</a></li>
                    <li><a data-toggle="tab" href="#tab_emailreceiver">??? ??</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>

When I click header tab menu, I want to reload only {% block content %} {% endblock %} not whole pages.. but now It reloaded the whole page.. There are formbox in my side bar and there are some values which user input. so I don't want to loose my user input by refresh whole page. Is there any solution..?

Solution

You need javascript AJAX api to get the content and change the html content using javascript DOM api if you need "without reload" function.

Django or any application server or http webserver works in a request-response way, when a response is returned to the browser, the server has no control to the client.