Stop Ajax from Appending to DIV

I have this AJAX code :

$.ajax({
    target: "#map",
    dataType: "json",
    type: 'GET',
    data: {
        query: query
    },
    url: 'http://localhost:8080/path/urllinks',
    success: function(response) {
        successCallback(response);
    }

});

function successCallback(responseObj) {

      #I tried adding the suggested answers here but it's not working.

  var table_0 = document.createElement('table');   
  if ( responseObj.length == 0 ) {

      var p_0 = document.createElement('p');
       p_0.appendChild( document.createTextNode(" Search is keyword :"+query + " does not exist in our record") );
    document.body.appendChild( p_0 );

    }

  $.each(responseObj, function(index, element){


         var tr_0 = document.createElement('tr');

            var td_0 = document.createElement('td');
               td_0.style.fontSize = "18px";
               td_0.style.textDecoration = "underline";
               td_0.style.color = "blue";

               var a_0 = document.createElement('a');
                  a_0.href = element.link;
                  a_0.appendChild( document.createTextNode(element.title) );
               td_0.appendChild( a_0 );

            tr_0.appendChild( td_0 );

         table_0.appendChild( tr_0 );


         var tr_1 = document.createElement('tr');

            var td_1 = document.createElement('td');
               td_1.style.color = "green";
               td_1.style.fontSize = "14px";

               var p_0 = document.createElement('p');
                  p_0.appendChild( document.createTextNode(element.link) );
               td_1.appendChild( p_0 );

            tr_1.appendChild( td_1 );

         table_0.appendChild( tr_1 );


         var tr_2 = document.createElement('tr');
            tr_2.style.height = "30px";
         table_0.appendChild( tr_2 );

      document.body.appendChild( table_0 );

  });       

   }

In my JSP page, i have the target div element somewhere as :

<div id="map"></div>

Each time i press the form submit, AJAX appends results and the list keeps growing. I want to actually have a new table of results in #map.


Source: jsp

Leave a Reply