By rgammon on

I am using Zen subtheme on Drupal 5.x. Viewing in Firefox on Mac OS X leopard.

I have a CCK node type that includes an audio URL field (plain text field, not a contrib field). Ultimately I want to wrap the URL in as the source in an embed tag to play the audio. I got that working fine.

But with large tables the embed tag being automatically written into every row causes a performance hit because of all the audio loaded (we have autostart=FALSE, but still...)

So genius me figures use jQuery, put an image of the player in the table and, when the user clicks, swap out the image for the embed. Actually, the image is wrapped in an "a" tag, and when jQuery does the swap it will trade in the a.href for the embed.src.

On a test page outside of Drupal, this works just fine.

Inside of Drupal, Firebug tells me "$(this).replaceWith is not a function". Visually, nothing happens. In the page source, nothing happens.

Why?!

Here's all the code in template.php:

The theme function:

/**
* If audio url, write an a with img inside.
* @todo Move html injection to tpl.php file.
*/
function zen_views_handle_field_vocabulary_list_node_data_field_audio_url_field_audio_url_value($fields, $field, $data) {

// drupal_set_message($data->node_data_field_audio_url_field_audio_url_value);

if ($data->node_data_field_audio_url_field_audio_url_value != null) {
return 'node_data_field_audio_url_field_audio_url_value . '">Only local images are allowed.';
} else {
return 'irrelevant other stuff';
}
}

Then, in template.php, above that function, is the js:

drupal_add_js(
'$(document).ready(
function() {
$("#audio").click(
function() {
$(this).replaceWith("");
}
);
}
);', 'inline');

That line above causes the unrecognized function. I've tried it with a simple string inside the replaceWith()-- still an error. I've replaced the $(this).replaceWith with test code like alert("got here") and it works. Also, jQuery is properly being added in head, before the above-- verified in source of displayed page.

All help appreciated. I was totally proud of myself for getting embeds into the view table, and then I went and got smart and broke it.

Props to the VanDyk/Westgate book and Lullabot Podcasts for getting me this far!

⋅ Categories: Drupal 5.x

Comments

rgammon’s picture

rgammon commented

I can't figure out if/how I can edit that post. But the code above should read:

/**
* If audio url, write an a with img inside.
* @todo Move html injection to tpl.php file.
*/
function zen_views_handle_field_vocabulary_list_node_data_field_audio_url_field_audio_url_value($fields, $field, $data) {

// drupal_set_message($data->node_data_field_audio_url_field_audio_url_value);

if ($data->node_data_field_audio_url_field_audio_url_value != null) {
  return '<a href="' . $data->node_data_field_audio_url_field_audio_url_value . '"><img src="play.gif" /></a>';
} else {
  return 'irrelevant other stuff';
}
}

//Then, in template.php, above that function, is the js:

drupal_add_js(
  '$(document).ready(
    function() {
      $("#audio").click(
        function() {
          $(this).replaceWith("<embed width=\"32\" height=\"32\" autostart=\"TRUE\" src=\"" + $(this).attr("href") +  "\" type=\"audio/mpeg\"/>");
        }
      );
    }
  );', 'inline');

Also, I just realized that the function sent to drupal_add_js, the part with replaceWith(), doesn't have a "return false;" but the outside-drupal test code did. Is that an issue?