i wanted to generate a new div, everytime i click a button. and in-between the div, i would like to generate a text editor (so i would have multiple text editor everytime i click the button). now, that i know the difference and decide to make use of ajax. is there any pointer of ajax use closely related to my problem?
<html>
<head></head>
<body>
<header></header>
<section class="content">
{{ Form::open(array('url' => '/admin/publish/'.$article['id'], 'files' => true, 'method' => 'put', 'class' => 'form-horizontal')) }}
<div class="box-footer">
<div class="form-group">
<div class="col-sm-12">
{{ Form::label('Content', null, array()) }}
{{ Form::textarea('content', $article->content, array('class' => 'form-control', 'placeholder' => 'Content')) }}
</div>
</div>
<input type="hidden" value="0" id="theValue"/>
<button id="btn-add" class="btn btn-default" onclick="addElement();">Add Content Page</button>
<div class="form-group">
<div id="myDiv" class="col-sm-12">
<!-- here is where the magic (supposed to) happen -->
</div>
</div>
</div>
</section>
<script src="//cdn.ckeditor.com/4.4.2/standard-all/ckeditor.js"></script>
<script>
function addElement() {
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value - 1) + 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my' + num + 'Div';
var tarea = '{{ Form::textarea("content"'.num.', $article->content , array(\'class\' => \'form-control\', \'placeholder\' => \'content\')) }}';
var cpage = '<img src="http://development.kawaiibeautyjapan.com/assets/images/transparent.png" onload="addContentPage('+ num +');" \/>';
newdiv.setAttribute('id', divIdName);
newdiv.innerHTML = tarea + cpage + '<button class=\'btn btn-default\' onclick=\'removeElement(' + num + ');\'>Remove</button>';
ni.appendChild(newdiv);
}
function addContentPage(count){
CKEDITOR.replace('content'+count, {
extraPlugins: 'autogrow,showblocks,div,justify'
});
CKEDITOR.config.autoGrow_maxHeight = 400;
}
function removeElement(divNum) {
var d = document.getElementById('myDiv');
var olddiv = document.getElementById('my' + divNum + 'Div');
d.removeChild(olddiv);
}
window.onbeforeunload = function (evt) {
var message = 'This tab will be closed, are you sure?';
if (typeof evt == 'undefined') {
evt = window.event;
}
if (evt) {
evt.returnValue = message;
}
return message;
};
</script>
</body>
</html>
some of the code lines are removed to simplify. If i remove "tarea" and "cpage", i could create button every time i click the "add content page" button. The thing is i'm trying to add textarea element that would be translated by the javascript function below to a text editor. But it seems there's problem with the way arrange the quotation between lines?
'{{ Form::textarea("content"'.num.', $article->content , array(\'class\' => \'form-control\', \'placeholder\' => \'content\')) }}';
thank you
