Loading a new page without refreshing the current page

Question

here's my code.... okay.html

{% extends "sch/base.html" %}
{% load staticfiles %}
{% block content %}
<div class="row" id="ada">
    <form action="" method="post">
       {% csrf_token %}
        <div align="center" class="container table-responsive mt-2" >
{% block scripts %}
{{ block.super }}
<script>
window.onload = function()
    {
        var button = document.querySelector('button');
        button.onclick= function(e)
            {
                e.preventDefault();
                addRecord()
            }
    }
    function addRecord() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("ada").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "{% url 'add-advert' %}", true);
  xhttp.send();
}
</script>
{% endblock %}
            <div> <a href="javascript:;" onclick="addRecord()" ><button type="button" class="btn btn-primary"> Add New Advert </button></a></div>
    </form>
</div>
{% endblock %}

base.html

<!DOCTYPE html >
{%load staticfiles%}
{% load crispy_forms_tags %}
<html>
<head>
    <meta charset="UTF-8">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'style.css' %}"/>
    <title>{% block title %}{% endblock %}</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

</head>
<body class="container-fluid">
<div class="row">
<div class="col-lg-12">

    {% block content %}
    {% endblock %}

</div>
</div>
</body>
</html>

I'm new to javascript.... I'm trying to load another page(adverts) within the div of the current page (okay.html). they all extend base.html. i tried using $.ajax as well but it didn't work. i was told to add the first function script because initially i was getting uncaught reference, so then i tried to look for a better way to define the function addrecord

score 1 · Answer 1 · answered Dec 11 '19 at 08:18

HTML

<div class="row">
        <nav role="navigation" class="nav">
            <a class="link1">Button</a>
       </nav>
</div>

Ajax

<script>
jQuery( ".link1" ).on( "click", function(e) {
    e.preventDefault();
    processAjaxData('about', '/home/about', 'about');
}
</script>

score 0 · Accepted Answer · answered Dec 10 '19 at 09:06

0

I think maybe try adding location.reload(); in here:

    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("ada").innerHTML = this.responseText;
      location.reload();
    }
  };

answered Dec 10 '19 at 09:06

lemonid

97
9

thanks, i added an alert function to be sure it is working, the alert is working but the page i'm calling is still not showing – obri Dec 10 '19 at 09:20
maybe you can check out this one: https://stackoverflow.com/questions/13071967/adding-an-onclick-function-to-go-to-url-in-javascript – lemonid Dec 10 '19 at 10:12

score -2 · Answer 3 · answered Apr 20 '21 at 09:59

-2

Try an iframe instead of a DIV. To load your second page

answered Apr 20 '21 at 09:59

James

1

Welcome to Stack Overflow! Please read [answer] and [edit] your answer. Why does this solve the problem OP is facing, how should they "load their second page" and what exactly is this answer solving the others don't? These kinds of answers are better suited as comments and as long as you don't have enough reputation to comment, please refrain from answering with this kind of content (i.e. no in-depth explanation of the solution). Thanks! – Alexander Leithner Apr 20 '21 at 12:36

Loading a new page without refreshing the current page

3 Answers3