In one of my projects I need to display new html code inside element everytime the form is submited. So I used Ajax for this, but it doesn't seem to do the job - it only prevents form from submiting, but doesn't display insides of html file (output.html in my case). Can you please help me figure out what i'm doing wrong?Here's the code of index.html\[code\]<!doctype html><html><head><link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/12767071/index.css" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script></head><body><form id="cliform" onsubmit="return false;" action="" method="get"><div class="cl">> <input type="text" class="cli" name="cmd" autocomplete='off' value="" autofocus /></div></form><script type="text/javascript">var frm = $('#cliform');frm.submit(function () { $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function (data) { $('#output').load('output.html #content'); } }); return false;});</script><div id="output"></div></body></html>\[/code\]And here's the output.html\[code\]<div id="content"><h1> Hi </h1><p>Hello, World!</p></div>\[/code\]
Ajax can't load html from file
- Thread starter Freezer
- Start date