0

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.

2
Contributors
24
Replies
84
Views
3 Years
Discussion Span
Last Post by iamthwee
Featured Replies
  • 1

    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. ![8b8c03301c108c031dd18c18907ef6ca](/attachments/large/0/8b8c03301c108c031dd18c18907ef6ca.jpg "8b8c03301c108c031dd18c18907ef6ca") Read More

0

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.

0

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?

0

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.

Edited by diafol

0

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

Edited by diafol

0

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.

0

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.

0

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/

0

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.

0

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?

0

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. :)

1

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.

8b8c03301c108c031dd18c18907ef6ca

0

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.

0

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.

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.