By halfer on

Hi all

I have used jQuery to implement re-orderable (AJAX draggable) menu items in such a way as to allow only logged-in users to change the sort order of menu items. This has been written with a view to updating the weights in the menu table when a drag operation finishes, thus providing a much more convenient way to set menu item weights. This all works fine, so all I need to do now is to implement the back-end that updates the menu table.

However, I am not sure how to include the Drupal session libraries so I can test whether a user is logged-in in my AJAX/standalone PHP code. Obviously I want this to update the database only if a user is logged in (or perhaps, later on, a specific user). If someone can point me in the right direction, it will help me to finish draggable-reorderable menus in my current project, which of course I will be pleased to post for the benefit of the community.

Thanks in advance :)

⋅ Categories: Drupal 4.7.x

Comments

halfer’s picture

halfer commented

Hi all

The AJAX menu re-ordering I have been working on now works. Essentially this renders a single-level menu and then makes each item draggable using a jQuery sort widget. Drag menu entries to the position you want, and the database will adjust the weights automatically.

There are a few terrible hacks in here, and hopefully some users here will be helpful enough to suggest what I can improve on. Specifically, there is no test to ensure that it is an authenticated user accessing the re-ordering script (sorter.php). How can I do this, anyone?

Also, the Drupal menu code did not seem to be reading the weights correctly from the menu table, so I created a function to do the lookup given a menu mid. Furthermore, I wrote this with no knowledge of the menu type codes - I just discovered by trial and error that 118 is the code of an ordinary non-tab menu item. Lastly, much of the menu is parsed manually, as I couldn't make much sense of the API (so it could break upon future Drupal major releases).

If anyone would like to try this code, they are welcome to. The files, briefly, are thus:

  • block.phps - put this in a PHP block, this generates the menu itself
  • images - put this folder and its contents in your theme folder
  • jquery - again, put this in your theme folder
  • sorter.phps - put this in your Drupal root (at the same level as your index.php) and rename to sorter.php
  • style.css - merge these into your styles, or link the file in. Best put into your theme folder

You will need to tweak the theme path in jquery/handler.js for your set-up, and then link in the three JS files into your template.

Meanwhile, assistance and comments shall both be appreciated.

halfer’s picture

halfer commented

Anyone have any comments or advice?

:o)

alanburke’s picture

alanburke commented

There is a Javascript developers group at
groups.drupal.org/javascript.

Maybe posting there might prompt a response

Is there a Demo?

Regards
Alan

Drupal development and themeing, Galway, Ireland

halfer’s picture

halfer commented

Thanks for your reply.

You're right, I ought to get a demo running to tempt people, though as it is not yet secure against unauthorised users, I'd like to fix that first (which is where the advice comes in ;-). Essentially I've used this stuff to power the sort.

halfer’s picture

halfer commented

I have discovered that the files provided are subject to some sort of clash that prevents collapsible sections working on edit pages. I will look into this and provide a fix.

sgriffin’s picture

sgriffin commented

Could something like this be used to do the weighting on acidfree?
Creating precise ordering with weights is more work than using drupal at all.

halfer’s picture

halfer commented

I agree that setting weights the present way is a fiddle. If you were to take my approach and apply it to Acidfree, I would be more than happy to see this done, and I am sure the community would be very interested to see what you come up with.

davemybes’s picture

davemybes commented

Not sure if you've solved this problem already, but you might want to look at the onload function in your scripts - you need to use Drupal's addLoadEvent() instead of onload. I have found this to be the problem with some scripts that I was using in a project. Oh, yes, you also need to make sure that drupal.js is loaded before your script, otherwise that function is not defined.

Hope this helps. When I have more time (deadlines are looming at the moment), I'll take a better look at your code.
______________________________________________________________________________________________________
Recent Drupal websites: http://mbacasecomp.com and http://hudsonhistoricalsociety.ca

______________________________________________________________________________________________________

halfer’s picture

halfer commented

Thanks for your comment. In fact I fixed the problem using the jQuery-for-Drupal-4.7 module, as noted elsewhere in this thread. Although v.5 is due to have jQuery support, prior versions (I'm on 4.8) will suffer a clash with the drupal.js file, which this module fixes. Unfortunately all jQuery $() calls have to be renamed, but it's a small price to pay to have everything working!

budda’s picture

budda
Primary language English
Location Cheshire
commented

Your link just goes to a dead 404 error page. Has your work been updated for Drupal 5 or available somewhere?

--
Ixis (UK): Drupal support, Drupal hosting.

halfer’s picture

halfer commented

As per PM conversation, this was a permissions issue on my server, and is now fixed. Help yourself :o)

ica’s picture

ica commented

I have not tested your code, but the concept looks promising by reading your post. -imo- Sorting menu, node, taxonomies needs to take advantage of jquery touch, thank you for addressing that

just a small point

on your instructions above

jquery - again, put this in your theme folder

i like to point that jquery.js is already on the Drupal main core files directory on

misc/jquery.js

I presume pointing the jquery.js on your code to [ misc/jquery.js] is better option than putting the same on each- theme -some sites might have more than 1 theme especially on site dev process

thanks

halfer’s picture

halfer commented

Yep, Drupal 5> does include jQuery. This code is for Drupal <5, which didn't include it.

If you make anything more stable out of my code, do post here, as I am sure lots of folks will be interested in it. Hopefully budda will give it a go too :-)

raspberryman’s picture

raspberryman commented

Thanks for bringing this code to the table, Halfer! This functionality is very desired, and appreciated! I will do some testing this week.

Is this code for v4.7 or v5?

halfer’s picture

halfer commented

Sorry for the delay in replying, I don't often check my tracker on drupal.org. The code is for v4.7, though I can't imagine that it would pose great difficulties getting it to work for 5 (but I've not used 5, so couldn't say definitively). Note that parts of my code are a bit hacky where I've not fully understood how the menu system works, so this may need to be cleaned!

It's worth bearing in mind that the version I am currently using on a client site uses a modified version of jQuery to solve conflicts with the Drupal library. I intend to post the new code at some point, but I am a bit pressed for time presently. But do let me know how you get on with your testing.

vm’s picture

vm commented

Drupal 5 introduces a working relationship with JQuery. I would assume your hacks to get it to work with drupal.js will no longer be needed. There is also a jQuery module which has been released with 4.7. which may be of benefit to workaround previous situations.

halfer’s picture

halfer commented

Sorry, I should have made it clearer: the link I provided was to the 4.7 version of jQuery. Yes, you are right that the hacks will need to be 'undone' for v5 - JQ() calls will need to be reverted to the standard $().

ica’s picture

ica commented

I have not tested your scripts but after reading your post i though i should point a cms demo with menu drag and drops and more... for inspiration or maybe too much of an eyecandy?

http://cmsbox.netstyle.ch/files/documents/14/025rhdc5xpziumiuf77k6jhz76c...

Phillip Mc’s picture

Phillip Mc commented

the video/demo is very large...can you reduce it down a bit in width/height size?

I really like the login idea...looks very slick.

Phil

ica’s picture

ica commented

I am nothing to do with the cmsbox site or the CMS, so i can not do anything about the demo video size :)
i just stumbled in while I was Digging for Drupal ad thought it has a fresh approach and some ideas might be considered as interesting.

initially i posted on usability forum -than i though its also might be related with that post here- here ad the fist reply was very negative and misunderstood my intention :(

http://drupal.org/node/132468