2

Ok, so basically I'm trying to have a single line of code at the bottom of a post:

<p id="audioembed">Click here to <a href="http://www.site.com/mp3file.mp3"> download MP3</a></p>

And then at the bottom of the page, I have the script to check and see if the user is viewing it on an iPhone, iPad, or iPod, and then pull the mp3 URL, clear the element, and then add a basic HTML5 audio player in its place:

<script>
jQuery(document).ready(function($) {
if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')
{
var audioElement = $('#audioembed'), href = audioElement.children('a').attr('href');
$.template("audioTemplate", "<audio src='${src}' controls>")
audioElement.empty();
$.tmpl("audioTemplate", {src: href}).appendTo(audioElement);
};
});
</script>

But for some reason, it's not working at all. I know the iDevice check is working (if I replace the template lines with something basic like a CSS color change, it works just fine) so I have to be messing something up with the template. Any light you could shine on this problem would be greatly appreciated.

Lucas
  • 16,930
  • 31
  • 110
  • 182
Peter Sorensen
  • 73
  • 1
  • 8
  • This `" – asawyer Jun 12 '12 at 20:12
  • Thanks, that was just a typo when I was posting the question. I have it correct on the page. – Peter Sorensen Jun 12 '12 at 20:29
  • Nothing? I kept looking around for resources on using templates and my code seems like technically it should work, but for some reason it simply isn't. If my code is correct (which I'm hoping someone here can confirm or refute), then I guess maybe it's a conflict elsewhere? Hopefully someone can shed some light on this for me. Thanks. – Peter Sorensen Jun 13 '12 at 18:08
  • Sorry, I've only used `jqote` and `underscore` templates. – asawyer Jun 13 '12 at 19:16
  • .tmpl was removed from jQuery long time ago. See http://stackoverflow.com/questions/7911732/jquery-templates-are-deprecated – Kenji Noguchi Nov 15 '13 at 18:43

2 Answers2

0

I think your template still has to be in a valid javascript string literal:

$.template("audioTemplate", "<audio src='${src}' controls>");
jgauffin
  • 99,844
  • 45
  • 235
  • 372
mike__t
  • 979
  • 5
  • 6
  • Or rather (to clarify) the way you have it written in your reply is how it is written on the site. I typed it out wrong here when I posted the question. – Peter Sorensen Jun 12 '12 at 20:31
0

Well, I couldn't figure out why the template function wouldn't work, so for now I just went the easy route with a basic append that pulls the URL like so:

<script>
jQuery(document).ready(function($) {
(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')
{
var audioElement = $('#audioembed'), href = audioElement.children('a').attr('href');
audioElement.empty();
audioElement.append('<audio src="'+href+'"controls>');
};
});
</script>

It'll have to do for now. I'd still like to know if anyone figures out why the original plan wasn't working. Thanks!

Peter Sorensen
  • 73
  • 1
  • 8