Ticket #3824 (closed task: fixed)

Opened 1 year ago

Last modified 3 months ago

Transition the Admin Area over to using jQuery

Reported by: jeresig Assigned to: anonymous
Priority: normal Milestone: 2.5
Component: Administration Version: 2.1.1
Severity: normal Keywords: jquery javascript admin hit-list
Cc: mdawaffe, abischof, filosofo, rmccue

Description

As discussed with Matt, he would like to see the Admin area, in 2.2, using jQuery as the Javascript library running the frontend.

This is the ticket where we can discuss this issue and post possible patches. (An influx of jQuery developers are going to be coming here to help out with the transition.)

Attachments

queue_interface.diff (41.7 kB) - added by ryan on 02/22/07 03:00:07.
wp_enqueue_script() for interface
dashboard-users-01.diff (8.5 kB) - added by aercolino on 03/03/07 15:07:32.
replaces jQuery to Prototype in pages: Dashboard; Users / Authors & Users - (based on trunk)
uploads.diff (9.5 kB) - added by filosofo on 05/17/07 20:35:45.
jquery_admin_widgets.diff (13.7 kB) - added by filosofo on 08/21/07 15:54:30.
autosave.js.diff (8.6 kB) - added by rmccue on 01/03/08 07:54:07.
Use jQuery in autosave.js
autosave.js.2.diff (9.3 kB) - added by rmccue on 01/03/08 08:09:12.
Convert autosave.js to use jQuery - Change settings in script-loader.php
autosave.js.3.diff (9.8 kB) - added by ryan on 01/03/08 20:16:04.
Fix call to jQuery.post(), add id to _wpnonce, set post_ID name.
autosave.js.4.diff (9.9 kB) - added by ryan on 01/03/08 22:47:44.
Fixes tag and category saves
autosave.js.5.diff (12.2 kB) - added by ryan on 01/04/08 06:29:46.
Use schedule plugin
autosave.js.6.diff (22.0 kB) - added by ryan on 01/04/08 06:40:38.
now with the scheduler file
autosave.js.7.diff (22.3 kB) - added by rmccue on 01/04/08 08:19:47.
Should be final patch. Includes speed improvements and setting temp_ID
autosave.js.8.diff (22.9 kB) - added by rmccue on 01/04/08 08:30:18.
Now includes fix for draft saving with 0 timestamp

Change History

02/20/07 19:03:25 changed by filosofo

Can someone outline the advantages of jQuery over Prototype/Scriptaculous, or point to a discussion or article Matt has referenced?

02/20/07 22:40:49 changed by aercolino

how to install jquery/interface in wordpress 2.1 (admin)

wp-admin/index.php:

17a18
> wp_enqueue_script('interface');

wp-admin/page-new.php:

7a8
> wp_enqueue_script('interface');

wp-admin/page.php:

56a57
> 	wp_enqueue_script('interface');

wp-admin/post-new.php:

7a8
> wp_enqueue_script('interface');

wp-admin/post.php:

59a60
> 	wp_enqueue_script('interface');

wp-includes/script-loader.php:

32a33,34
> 		$this->add( 'jquery', '/wp-includes/js/jquery/jquery.js', false, '1.1.1');
> 		$this->add( 'interface', '/wp-includes/js/jquery/interface.js', array('jquery'), '1.1.1');

02/20/07 22:53:05 changed by foolswisdom

aercolino, can you just attach any patches. Lots of code in line a ticket makes it harder to follow any discussion

02/21/07 02:39:49 changed by ryan

[4904] adds the libs and updates the script loader.

02/21/07 07:50:12 changed by aercolino

I forgot to mention that jQuery needs the noConflict mode enabled.

jQuery.noConflict();

I added it to the end of jquery.js, but a different location is possible I guess.

02/22/07 03:00:07 changed by ryan

  • attachment queue_interface.diff added.

wp_enqueue_script() for interface

02/22/07 03:01:02 changed by ryan

Patch enqueues interface. I'll apply once we start moving code to jquery.

02/22/07 12:50:35 changed by aercolino

ryan, I wonder why you put interface inside the draft block in the page.php file

02/22/07 19:26:20 changed by ryan

Because we currently only use those things for autosave which is only loaded for drafts. We don't autosave published posts because the saves would show up publicly. If we expand use of jquery beyond autosave for page.php, we can move it outside the draft block.

03/01/07 09:39:31 changed by aercolino

Here is a diff that replaces jQuery to Prototype in the Dashboard and Users / Authors & Users pages. I'm working on the 2.1 version. Please tell me wether this is unacceptable, I'll install 2.1.1...

This file replaces entirely what I posted earlier. I've decided not to use the interface plugin, for now, so I've removed it.

Files to add (excluded from this diff):

wp-includes/js/jquery/jquery.js
wp-includes/js/jquery/jquery.form.js

The diff includes some short new file. Replaced files are still in place.

03/02/07 07:05:27 changed by markjaquith

aercolino,

