jquery - pages keep refreshing after call javascript function returned from ajax response -


i have tried answers call javascript function returned ajax response. every answer worked must call alert show ajax response see result.(if not use alert in function refreshresults, sometime result show disappear immediately) seems page keep refreshing.

here screenshot. enter image description here

i tested browser can receive data server. problem how show data browser side.

here code related receive data server , how server return data.

ajax

 function sendajaxquery(url, data) {      $.ajax({         type: 'post',         url: url,         data: data,         success: function (data) {       //eval(document.getelementbyid("refreshresults").innerhtml);       refreshresults(data);       //$("#firstname").text(data);       // alert('success '+data);         }     }); } 

this how send data server.

sendajaxquery('http://localhost:3000/results.html',json.stringify($('form').serializeobject())); 

js

<script type="text/javascript">   function refreshresults(data){     $("#firstname").text(data);     alert(data);   } </script> 

the server side nodejs. (the server side return string. status 200). http header

"content-type": "text/plain",'access-control-allow-origin': '*' 

this click handler.

    function senddata() {     var form = document.getelementbyid('myform');     sendajaxquery('http://localhost:3000/results.html',json.stringify($('form').serializeobject())); } var sendbutton = document.getelementbyid('sendbutton'); sendbutton.onclick = senddata; 

this according html

<form id="myform">  <input type="text" name="search" value="">   <button id="sendbutton" >search</button> 

what whole point of sendajaxquery method ?

it recreates $.post does

just use

// url , data should whatever pass sendajaxquery $.post(url, data, refreshresults);  

whenever want make ajax call..


update seeing submitting contents of form, problem might allow form submitted normal way (which causes refresh of page).

you need cancel normal action of button started action..

since using jquery, better use binding event handlers

change

var sendbutton = document.getelementbyid('sendbutton'); sendbutton.onclick = senddata; 

to

$('#sendbutton').on('click', function(e){     e.preventdefault();     senddata(); }); 

Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -