jquery - Submit handler post succeeds but done function does not trigger -
jquery - Submit handler post succeeds but done function does not trigger -
i'm ajax newbie , have simple arduino web server trying contact , have returned results update div on page. server side form handler trying simple "hello world" client. know server sending "hello world" because see if don't block default, of course of study shows on new page instead of in div want. set instrumentation code in between post , done functions create sure post appears succeed. server side handler c++ code looks like:
web_server.send_error_code(200); web_server.send_content_type("text/plain"); web_server.end_headers(); client& client = web_server.get_client(); client.println(f("hello world")); the html test page body (taken jquery submit api example) looks like:
<form id="testform" action="//192.168.1.177/test"> <input type="submit" value="test"> </form> <!-- results rendered within div --> <div id="result">this div</div> <script language="javascript"> // attach submit handler form $( "#searchform" ).submit(function( event ) { // stop form submitting event.preventdefault(); $( "#result" ).append( " click"); // see made here // values elements on page: var $form = $( ), url = "http://192.168.1.177/test"; var posting = $.post( url ); $( "#result" ).append( " clack:"); // instrumenting code // set results in div posting.done(function( info ) { // var content = $( info ).find( "#content" ); $( "#result" ).append( info ); document.getelementbyid('result').innerhtml = "post resuls!"; }); }); // sanity check div can changed @ page load! document.getelementbyid('result').innerhtml = "ho ho ho!"; $( "#result" ).append( " greenish giant"); </script> notice regardless of data, right code trying update result div if posting.done() function trigger!
instead of this:
var posting = $.post( url ); $( "#result" ).append( " clack:"); // instrumenting code // set results in div posting.done(function( info ) { // var content = $( info ).find( "#content" ); $( "#result" ).append( info ); document.getelementbyid('result').innerhtml = "post resuls!"; }); write this:
$.post( url, function(data){ //var content = $( info ).find( "#content" ); $( "#result" ).append( info ); document.getelementbyid('result').innerhtml = "post resuls!"; }); also think need send info url in order back, if not do.
jquery ajax forms
Comments
Post a Comment