Store unordered list

[iamthwee]

Sup peeps,

I'm building an ultimate CMS and I am looking into building a drag and drop menu.

I alreadly have the jquery to create the drag and drop items but I was wondering what is the best way to save this to a database.

<ul>
    <li>stuff</li>
    <li>morestuff</li>
    <ul>
        <li>ssstuff</li>
    </ul>
</ul>

Would it be wrong to just store the entire html string in the database. Or would it be better to do a parent child relationship.

If you think the parent child relationship is better my next question is how, using jquery or php do you convert the above unordered list to a parent child relationship preserving order?

Ta.

[diafol]

For your cms - I would suggest not storing any HTML - just data, as you may wish to provide themes (which are different to styles).

BTW
Your unordered menu I think is wrong.
The 'sub ul' should be in an li tag itself...

<ul>
    <li>menu1</li>
    <li>menu2
        <ul>
            <li>menu2.1</li>
            <li>menu2.2
                <ul>
                    <li>menu2.2.1</li>
                    <li>menu2.2.2</li>
                    <li>menu2.2.3</li>
                </ul>
            </li>
            <li>menu2.3</li>
        </ul>
    </li>
    <li>menu3</li>
</ul>

You can get the order to php either by traditional form - where js has modified 'position-value' values or do it via ajax.

[iamthwee]

I was thinking of using jquery to loop through the list

http://stackoverflow.com/questions/3158265/traversing-unordered-lists-using-javascript-jquery

then use php serialise to store in db, then use unserialise to dump out and codeigniters html helper to recreate the menu?

http://ellislab.com/codeigniter/user-guide/helpers/html_helper.html

Good idea?

[diafol]

Is this ultimate CMS for public consumption or is it just for you?

[iamthwee]

Just for me and my clients...Why?

[diafol]

You have more flexibility in that case to develop it any way you want. I was going to suggest avoiding frameworks, but as it's just for you, why not?

Anyway, this is going off-topic.

AN example of storage here:

http://wizardinternetsolutions.com/articles/web-programming/dynamic-multilevel-css-menu-php-mysql

[iamthwee]

My head hurts I don't have a clue how to do this.

[diafol]

Actually his follow up article is much better :)

http://wizardinternetsolutions.com/articles/web-programming/single-query-dynamic-multi-level-menu

[iamthwee]

It's not the second bit I'm struggling with, it is converting the unordered lister to a parent child relationship or a multi-dimensional array.

There are loads of examples doing the second but not the first?

[diafol]

This is where you may need to use a dom parser - especially if you're using drag and drop. Some js implementations have some sort of data storage - but I haven't used one for some time.

The sortable jqueryUI list may shed light on this - but again I haven't used this for some time.

If you get the data into a json structure and fiddle to your heart's content :) Send the data to php in whichever format you need or let php format the data for you.

[iamthwee]

I think I found my answer. I know it is bad but I'm going to store my menu as one json array rather than a parent child relationship.

I'm going to use the handy library fastfrag.

http://json.fastfrag.org/

[diafol]

I don't think it's that bad, but if you're going to do that - how about using a NoSQL db like Mongo? Placing json data into one text field does somehow defeat the object of storing in a relational db.

However, if this is the only instance of json structure that you need to store, well perhaps NoSQL that's overkill.

An interesting article here: http://backchannel.org/blog/friendfeed-schemaless-mysql

[diafol]

You may also find the idea of "nested sets" useful...

http://mikehillyer.com/articles/managing-hierarchical-data-in-mysql/

[iamthwee]

I just can't see any advantage of storing it as a relational database model, I won't need to sort the tables and it is just one top level menu which aren't linked to anything.

I was looking at another script that costs $9 which looks tempting to buy, so I'm in two minds about building this from scratch. Will see how I feel.

[iamthwee]

OK I need a little help with jquery, I decided to write my own.

If my menu looks like this:

<ol class="dd-list">
            <li class="dd-item dd3-item" >
                <div class="dd-handle dd3-handle">Drag</div>
                <div class="dd3-content">Home</div>
                <div class="url" style="display:none;">homeurl</div>

            </li>
            <li class="dd-item dd3-item" >
                <div class="dd-handle dd3-handle">Drag</div>
                <div class="dd3-content">About Us</div>
                <div class="url" style="display:none;">ssss</div>
            </li>
            <li class="dd-item dd3-item" >
                <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Pricing</div>
                <div class="url" style="display:none;">ddd</div>
                <ol class="dd-list">
                    <li class="dd-item dd3-item" >
                        <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Contact</div>
                        <div class="url" style="display:none;">ddd</div>
                    </li>
                    <li class="dd-item dd3-item" >
                        <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Something</div>
                        <div class="url" style="display:none;">ddd</div>
                    </li>
                    <li class="dd-item dd3-item" >
                        <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">test</div>
                        <div class="url" style="display:none;">ddd</div>
                    </li>
                </ol>
            </li>
          </ol>

What I want, is when you click on a div dd-item, it will get the content and url.

So if I click on the first one it will show 'home' and 'homeurl'

I will then need an option to delete the node selected and all div underneath it.

[iamthwee]

I don't know if this helps but I can assign a unique id to each 'li' element.

[iamthwee]

Ugh I'm so close

 $(".dd-list li").click(function(){
        alert($(this).find('.dd3-content').html());
        alert($(this).find('.url').html());
    });

I've got this but it is getting the content and url of the li and the one above it, if it more than one level deep. I just need the level clicked. Also how can I delete the node clicked?

http://jsfiddle.net/R89Xk/

[diafol]

You realise that you've posted jquery to the PHP forum? I realise that many of us deal with jq, but this is not the place to put it.

[iamthwee]

I do realise but I'd rather not separate the thread as it is related but I will post in the javascript forum as well.

Can you help?

[diafol]

I do realise but I'd rather not separate the thread as it is related but I will post in the javascript forum as well.

Perhaps it would be best to 'solve' this one and post a link to the new thread. I'm no jQuery expert, but there should be some in the other forum. :)

[iamthwee]

Ok I have finished building my own menu builder... I'm just waiting on another thread for an answer to convert the html to a multi-dimensional array.

Can someone please evaluate the functionality of my builder.

[iamthwee]

No feedback?

[diafol]

Without running it, how about having a trashcan icon that you can drag menu items onto in order to delete them?

ALso, it may be an idea to make the menu strips editable, so clicking on the name or url displays an in situ textbox which updates automatically when you exit (blur) the textbox. Just an idea. I'll try to download and have a proper look when I have time. But pretty busy at the mo.

[iamthwee]

Thanks that would be great, it contains no PHP or db so it there is no risk to your system. I'm just trying to recurse through the html now and save it as a parent child relationship.

[iamthwee]

For anyone who is interested in converting an unordered/ordered list to a parent child relationship whilst preserving the classes I used a php class called html2array... But I had to heavily modify it to strip out all the crap.