AJAXify the playlist edit form
drewish - September 23, 2009 - 05:12
| Project: | Station |
| Version: | 6.x-2.x-dev |
| Component: | Playlists |
| Category: | task |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs review |
Description
I've learned quite a bit about doing AHAH forms since I first did the D6 upgrade of the playlist form. This converts the track form to use Add Another and Remove buttons.
| Attachment | Size |
|---|---|
| station_playlist_ajax.patch | 15.19 KB |
#1
When I click Add Another, it spits out an error. I'm not sure what error I'm getting, because the output contains all of the source of my site in a dialog box, which has a maximum character output, and it never gets to the actual error message. Is this just me? I really wish I could give a more detailed report.
#2
try clearing the menu cache.
#3
worked like a charm. thanks.
#4
#5
nice. i'd love to get this in before a stable release. i'd love any feedback you've got on the views changes or other ideas on 2.x-stable blockers.
#6
I'd definitely consider #471866: Failed Station Schedule Update necessary for a stable release. And #390120: Playlist autocomplete should also query the catalog would be nice, especially with the ability to choose catalog/playlists. The views code looks good, but I haven't tested it, maybe tomorrow.
#7
I'm now having major issues with the storage of tracks, just throwing that out there for right now, will look into it more later tonight.
Also, it really needs a delete link for each track.
#8
you're not seeing the remove buttons?
#9
Ooooooookay so I got a lovely error when I applied this patch. Note that I've also applied the catalog lookup patch as well. My guess is that its something with "/?q=station/ahah/playlist" being there... as that page doesn't exist.
The page at http://localhost says:An error occurred.
/?q=station/ahah/playlist
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<title>Station | WONY</title>
<link type="text/css" rel="stylesheet" media="all" href="/modules/cck/theme/content-module.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/date/date.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/date/date_popup/themes/datepicker.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/date/date_popup/themes/timeentry.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/node/node.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/poll/poll.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/defaults.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system-menus.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/user/user.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/forum/forum.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="/themes/garland/style.css?h" />
<link type="text/css" rel="stylesheet" media="print" href="/themes/garland/print.css?h" />
<script type="text/javascript" src="/misc/jquery.js?h"></script>
<script type="text/javascript" src="/misc/drupal.js?h"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, { "basePath": "/", "googleanalytics": { "trackOutgoing": 1, "trackMailto": 1, "trackDownload": 1, "trackDownloadExtensions": "7z|aac|avi|csv|doc|exe|flv|gif|gz|jpe?g|js|mp(3|4|e?g)|mov|pdf|phps|png|ppt|rar|sit|tar|torrent|txt|wma|wmv|xls|xml|zip" } });
//--><!]]>
</script>
<!--[if lt IE 7]>
<link type="text/css" rel="stylesheet" media="all" href="/themes/garland/fix-ie.css" /> <![endif]-->
</head>
<body class="sidebar-left">
<!-- Layout -->
<div id="header-region" class="clear-block"></div>
<div id="wrapper">
<div id="container" class="clear-block">
<div id="header">
<div id="logo-floater">
<h1><a href="/" title="WONY Red Dragon Radio"><img src="/themes/garland/logo.png" alt="WONY Red Dragon Radio" id="logo" /><span>WONY</span> Red Dragon Radio</a></h1> </div>
<ul class="links primary-links"><li class="menu-241 first"><a href="/?q=welcome" title="Welcome to the NEW WONY website!">Welcome</a></li>
<li class="menu-284"><a href="/?q=schedule" title="WONY Fall 2009">Schedule</a></li>
<li class="menu-238"><a href="/?q=join" title="Want to get involved?">Join</a></li>
<li class="menu-239"><a href="/?q=eboard" title="E-Board">E-Board</a></li>
<li class="menu-240"><a href="/?q=node/7" title="Music Deparment">Music Department</a></li>
<li class="menu-250 last"><a href="/?q=forum" title="WONY Forums">Forums</a></li>
</ul>
</div> <!-- /header -->
<div id="sidebar-left" class="sidebar">
<div class="block block-theme"><form action="/?q=station/ahah/playlist" accept-charset="UTF-8" method="post" id="search-theme-form">
<div><div id="search" class="container-inline">
<div class="form-item" id="edit-search-theme-form-1-wrapper">
<label for="edit-search-theme-form-1">Search this site: </label>
<input type="text" maxlength="128" name="search_theme_form" id="edit-search-theme-form-1" size="15" value="" title="Enter the terms you wish to search for." class="form-text" />
</div>
<input type="submit" name="op" id="edit-submit" value="Search" class="form-submit" />
<input type="hidden" name="form_build_id" id="form-1999abff400081b10133fe78d93a438b" value="form-1999abff400081b10133fe78d93a438b" />
<input type="hidden" name="form_token" id="edit-search-theme-form-form-token" value="c93ac9fffcaad35e9e100c149e80f762" />
<input type="hidden" name="form_id" id="edit-search-theme-form" value="search_theme_form" />
</div>
</div></form>
</div> <div id="block-user-1" class="clear-block block block-user">
<h2>Rick Heil</h2>
<div class="content"><ul class="menu"><li class="leaf first"><a href="/?q=user/1">My account</a></li>
<li class="collapsed"><a href="/?q=node/add">Create content</a></li>
<li class="leaf"><a href="/?q=tracker">Recent posts</a></li>
<li class="collapsed"><a href="/?q=admin">Administer</a></li>
<li class="leaf last"><a href="/?q=logout">Log out</a></li>
</ul></div>
</div>
</div>
<div id="center"><div id="squeeze"><div class="right-corner"><div class="left-corner">
<div class="breadcrumb"><a href="/">Home</a></div> <h2>Station</h2> <div class="clear-block">
<dl class="admin-list"><dt><a href="/?q=station/playlists">Playlists</a></dt><dd></dd><dt><a href="/?q=station/programs">Programs</a></dt><dd></dd></dl> </div>
<div id="footer"><div id="block-system-0" class="clear-block block block-system">
<div class="content"><a href="http://drupal.org"><img src="/misc/powered-blue-80x15.png" alt="Powered by Drupal, an open source content management system" title="Powered by Drupal, an open source content management system" width="80" height="15" /></a></div>
</div>
</div>
</div></div></div></div> <!-- /.left-corner, /.right-corner, /#squeeze, /#center -->
</div> <!-- /container -->
</div>
<!-- /layout -->
<script type="text/javascript" src="/modules/google_analytics/googleanalytics.js?h"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
//--><!]]>
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
try{var pageTracker = _gat._getTracker("UA-7827454-2");pageTracker._setVar("authenticated user,Member,DJ,E-board,Webmaster");pageTracker._trackPageview();} catch(err) {}
//--><!]]>
</script>
</body>
</html>
#10
However, I can save the one track I can enter and it shows in the database! :)
#11
try hitting the admin/build/menu page to reset the menu cache.
#12
That trick worked for the album lookup, but still the same error on this one.
#13
I dumped the menu cache manually in the database, and this is working like an absolute charm. I'm going to enter as many playlists as I can to see if I can flush out any bugs.
#14
One small bug I've run into - if you click the "add another" button while the bottom row is blank, it adds the blank row to the top of the playlist instead of the bottom of it.
#15
Another bug - when adding new tracks, the new track also defaults to be at the top of the playlist. For chronological sanity, it seems to me that this should be the opposite, no? There also seems to be a limit of 13 tracks added... after 13, it makes previously entered tracks disappear from view, and only 10 tracks are saved to station_playlist_track.
#16
ah, good data points. i'll try to give it a look later this week.
#17
okay turns out that the weight element's #delta was too small. i bumped it up to 100 and it seemed to help correct this. i also noticed that previewing seems broken but that's because views only can query the data in the db rather than the bits in the form value. at least now it doesn't fail badly previewing a new unsaved node.
#18
#19
Applied the patch from #18 to my dev. I entered 35 tracks and it didn't seem to have a problem saving or displaying any of them. Also, good idea on having it start with 10 fields. Unless you're playing SUNN 0))) or The Decline by NOFX, probably won't use less than 10 in an hour.
#20
#21
tim if it looks good to you i'll commit it. it worked for me.
#22
When creating a playlist, there are 10 blanks.
After saving the playlist, and editing again, there are no blanks.
I briefly tried to fix this by removing the
if (!isset($node->tracks))instation_playlist_form(), but then the "Add another" button added 10 blanks each time.If that's changed, I'd say its RTBC.
Sorry I didn't get to test this sooner, but it completely invalidates that newtrack module I wrote, which made testing harder.
#23
I went back and looked at this - when I hit edit, the previously saved songs are still listed, but there aren't any blank rows at the bottom of the already saved songs. I'm actually okay with this, as that would be the whole point of the button, no?
#24
It's really just preference. Our DJs are used to submitting and editing as they go, so people can follow along. Having to click 'Edit' and then 'Add another' each time would seem redundant to them.
Configuration option? Or just leave it?
#25
both of those are by design. it's always deleted empty rows. anyone want to argue that empty rows are useful?
it seemed silly to make people click "Add new" 10 times since i'm guessing most people don't have single song shows. would 5 be a better default?
#26
It's really a moot point to me, I default it to 30 on our site since most of our DJs just add them all at once and then save once at the end of their show. Although I do kinda like Tim's system better, realistically... getting our DJ staff to do that is probably not gonna happen. I think the issue here is the use of it - do DJs save and edit constantly for each song, or do they enter all at once? I'm gonna go with maybe it should be a configuration option, tim.plunkett.
#27
what if always display 5 empty tracks and the add more button became add 5 more?
#28
how's this look?