ajax call response is forwarded to new html page on browser

Question

I am trying to write a ajax call in response I am passing back a html string I am setting this html string as div content. it is working but once the div is updated request is forwarded to new page. I am unable to figure it out.

here is the html code -

<div id="basicdetailsdiv" class="row"><br>
            &lt;form:form id="basicdetailsform" method="post" modelAttribute="basicdetailform" action="updatebasicdetails"><br>
          &lt;div class="col-sm-6"><br>
            ..... ...... .....<br>
            ...... ..... .... <br>
         &lt;div id="editbasicsavediv" class="col-xs-5 control-label"> &lt;a id="editbasicsavelink" class="btn vd_btn btn-xs vd_bg-yellow"> &lt;i class="fa fa-pencil append-icon">&lt;/i> Save &lt;/a> &lt;/div>

        &lt;/form:form> 
        <div>

.js code

jQuery("#editbasicsavelink").click(function () {
        jQuery.ajax({
          type: "POST",
          url: "updatebasicdetails.xml",
          dataType: "html",
          data: $("#basicdetailsform").serialize(),
              success: function (response) {
              alert(response);
              alert(response.responseHtml);
              alert(response.responseText);
            $("#basicdetailsdiv").html(response);
            //element.innerHTML = resp.responseText
            alert("Details saved successfully!!!");
//          XMLHttpRequest.abort();
      },
          error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
          }
        });
    });

so once the page is updated with response, then request forwards to a new url localhost:8080/test/updatebasicdetails this page has same html response what I am receiving from ajax call response. where I am making mistake????

method code -

@RequestMapping(method = RequestMethod.POST)
@ResponseBody
public String processForm(@Valid com.mrg.form.BasicDetailsForm bdForm, Model model, HttpServletRequest request
        ) {
    System.out.println("basic details save start");
    // service call here to read entity object from db which is data
    model.addAttribute("basicdetailform", bdForm);
    return getBasicDataResponse(data);
}

getBasicDataResponse(data) is private method which returns a string. data is jpa entity object. inside method stringbuilder to set the values in html string and returns a whole html string with new value.

Answer 1

thnx for your help. it was my stupid mistake, i missed to remove a js method inside which on same link click i was submitting the form. so after executing the given ajax call it was executing that another block and hence submitted the form..what an idiotic mistake. forgive me for that! thnx all.

Answer 2

Try this one

jQuery("#editbasicsavelink").click(function (e) {
        e.preventDefault();//this will stop page from refreshing  
        jQuery.ajax({
          //ajax code
        )}
    });

Answer 3

Check the type of your button ( id = "editbasicsavelink" ). If the type is "submit", change it to button. (Or) Add "return false;" in the callback function to prevent the form submission.

Answer 4

Your callback is not getting bound to the html element I guess.. make sure to bind it after the document is completely loaded. add id=editbasicsavelink to your button and make sure to call event.preventDefault() as it'll stop the default action.

jQuery(document)
     .ready(function() {    
        jQuery("#editbasicsavelink")
             .on('click',function(event) {
                jQuery.ajax({
                   //ajax code
                });
      });