How to overload a div?

Question

JavaScript

Good afternoon, I messed up a little here, don't kick it too hard.
There is a '.gridly' block on the page that is filled after the page is loaded, I get the data via ajax.

<div class="margin-top col-md-8 col-sm-12 col-xs-12">
      <div class="gridly" req="{% url 'news:managefavornews' %}>
      </div>
      <hr>
      <div class="favor-battons" style="display:none">
       <input id="sent_changes" class="btn btn-success col-sm-6  col-xs-12 margin-bottom col-sm-offset-1 col-xs-offset-0" value="Применить"  type="submit">
       <input id="cancel_changes" class="btn btn-success col-sm-6  col-xs-12 margin-bottom col-sm-offset-1 col-xs-offset-0" value="Отменить" type="submit">
      </div>

js:

$(document).ready(function(){
    var url = $('.gridly').attr('req');
    $.get(url, function(data){
        var json = JSON.parse(data)
        $.each(json, function(i, obj) {
            $('.gridly').append('<div class="brick small">'+obj.fields.title +'<a href="."><img src="/media/'+obj.fields.head_pic+'"'+'></a><a class="delete" slug="'+obj.fields.slug+'"href="#">×</a></div>');
            $('.gridly').gridly({
                base: 60, // px
                gutter: 20, // px
                columns: 10
              });
        });
    });
});

The question is, how do I reset it if I hit '#cancel_changes' ?

Answer 1

In fact, you need to call again what you have written in $(document).ready:

function getData(){
    var url = $('.gridly').attr('req');
    $.get(url, function(data){
        var json = JSON.parse(data)
        $.each(json, function(i, obj) {
            $('.gridly').append('<div class="brick small">'+obj.fields.title +'<a href="."><img src="/media/'+obj.fields.head_pic+'"'+'></a><a class="delete" slug="'+obj.fields.slug+'"href="#">×</a></div>');
            $('.gridly').gridly({
                base: 60, // px
                gutter: 20, // px
                columns: 10
              });
        });
    });
}
$(document).ready( getData );

and change the button a little (there are different options, for example):

<input id="cancel_changes" class="btn btn-success col-sm-6  col-xs-12 margin-bottom col-sm-offset-1 col-xs-offset-0" value="Отменить" type="button" onclick="getData()">