CODEWITHSUNDEEP
javascriptjqueryajaxcall
Ron Zoosk
Ron Zoosk

Reputation: 193

ajax call response is forwarded to new html page on browser

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.

Upvotes: 1

Views: 151

Answers (4)

Minato
Minato

Reputation: 4533

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
                });
      });

Upvotes: 0

Ron Zoosk
Ron Zoosk

Reputation: 193

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.

Upvotes: 1

Suresh
Suresh

Reputation: 515

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.

Upvotes: 0

Muhammad Atif
Muhammad Atif

Reputation: 1102

Try this one

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

Upvotes: 0

Related Questions