Jump to content

JSON + AJAX + PHP

MCrosbie

By MCrosbie
in Javascript Help

Recommended Posts

MCrosbie Member

MCrosbie

Posted
Posted

Hi there,

 

I'm using this code for the front end of an application which has the following features:

- Rename Groups/Categories

- Add Groups/Categories

- Remove Groups/Categories

- Cannot drag and drop certain "leafs" out of one panel

- Reorder leafs

- Add leafs from one panel to another

 

The problem is however that it didn't come with a backend php/json solution and I know very little about json. Could someone give me some suggestions?

 

Here is the code here:

 

<script type="text/javascript" language="javascript">
            var TreePanels = function() {
                // shorthand
                var Tree = Ext.tree;

                return {
                    init : function(){
                        // yui-ext tree

                        var tree = new Ext.tree.TreePanel('tree-div1', {
                            animate:false,
                            loader: false,
                            enableDD:true,
                            containerScroll: true,
                            rootVisible: false
                        });

                        // set the root node
                        this.root = new Ext.tree.TreeNode({
                            text: 'ROOT',
                            allowDrug:false,
                            allowDrop:true,
                            id:'1'
                        });

                        tree.setRootNode(this.root);
                        buildCategoryTree(this.root, 
					[
						{"text":"General","id":"51","cls":"folder","allowDrop":true,"allowDrag":true,
						"children":[
							{"text":"name","id":"96","cls":"system-leaf","allowDrop":false,"allowDrag":false,"leaf":true,"is_user_defined":"0","entity_id":"2078"},
							{"text":"model","id":"495","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1","entity_id":"2087"},{
							"text":"computer_manufacturers","id":"510","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1","entity_id":"2088"},
							{"text":"sku","id":"98","cls":"system-leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"0","entity_id":"2079"},
							{"text":"weight","id":"101","cls":"system-leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"0","entity_id":"2080"},
							{"text":"color","id":"272","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1","entity_id":"2082"},
							{"text":"status","id":"273","cls":"system-leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"0","entity_id":"2083"},
							{"text":"tax_class_id","id":"274","cls":"system-leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"0","entity_id":"2084"},
							{"text":"url_key","id":"481","cls":"system-leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"0","entity_id":"2086"},
							{"text":"visibility","id":"526","cls":"system-leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"0","entity_id":"2089"},
							{"text":"gift_message_available","id":"562","cls":"system-leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"0","entity_id":"2505"},
							{"text":"manufacturer","id":"102","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1","entity_id":"2543"}
							]
						}
					]);
                        // render the tree
                        tree.render();
                        this.root.expand(false, false);
                        tree.expandAll();

                        this.ge = new Ext.tree.TreeEditor(tree, {
                            allowBlank:false,
                            blankText:'A name is required',
                            selectOnFocus:true,
                            cls:'folder'
                        });

                        this.root.addListener('beforeinsert', editSet.leftBeforeInsert);
                        this.root.addListener('beforeappend', editSet.leftBeforeInsert);

                        //this.ge.addListener('beforerender', editSet.editGroup);
                        this.ge.addListener('beforeshow', editSet.editGroup);
                        //this.ge.addListener('startedit', editSet.editGroup);

                        //-------------------------------------------------------------

                        var tree2 = new Ext.tree.TreePanel('tree-div2', {
                            animate:false,
                            loader: false,
                            enableDD:true,
                            containerScroll: true,
                            rootVisible: false,
                            lines:false
                        });

                        // set the root node
                        this.root2 = new Ext.tree.TreeNode({
                            text: 'ROOT',
                            draggable:false,
                            id:'free'
                        });
                        tree2.setRootNode(this.root2);
                        buildCategoryTree(this.root2, [{"text":"activation_information","id":"496","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"},{"text":"country_orgin","id":"507","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"},{"text":"default_category_id","id":"108","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"0"},{"text":"finish","id":"509","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"},{"text":"gender","id":"501","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"},{"text":"megapixels","id":"513","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"},{"text":"room","id":"508","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"},{"text":"shape","id":"476","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"},{"text":"shirt_size","id":"525","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"},{"text":"shoe_size","id":"502","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"},{"text":"shoe_type","id":"107","cls":"leaf","allowDrop":false,"allowDrag":true,"leaf":true,"is_user_defined":"1"}]);

                        this.root2.addListener('beforeinsert', editSet.rightBeforeInsert);
                        this.root2.addListener('beforeappend', editSet.rightBeforeAppend);

                        this.root2.addListener('append', editSet.rightAppend);
                        this.root2.addListener('remove', editSet.rightRemove);
                        // render the tree
                        tree2.render();
                        this.root2.expand(false, false);
                        tree2.expandAll();
                    },

                    rebuildTrees : function(){
                        editSet.req.attributes = new Array();
                        rootNode = TreePanels.root;
                        var gIterator = 0;
                        for( i in rootNode.childNodes ) {
                            if(rootNode.childNodes[i].id) {
                                var group = rootNode.childNodes[i];
                                editSet.req.groups[gIterator] = new Array(group.id, group.attributes.text, (gIterator+1));
                                var iterator = 0
                                for( j in group.childNodes ) {
                                    iterator ++;
                                    if( group.childNodes[j].id > 0 ) {
                                        editSet.req.attributes[group.childNodes[j].id] = new Array(group.childNodes[j].id, group.id, iterator, group.childNodes[j].attributes.entity_id);
                                    }
                                }
                                iterator = 0;
                            }
                            gIterator ++;
                        }

                        editSet.req.not_attributes = new Array();
                        rootNode = TreePanels.root2;

                        var iterator = 0;
                        for( i in rootNode.childNodes ) {
                            if(rootNode.childNodes[i].id) {
                                if( rootNode.childNodes[i].id > 0 ) {
                                    editSet.req.not_attributes[iterator] = rootNode.childNodes[i].attributes.entity_id;
                                }
                                iterator ++;
                            }
                        }
                    }
                };
            }();

            function buildCategoryTree(parent, config){
                if (!config) return null;
            	if (parent && config && config.length){
                    for (var i = 0; i < config.length; i++) {
                        var node = new Ext.tree.TreeNode(config[i]);
                        parent.appendChild(node);
                        node.addListener('click', editSet.register);
                        node.addListener('beforemove', editSet.groupBeforeMove);
                        node.addListener('beforeinsert', editSet.groupBeforeInsert);
                        node.addListener('beforeappend', editSet.groupBeforeInsert);
                        if( config[i].children ) {
                            for( j in config[i].children ) {
                                if(config[i].children[j].id) {
                                    newNode = new Ext.tree.TreeNode(config[i].children[j]);
                                    node.appendChild(newNode);
                                    newNode.addListener('click', editSet.unregister);
                                }
                            }
                        }
                    }
                }
            }

            var editSet = function() {
                return {
                    register : function(node) {
                        editSet.currentNode = node;
                    },

                    unregister : function() {
                        editSet.currentNode = false;
                    },

                    submit : function() {
                        if( TreePanels.root.firstChild == TreePanels.root.lastChild ) {
                            return;
                        }

                        if( editSet.SystemNodesExists(editSet.currentNode) ) {
                            alert('This group contains system attributes. Please move system attributes to another group and try again.');
                            return;
                        }

                        if( editSet.currentNode && editSet.currentNode.attributes.cls == 'folder' ) {
                            TreePanels.root.removeChild(editSet.currentNode);
                            for( i in editSet.currentNode.childNodes ) {
                                if( editSet.currentNode.childNodes[i].id ) {
                                    child = editSet.currentNode.childNodes[i];
                                    newNode = new Ext.tree.TreeNode(child.attributes);

                                    if( child.attributes.is_user_defined == 1 ) {
                                        TreePanels.root2.appendChild(newNode);
                                    }
                                }
                            }
                            editSet.req.removeGroups[editSet.currentNode.id] = editSet.currentNode.id;
                            editSet.currentNode = false;
                        }
                    },

                    SystemNodesExists : function(currentNode) {
                        for( i in currentNode.childNodes ) {
                            if( currentNode.childNodes[i].id ) {
                                child = editSet.currentNode.childNodes[i];
                                if( child.attributes.is_user_defined != 1 ) {
                                    return true;
                                }
                            }
                        }
                    },

                    rightAppend : function(node) {
                        return;
                    },

                    addGroup : function() {
                        var group_name = prompt("Please enter a new group name","");

                        if( group_name == '' ) {
                            this.addGroup();
                        } else if( group_name != false && group_name != null && group_name != '' ) {
                            var newNode = new Ext.tree.TreeNode({
                                    text : group_name,
                                    cls : 'folder',
                                    allowDrop : true,
                                    allowDrag : true
                                });
                            TreePanels.root.appendChild(newNode);
                            newNode.addListener('click', editSet.register);
                        }
                    },

                    editGroup : function(obj) {
                        if( obj.editNode.attributes.cls != 'folder' ) {
                         	TreePanels.ge.cancelEdit();
                         	return false;
                        }
                    },

                    save : function() {
                        TreePanels.rebuildTrees();
                        var _validator = new Validation('set_prop_form', {onSubmit:false});
                        if( !_validator.validate() ) {
                            return;
                        }
                        editSet.req.attribute_set_name = $('attribute_set_name').value;
                        var req = {data : Ext.util.JSON.encode(editSet.req)};
                        var con = new Ext.lib.Ajax.request('POST', '?id=save', {success:editSet.success,failure:editSet.failure}, req);
                    },

                    success : function(o) {
                        var response = Ext.util.JSON.decode(o.responseText);
                        if( response.error ) {
                            $('messages').innerHTML = response.message;
                        } else if( response.url ){
                            setLocation(response.url);
                        } else if( response.message ) {
                            alert(response.message);
                        }
                    },

                    failure : function(o) {
                        alert('Unable to complete request. Please try again later.');
                    },

                    groupBeforeMove : function(tree, nodeThis, oldParent, newParent) {
                        if( newParent.attributes.cls == 'folder' && nodeThis.attributes.cls == 'folder' ) {
                            return false;
                        }

                        if( newParent == TreePanels.root && nodeThis.attributes.cls != 'folder' ) {
                            return false;
                        }
                    },

                    rightBeforeAppend : function(tree, nodeThis, node, newParent) {
                        if( node.attributes.is_user_defined == 1 ) {
                            return true;
                        } else {
                            alert('You cannot remove system attribute from this set.');
                            return false;
                        }
                    },

                    rightBeforeInsert : function(tree, nodeThis, node, newParent) {
                        var empty = TreePanels.root2.findChild('id', 'empty');
                        if( empty ) {
                            return false;
                        }

                        if( node.attributes.is_user_defined == 1 ) {
                            return true;
                        } else {
                            alert('You cannot remove system attribute from this set.');
                            return false;
                        }
                    },

                    groupBeforeInsert : function(tree, nodeThis, node, newParent) {
                        if( node.allowChildren ) {
                            return false;
                        }
                    },

                    rightAppend : function(tree, nodeThis, node) {
                        var empty = TreePanels.root2.findChild('id', 'empty');
                        if( empty && node.id != 'empty' ) {
                            TreePanels.root2.removeChild(empty);
                        }
                    },

                    rightRemove : function(tree, nodeThis, node) {
                        if( nodeThis.firstChild == null && node.id != 'empty' ) {
                            var newNode = new Ext.tree.TreeNode({
                                    text : 'Empty',
                                    id : 'empty',
                                    cls : 'folder',
                                    is_user_defined : 1,
                                    allowDrop : false,
                                    allowDrag : false
                                });
                            TreePanels.root2.appendChild(newNode);
                        }
                    },

                    leftBeforeInsert : function(tree, nodeThis, node, newParent) {
                        if( node.allowChildren == false ) {
                            return false;
                        }
                    }
                }
            }();

            function initVars() {
                editSet.req = {};
                editSet.req.attributes = false;
                editSet.req.groups = new Array();
                editSet.req.not_attributes = false;
                editSet.req.attribute_set_name = false;
                editSet.req.removeGroups = new Array();
            }

            initVars();
            Ext.EventManager.onDocumentReady(TreePanels.init, TreePanels, true);
            </script>

Link to comment
https://forums.phpfreaks.com/topic/93638-json-ajax-php/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.