How to stop jquery ajax page reload on success or failure

Question

I am facing a problem in ajax jquery on success. My whole jsp reload on ajax success even after putting return false. How to prevent page reloading.

function AjaxCall(category){

var formValue = $('#TP').serialize();
$.post('saveIndvQuestionnaire.jsp?'+formValue+'&category='+category,
//$.post('callPage.jsp',
        function(data) {
    return false;
});
}

I am calling AjaxCall function from input type image

<input id="test" type="image" onclick="javascript:AjaxCall('Test');" src="../images/v10/larrow.png">

I am not sure I read somewhere type images makes two calls onclick.

Thanks.

what triggers the call? im guessing just move the `return` to outside the callback — tymeJV, Apr 23 '14 at 16:05
if you're doing something like a "submit" button, you'll need to use `e.preventDefault()` to keep the default action from happening — pennstatephil, Apr 23 '14 at 16:06
Your `return false;` should be the last statement of your function not of `$.post`. Like: `$.post('...', function(data){ ... }); return false;` — Think Different, Apr 23 '14 at 16:16
@ThinkDifferent even I tried with putting return false on the last statement but still it reloads the page. — pise, Apr 23 '14 at 16:19
Try to use $.ajax() instead of $.post() as it's much more customizable. http://stackoverflow.com/questions/5821380/how-to-make-a-jquery-post-request-synchronous — Jaime García Pérez, Apr 23 '14 at 16:30
@Phx I tried below code but then also same error. Is there something with type = 'image' `$.ajax({ type: 'POST', url:'saveIndvQuestionnaire.jsp?'+formValue+'&category='+category, success :function(data){},async:false});` — pise, Apr 23 '14 at 16:39
async should be true. Can you use firebug to see the error? (javascript error I mean) — Jaime García Pérez, Apr 23 '14 at 16:42

Jaime García Pérez · Accepted Answer · 2014-04-23T16:55:45.063

1

Perhaps the problem is the behavior of input type image. https://developer.mozilla.org/es/docs/Web/HTML/Element/Input Try to use e.preventDefault() in your function and no Submit should be done.

$( "#test" ).click(function( event ) {
  event.preventDefault();
var formValue = $('#TP').serialize();
$.post('saveIndvQuestionnaire.jsp?'+formValue+'&category='+category,
        function(data) {
    return false;
});

});

Exmple

http://jsfiddle.net/HBeVv/10/

You can use another html control to achieve this like a href with a Image:

<a href="#" onClick="alert('Hello World!')"><img title="The Link" /></a>

edited Apr 23 '14 at 16:55

answered Apr 23 '14 at 16:47

Jaime García Pérez

953
1
10
16

I used href instead of input type image and now my code is working fine.. Thaks – pise Apr 24 '14 at 15:14

score 1 · Answer 2 · answered Apr 23 '14 at 17:01

1

I think you can also Like this

$('YourForm').submit(function(e){
   e.preventDefault();
   formdata=$(this).serialize();
   $.ajax({
      type: "POST",
      url: url,
      data: formdata
      }).done(function(data){
  //do something
   });
});

answered Apr 23 '14 at 17:01

Sabby Subhankar Bar

32
2

score 1 · Answer 3 · answered Apr 23 '14 at 17:37

1

Try this:

<input id="test" type="image" onclick="return javascript:AjaxCall('Test');" src="../images/v10/larrow.png">

You should get "return" the response onclick.

answered Apr 23 '14 at 17:37

Naveen Chandra Tiwari

5,055
3
20
26

How to stop jquery ajax page reload on success or failure

3 Answers3