onclick append textarea to div
http://stackoverflow.com/questions/16766046/onclick-append-textarea-to-div
HTML
<textarea id='status' name='Status'> </textarea>
<div id='output'></div>
<input type='hidden' name='UserID' value="<?=$_SESSION['UserID']; ?>">
<input type='button' value='Status Update'>
<script id="AjaxStatusesTemplate" type="text/template">
<div class="small-3 large-2 columns ">
<img src="http://placehold.it/80x80&text=[img]" />
</div>
<div class="small-9 large-10 columns">
<p><strong><a href="#">{{User}}</a>:</strong>{{Status}}</p>
<ul class="inline-list">
<li><a href="">Reply</a></li>
<li><a href="">Share</a></li>
</ul>
<hr/>
</div>
</script>
JavaScript
// 1. Update on click:
$('input').on('click', function () {
var Status = $(this).val();
// append content to the DIV
$('#output').append(Status);
// save content to the TEXTAREA
$('#status').val(Status);
});
// 2. Update by timer with 1 second delay:
function UpdateOutputWithAjaxStatuses(){
var htmlTemplate = $('#AjaxStatusesTemplate').html();
$.ajax({ url: 'http://your-server.com/Ajax/AjaxStatuses.php', data: '', dataType: 'json',
success: function(rows){
$('#output').empty();
for (var i=0, row=rows[i]; i<rows.length;i++)
{
var User = row[0];
var Status = row[1];
var html = htmlTemplate
.replace('{{User}}', User)
.replace('{{Status}}', Status);
$('#output').append(html);
}
},
error: function(){
var now = new Date();
$('#output').html('error at '+now);
},
complete: function(){
setTimeout(UpdateOutputWithAjaxStatuses, 1000);
}
});
}
// comment next line to stop autostart for ajax request scheduler
UpdateOutputWithAjaxStatuses();
/*
$(document).ajaxError(
function (event, jqXHR, ajaxSettings, thrownError) {
//... all information about occured AJAX error
});
*/