mardi 6 juin 2017

Ajax JQuery Call function PHP Composit Pattern

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