Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
50 lines (43 sloc) 1.63 KB
<p>Click either submit button to update the box below. The box should have an ajax spinner and then update with the content in the button.</p>
<link rel="stylesheet" href="/asset/more/spinner.css" type="text/css" media="screen" title="no title" charset="utf-8">
<form id="test" action="/ajax_html_echo/" method="post">
<input type="submit" name="html" value="fetch html (button 1)"/>
<input type="submit" name="html" value="fetch html (button 2)"/>
</form>
<form id="test2" action="#fail" method="post">
<input type="submit" name="html" value="fetch html with requestOptions.url" />
</form>
<div style="position: relative; margin-top: 10px">
<div id="update" style="padding: 10px; width: 200px; border: 1px solid black; height: 100px; overflow:hidden;">
this box should get new text when you click the input above.
</div>
</div>
<div style="position: relative; margin-top: 10px">
<div id="update2" style="padding: 10px; width: 200px; border: 1px solid black; height: 100px; overflow:hidden;">
<a id="update2link">If you click this link, the first form should submit and update this box.</a>
</div>
</div>
<script src="/depender/build?require=More/Form.Request,More/Spinner"></script>
<script type="text/javascript">
new Form.Request($('test'), $('update'), {
requestOptions: {
spinnerTarget: $('update')
}
});
new Form.Request('test2', 'update', {
requestOptions: {
spinnerTarget: $('update'),
url: '/ajax_html_echo/'
}
});
$('update2link').addEvent('click', function(){
$('test').formUpdate('update2', {
extraData: {
html: 'Success!'
},
requestOptions: {
spinnerTarget: $('update2')
}
});
});
</script>
Something went wrong with that request. Please try again.