I implement php Composit Pattern, i need help in client
PHP code
<?php
interface HtmlElement
{
public function __toString();
public function add(HtmlElement $element);
public function remove(HtmlElement $element);
}
class LeafDiv implements HtmlElement
{
static public $count = 0;
public function __construct(){
self::$count++;
}
public function add(HtmlElement $component)
{
throw new ComponentException("I can't append child to myself");
}
public function remove(HtmlElement $component)
{
throw new ComponentException("Child not exists");
}
public function __toString()
{
$html = "<div>";
$html .= "</div>";
return $html;
}
}
class Div implements HtmlElement
{
static public $count = 0;
public function __construct(){
self::$count++;
}
private $_children = array();
public function add(HtmlElement $element)
{
$this->_children[] = $element;
}
public function remove(HtmlElement $element) {
$key = array_search($element,$this->_children);
unset($this->_children[$key]);
}
public function __toString()
{
$html = "<div>";
foreach ($this->_children as $child) {
$childRepresentation = (string) $child;
$childRepresentation = str_replace("\n", "\n",
$childRepresentation);
$html .= ' ' . $childRepresentation . "\n";
}
$html .= "</div>";
return $html;
}
}
$functionName = filter_input(INPUT_GET, 'functionName');
// For example
if ($functionName == "add_element") {
add();
}
$root = new Div();
$l = new LeafDiv();
function add_element() {
$root->add($l);
}
?>
My JQuery and HTML-code
<div id="addedElements">
<input class="level_1" type="button" value="+ Add composit"/>
<input class="level_0" type="button" value="+ Add leaf"/>
</div>
</body>
<script>
$('.level_1').on('click', spawn);
$('.level_0').on('click', addLeaf);
var leafs = 0;
var comps = 0;
function addLeaf() {
var level = stripLevel(this.className);
if (level !== '') {
var div = '<?php echo new LeafDiv();?>';
if (level.length == 1) {
// i try to use ajax, but i don't know
$.ajax({
type: "GET",
url: 'Action.php',
data: "functionName=add_element",
success: function(response) {
console.log(response);
}
});
$('#addedElements').append(div); }
else {
$(this).parent().append(div);
}
}
}
function spawn() {
var level = stripLevel(this.className);
if (level !== '') {
var countOthers = this.parentNode.querySelectorAll("
[class^='level_" + level + "']").length;
var x = wrapElement(level, countOthers);
if (level.length == 1) {
$('#addedElements').append(x);
}
else {
$(this).parent().append(x);
}
}
}
// check level
var stripLevel = function (className) {
var index = className.indexOf('_');
if (index > -1) {
return className.substr(index + 1);
} else {
return '';
}
};
// wrapper
var wrapElement = function (level, number) {
var div = $('<?php echo new Div();?>');
if (level.length == 1) {
var s = $('<text>parent level ' + level + '-' + number +
'</text>');
div.append(s);
} else {
var span = $('<text>child level ' + level + '-' + number +
'</text>');
div.append(span);
}
comps += <?php echo Div::$count; ?>;
// композит
var button = $('<input class="level_' + level + '-' + number + '" type="button" value="+ Добавить композит" />');
button.on('click', spawn);
div.append(button);
// лист
var button = $('<input class="level_' + level + '-' + number + '" type="button" value="+ Добавить leaf" />');
button.on('click', addLeaf);
div.append(button);
div.css('margin-left', (level.length * 10) + 'px');
return div;
};
</script>
I use code from fiddle, and fixed this code
I need create div inside div and use Composit Pattern Like this - Div composit
My problem - i don't know how to use Ajax-request. I try:
$.ajax({
type: "GET",
url: 'Action.php',
data: "functionName=add_element",
success: function(response) {
console.log(response);
}
});
Question I need Create div object, than add another div inside, but i don't know how attach PHP and Client JQuery Please Help!
Aucun commentaire:
Enregistrer un commentaire