As this will be going into trunk for 2.2, and not the 2.1.x branch, we'll need the patches to apply against /trunk/

jQuery has already been added to /trunk/ so your patch wouldn't need to add it... you'd just need to implement it.

03/02/07 23:10:06 changed by aercolino

OK, I understand... I just installed a fresh trunk :-)

Could you please add the jquery.form.js file to trunk? It's the jQuery plugin I used in the last patch. (http://www.malsup.com/jquery/form/)

03/02/07 23:27:45 changed by ryan

[4959] for jquery.form.js.

03/03/07 12:30:17 changed by aercolino

The jQuery library in trunk is old (1.1.1). Could you please install version 1.1.2? (http://jquery.com/)

jQuery is distributed in compressed and uncompressed format. It would be great if you could install both (maybe with same filenames?), so that if I find issues, I can debug them. The uncompressd one could be erased at deployment time, I guess.

Thanks.

03/03/07 15:07:32 changed by aercolino

  • attachment dashboard-users-01.diff added.

replaces jQuery to Prototype in pages: Dashboard; Users / Authors & Users - (based on trunk)

03/03/07 15:19:43 changed by aercolino

The patch works fine in IE7 and FF2, and is now based on trunk. Please try different browsers.

For testers: remember that in the Users / Authors & Users page ajax (jQuery) is called only for adding users to non-empty roles. This is how it works in WordPress. So the first user with a given role will be processed without ajax, and any other with ajax.

03/03/07 17:56:18 changed by ryan

[4963] updates to jQuery 1.1.2.

03/03/07 19:59:55 changed by ryan

  • cc set to mdawaffe.

03/05/07 23:36:38 changed by mdawaffe

aercolino, this looks tremendously pleasant :) In fact, awesome.

My only suggestion is to abstract the ajax request sending stuff out of users-js and put it into a rewritten, jQuery based wp-ajax-js.php

Also, if you want to take a look at the list manipulation stuff, I'd be happy to collaborate or help out. I'd like to see if it's possible to

  1. get rid of all of WP's inline JS. There's a lot of stuff like onclick="deleteSomething(...)"
  2. have the listMan stuff all be markup based like
    <ul id='the-list' class='list-man-list'>
     <li id='item-1' class='list-man-list-item'> blah blah
       <a href="http://delete url" class='list-man-delete'>delete</a>
     </li>
    </ul>
    

I don't think we need to worry about backward compatibility with listMan, so no holds barred as far as I'm concerned.

03/07/07 20:50:29 changed by aercolino

mdawaffe, thanks :-)

You're right, the code in users-js.php is mostly shareable. In fact I began to transform the Write page, and I'll try to use as much as possible of it. (abstraction by comparison)

List manipulation is (almost) straightforward in jQuery, so knowing that it's possible to simplify the markup is a big relief.

I posted an article on my blog about an alternative display of custom fields (based on jQuery). I was using a DL instead of a TABLE (or a UL). I think it's a flexible design for lists in general and particularly useful for custom fields.

I'd like you to have a look at it and see if you deem it too radical a change or not.

03/27/07 00:39:22 changed by ryan

  • keywords changed from jquery javascript admin to jquery javascript admin hit-list.

04/11/07 03:46:28 changed by rob1n

  • milestone changed from 2.2 to 2.3.

05/17/07 20:35:45 changed by filosofo

  • attachment uploads.diff added.

05/17/07 20:38:07 changed by filosofo

I've attached a patch (uploads.diff) that converts the image uploading stuff to jQuery from Prototype.

05/19/07 22:43:39 changed by abischof

  • cc changed from mdawaffe to mdawaffe, abischof.

05/28/07 20:46:03 changed by rob1n

(In [5580]) Move Dashboard's news to jQuery. see #3824

06/01/07 23:52:27 changed by rob1n

(In [5629]) Move uploads JS to jQuery. Props filosofo. see #3824

08/21/07 15:54:30 changed by filosofo

  • attachment jquery_admin_widgets.diff added.

08/21/07 16:11:34 changed by filosofo

I've added a patch, jquery_admin_widgets.diff, which converts the admin widgets area to jQuery.

There were a couple of places in the old code where Javascript was doing the work of CSS (basically just clearing some floats), so I took that out and used CSS instead.

Also in the old code was some dead code in which someone had apparently thought about making the dropzone lists all expand equally, but then didn't implement it (a line in resetDroppableHeights() gets the greatest number of widgets that any dropzone has, but never uses that info). I went ahead and made the dropzones expand equally vertically, because 1) someone seemingly meant to do this before and didn't 2) it looks better 3) under the old system if you had a really tall dropzone and a short dropzone, you had to go through shenanigans to drag a widget from the palette to the short dropzone.

I've tested it successfully with the following browsers:

Firefox 2.0.0.6 in Windows and Linux

IE 6 & IE 7

Safari 3.0.3 for Windows

Opera 9.23 for Windows

Konqueror 3.5.6

