TutorialMeta
Ad

Loading A New Page Without Refreshing The Current Page

- 1 answer

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 target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" 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

Ad

Answer

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

    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("ada").innerHTML = this.responseText;
      location.reload();
    }
  };
Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad