mechanicious / domenu Goto Github PK
View Code? Open in Web Editor NEWCustomized version of Nestable for WordPress-like back-end hierarchical menu creation.
Home Page: http://mechanicious.github.io/domenu/
Customized version of Nestable for WordPress-like back-end hierarchical menu creation.
Home Page: http://mechanicious.github.io/domenu/
I need to remove the instance after leaving the view in a SPA.
When I'm coming back to the view and reinitialize doMenu on the new DOM element, all callbacks are fired +1 times.
Unfortunately doMenu doesn't have any API method to destroy.
Any ideas?
how to get value of title and id field?
I would like to get only the added attributes of a node on after endEdit event how is this possible
When I try to make doMeny parse the JSON string it creates the menues and children items correctly, but does not populate the previously selected url in the select.
Is this case not supported yet?
Hi,
I am facing the same issue but suggested solution work only for main plus button resides at the top.
my form gets always submitted on edit, of add item, remove an item.
I am using jquery.domenu-0.100.77.js version.
I am working in PHP file.
In one file second PHP file is loaded, this second file has this dd Menu.
My code is
Create Customized Hierarchy
Hi,
It might be a stupid question, but the goal of this plugin isn't to create / edit menus? If so, I'm trying to use the event listeners like onItemAdded, onItemRemoved etc. but the function parameters never seem to actually get the item data like it's ID, it's parent etc.
The question is: how can we access these data? I want to perform an AJAX call at every modification to save it into database but the problem is I can never access the item's ID...
Thank you for your help.
Additional methods and events would be nice to have in this plugin.
For the question I asked about in #22 I can't find a parent while I'm in dragStart
. I need a method, something like onItemMove
that would kick in the dragMove
function. I can't utilize placeClass
to find my parent (I mean technically I can) but it's no use, since I don't have a method with which I could check where it's being move on the go, onItemDrag kicks in when I start dragging and onItemDrop when it's ended, meaning placeClass
doesn't exist anymore. Since parent is being set while you do the dragMove
I guess the necessity of getParent
method is clear as well (even the setParent
would be great for the flexibility in the future). Due to the lack of this method I can't imitate the placeholder getting red (showing restriction of dragging) and bouncing back to original place (as in nestedSortable) which would be really nice and intuitive.
It would be great to have some output varieties, like toArray, toHierarchy etc (idea from nestedSortable, looks handy).
I though nestable dragging (from the original solution) was done well enough, why did you decide to tune it?
Any approx. date when new release is coming?
I want to get the parent node in which we are dropping a particular node. Just to know that which is the parent node for a particular node in the tree.
Thanks
hi there,
my json data below populate nice to domenu
{
"id": 92,
"parent": 87,
"title": "Extras_sub_2",
"aktiv": 1,
"seo": "de/extras/extras_sub_2",
"customSelect": 0,
"children": [ ] .....
but how can i retrieve the id (92) when i call
.onItemRemoved(function(item) { console.log(item) }
thank you for help
marc
I tried class in json but its not working
contentClass: 'new_class_name',
Goal: Multi-color menu
Hi, I've started a rewrite of doMenu to Babel which includes the following features but is not limited to:
If you are interested in contributing to the project let me know in this issue.
Hi,
I've created DoMenu with custom select2 where drop-down is populated with data containing UrlLink and UrlName where I want to show UrlName in the drop-down, but when any drop-down item is selected, the doMenu JSON should pick option value, not the option text.
Hello,
Can I using data form url json?
I use file_get_contents, but there is error 'Uncaught SyntaxError: Unexpected token o'
Please help me.
Thanks
This is the line that is putting the D in your menus, just remove the Drag leave it blank.
<div class="dd-handle dd3-handle">Drag</div>
That's all you need to do to fix it.
Hi,
I need to assign a specific number to each item in the Menu (aside the target link).
Is there a way to do it?
I don't understand the function of __domenu_params, can I use it for that? If yes, how?
Thanks
Hi Can you help me to call onSaveEditBoxInput with example outside plugin file with example.
I tried saving the data from domenu to db, I tried flattening the array also but I am losing the sort order of the list.
I want to save the data in db with the sorted order and parent child relationship
1 || test || 0 || 1
2 || test || 1 || 2
3 || test || 1 || 3
4 || test || 2 || 4
this is the db structure.
Below is the array format I am getting from domenu:
Array ( [0] => Array ( [id] => 1 [title] => test [children] => Array ( [0] => Array ( [id] => 4 [title] => name [children] => Array ( [0] => Array ( [id] => 6 [title] => tes2 [children] => Array ( [0] => Array ( [id] => 7 [title] => test3 ) [1] => Array ( [id] => 5 [title] => test4 ) ) ) ) ) ) ) [1] => Array ( [id] => 2 [title] => Digital camera ) [2] => Array ( [id] => 41 [title] => Javascript ) [3] => Array ( [id] => 42 [title] => asdasd ) [4] => Array ( [id] => 43 [title] => asdasd ) [5] => Array ( [id] => 44 [title] => 12 ) [6] => Array ( [id] => 45 [title] => 1233 ) )
Thanks
how can i find removed item id ?
i use this function but return always undefined.
.onItemRemoved(function(item) { console.log(item.data('id')) });
thanks
I have requirement something like that ,
initially only "ACTIVE" records will display when page load.
once page load , I have one checkbox button on click of that , i have to reload container and display "inactive" records as well.
for that i call "ajax" , and in response of that i also get all "inactive" records with "active" records,
but how to apply it in my old container , (means only "active" records should be rewrite with "inactive" records as well).
please help me out.
Thanks in advance.
MY CODE::::
$.ajax({
type: "POST",
url: "getisdeleted_records.php",
data: "assessmentid="+idv,
success:function(data){
valueFromPhp=data;
//alert(valueFromPhp);
$('#domenu-1').domenu({
slideAnimationDuration: 0,
data: valueFromPhp
}).parseJson();
}
});
Hi,
Right now the parent is assigned when we drop the dragged node to the right of the parent node, so I want to know how can I modify this code to drop the node over a parent.
if I drop a node over a parent node it should become the child of that particular node.
Thanks
Hello,
thanks a ton for such a wonderful plugin. I don't want to allow parent be child of another parent. But yes it should be allowed to drag as need to allow sorting.
@mechanicious please help me.
thanks
I used the plugin events to manipulate the data. For example "onItemEndEdit" . I Failed to get the data of the item under modification
For more illustration:
I want to get the modified item "id","title","parent" and "children".
but i'm facing a problem please consider my problem.
when is use this function for finding parent id
$('#domenu-1').domenu().onItemEndEdit(function(item)
{ console.log(item.parent().attr('id')) }))
then i received a error in consol like onItemEndEdit() is not a function .
could you please help me to find the problem
thank you.
regard shoaib
I have created an additional field named "tagline".
Everything is working fine, until i try to parse the previous "tagline" value as JSON into
$('#domenu').domenu({data: menuData}).parseJson();
My JSON is:
[{"title":"About Us","url":"http://demourl/about_us","tagline":"demo tagline change abt us","children":[]},{"title":"Services","url":"http://demourl/services","tagline":"asdf"},{"title":"Portfolio","url":"http://demourl/portfolio","tagline":"asdfa"},{"title":"Contact Us","url":"http://demourl/contact","tagline":"asdfads"}]
But the previous value is not retained in the Menu UI as shown:
I also read that you have solved an issue similar to mine for the select dropdown items.
Thank you and hope to hear soon from you.
hi,
I added a node into database by using some other function and now I want to refresh the tree structure to get all the new added nodes over here.
is there any method / way to do that ?
Please guide on the above.
Thanks
Hello @mechanicious ,
So far i create nav_menu
table, which contain id, object_id, parent_id, order
, object_id
is represent page, post, or category in my case, parent_id
will be 0
for nav menu in root level, so if nav menu not in root level it must have parent_id
and order
, order is start from 1.
So how i can get list and store it to database, maybe you can help me with easy example.
Thanks
I want to store all nodes into db with its parent & child reference.
I'm using domenu() in such a way that the same list can be updated from multiple broswers (nuthin fancy, just a flat list, no dragging, etc). I don't want to reload the page and re-run domenu() on the list because I'm sorting and animating... So I'm fetching the JSON data file via ajax every few seconds, and compare previous and new data. When a new record exists, I extract values, and I'd like to execute something like createNewListItem(list, param1, param2, etc) from javascript outside of domenu. (them perform an animated sort, etc).
I was able to trigger adding a new item via the button element ala $(addItemButton).trigger( "click" );
However I need to set values using parameter variables.
My being a JS non-pro, I thought I'd ask you how to approach this. I don't know if I should use some sort of callback, or... Thank you for any advice.
$list_element.domenu().createNewListItem("007", "BondJames");
Hi there,
I use you code inside a form. When a click in any button in nestable, occurs a submit.
How to fix it?
My sample:
`<form id="EditDocument" name="EditDocument" class="form-horizontal p-sm">
<div class="form-horizontal">
<div class="validation-message" style="display:none;">
<ul></ul>
</div>
@if (Model != null && Model.Any())
{
for (int i = 0; i < Model.OrderBy(x => x.Ordem).ToList().Count(); i++)
{
@Html.HiddenFor(m => m[i].CDCId)
@Html.HiddenFor(m => m[i].Token)
@Html.HiddenFor(m => m[i].Id)
@Html.HiddenFor(m => m[i].Titulo)
<div class="form-group">
<h5>@Html.DisplayFor(m => m[i].Titulo)</h5>
@Html.TextAreaFor(m => m[i].Descricao, new { @class = "editors" })
@Html.ValidationMessageFor(m => m[i].Descricao, "", new { @class = "text-danger" })
</div>
}
}
<div class="dd" id="domenu-0">
<button class="dd-new-item">+</button>
<li class="dd-item-blueprint">
<button class="collapse" data-action="collapse" type="button" style="display: none;">–</button>
<button class="expand" data-action="expand" type="button" style="display: none;">+</button>
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
<span class="item-name">[item_name]</span>
<div class="dd-button-container">
<button class="item-add">+</button>
<button class="item-remove" data-confirm-class="item-remove-confirm">×</button>
</div>
<div class="dd-edit-box" style="display: none;">
<input type="text" name="title" autocomplete="off" placeholder="Item"
data-placeholder="Any nice idea for the title?"
data-default-value="doMenu List Item. {?numeric.increment}">
<i class="end-edit">save</i>
</div>
</div>
</li>
<ol class="dd-list"></ol>
</div>
<div class="col-md-12"></div>
<div class="form-group">
<div class="col-md-12">
<input type="button" value="Alterar Documento" class="btn btn-primary btn-lg btnEditDocument" data-loading-text="Aguarde..." />
</div>
</div>
</div>
I use in my form with button that send the json and save in db.
Hi,
I am using two different doMenu.
first doMenu is edited by the user, while second cant.
I use first menu title in second, Now how to display id of first in second doMenu?
In my Menu Json, I'm storing:
[
{
"id":2,
"title":"sddsd",
"customSelect":"search.html?SearchSensor=\"flags-of-the-world\"",
"__domenu_params":{
},
"select2ScrollPosition":{
"x":0,
"y":0
}
},
{
"id":1,
"title":"Home",
"customSelect":"index.html",
"__domenu_params":{
},
"select2ScrollPosition":{
"x":0,
"y":0
}
}
]
So when dynamically rendering this JSON into DoMenu, I'm getting this error:
jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: option[value="search.html?SearchSensor="flags-of-the-world""]
at Function.ga.error (jquery.min.js:2)
at ga.tokenize (jquery.min.js:2)
at Function.ga [as find] (jquery.min.js:2)
at r.fn.init.find (jquery.min.js:2)
at HTMLSelectElement.eval (jquery.domenu-0.99.77.js?5dd7:573)
at Function.each (jquery.min.js:2)
at r.fn.init.each (jquery.min.js:2)
at Plugin.setInputCollectionPlaceholders (jquery.domenu-0.99.77.js?5dd7:570)
at Plugin.createNewListItem (jquery.domenu-0.99.77.js?5dd7:649)
at processItem (jquery.domenu-0.99.77.js?5dd7:838)
Hi,
As per my requirement, in a nested tree, remove item should be displayed only at child level.
How to do that.
I had 48.53 version installed before, decided to take a look on 95.77.
Dragging functionality is just terrible, compared to 48.53 or original nestables.js.
Item get's frozen on it's position, if you make it as a child for example and it's hard to bring it back to parent state etc.
On your demo page it works kinda okey tho.
Any idea what can affect the dragging, I doubt that css does?
I have multilevel (n-level) category and subcategory .
Should i get parent category for any particular category in Json response ?
Please help me out .
Thanks in advance
I'm trying to achieve several things. First of all, thank you on the great work you did on this solution.
So my questions are:
(1) after received json how to save data in database if child/sub-child leave is more than 5-10 ?
(2) how to get order id/sort id of menus
I'm wondering
If you are using toJson doMenu
I can't get the data you want.
Let us know how. hsk3807 at nate dot com
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.