08/21/07 16:11:50 changed by filosofo

  • cc changed from mdawaffe, abischof to mdawaffe, abischof, filosofo.

08/23/07 21:43:50 changed by andy

Nice work on the widgets, filosofo! It is much more responsive than the Scriptaculous version.

08/23/07 22:13:28 changed by ryan

Yes, smoother and faster. One difference I note is that you can't reorder the Available Widgets list. You can only drop to the front of the list. I kinda like it this way, but it is different behavior.

08/23/07 22:34:16 changed by ryan

(In [5934]) jquery for widgets admin. Props filosofo. see #3824

09/12/07 01:02:17 changed by ryan

  • milestone changed from 2.3 to 2.4 (next).

01/03/08 07:49:15 changed by rmccue

I'm not exactly sure why, but it appears that it's not working. Can someone help me out here please? I've spent hours trying to find out why. I think it's because of the nonces, but there was no code previously to add it to the request parameters.

01/03/08 07:54:07 changed by rmccue

  • attachment autosave.js.diff added.

Use jQuery in autosave.js

01/03/08 08:01:57 changed by rmccue

Hmm, it appears that the only difference between the 2 is that Prototype/SACK is that the original (using SACK) sends $_POSTrndval?. Is this used anywhere?

01/03/08 08:03:46 changed by rmccue

Oops, I mean $POST['rndval']

01/03/08 08:09:12 changed by rmccue

  • attachment autosave.js.2.diff added.

Convert autosave.js to use jQuery - Change settings in script-loader.php

01/03/08 08:43:19 changed by rmccue

  • cc changed from mdawaffe, abischof, filosofo to mdawaffe, abischof, filosofo, rmccue.

01/03/08 09:45:46 changed by rmccue

Hmm, seems it is saving, but drafts are disappearing/aren't displayed on the write page. My bad.

01/03/08 13:15:03 changed by rmccue

I still can't seem to work out why. Anyone care to look?

01/03/08 19:24:04 changed by ryan

The call to jQuery.post() wasn't quite right, so the new nonce wasn't being generated. There's still a problem with post_ID, _wpnonce, and hiddenaction not being updated. I don't see them in the AYS POST data.

01/03/08 19:56:38 changed by ryan

Adding an ID to _wpnonce fixes the nonce. The problem with the post ID is that the field has an ID of post_ID but a name of temp_ID. We're updating the element with an ID of post_ID, which is actually the temp_ID field. I think the old code inserted a new field with the name post_ID.

01/03/08 20:16:04 changed by ryan

  • attachment autosave.js.3.diff added.

Fix call to jQuery.post(), add id to _wpnonce, set post_ID name.

(follow-up: ↓ 40 ) 01/03/08 20:17:13 changed by ryan

Setting the name instead of id for #post_ID fixed that last issue I was having. Working well now. Next we need to get rid of PeriodicalExecuter? so that we can really lose the prototype dependency.

(in reply to: ↑ 39 ) 01/03/08 20:21:53 changed by filosofo

Replying to ryan:

Setting the name instead of id for #post_ID fixed that last issue I was having. Working well now. Next we need to get rid of PeriodicalExecuter? so that we can really lose the prototype dependency.

I've based stuff on timer for this kind of thing.

(follow-up: ↓ 44 ) 01/03/08 21:08:25 changed by ryan

Would we need to add a currentlyExecuting flag to that?

01/03/08 21:09:33 changed by ryan

Tags and cats aren't being saved. The reference to tags_input should be tags-input. Not sure what's up with categories, but catslist ends up empty.

01/03/08 22:47:44 changed by ryan

  • attachment autosave.js.4.diff added.

Fixes tag and category saves

01/03/08 23:04:04 changed by rmccue

Categories were being saved for me before; I know, because I spent a fair bit of time getting them working.

(in reply to: ↑ 41 ) 01/03/08 23:14:40 changed by rmccue

Replying to ryan:

Would we need to add a currentlyExecuting flag to that?

It looks like we can just set it to false in the callback.

01/03/08 23:17:09 changed by ryan

The cat list was always empty for me until I switched to each().

01/04/08 06:29:46 changed by ryan

  • attachment autosave.js.5.diff added.

Use schedule plugin

01/04/08 06:30:36 changed by ryan

Latest patch uses the schedule plugin for jQuery and drops the last prototype dependency for post and page editing.

01/04/08 06:40:38 changed by ryan

  • attachment autosave.js.6.diff added.

now with the scheduler file

01/04/08 08:19:47 changed by rmccue

  • attachment autosave.js.7.diff added.

Should be final patch. Includes speed improvements and setting temp_ID

01/04/08 08:30:18 changed by rmccue

  • attachment autosave.js.8.diff added.

Now includes fix for draft saving with 0 timestamp

01/04/08 08:46:33 changed by ryan

(In [6546]) Port autosave to jquery. Props rmccue. see #3824

02/19/08 08:29:00 changed by ryan

  • status changed from new to closed.
  • resolution set to fixed.