jquery - How to output multi-line HTML with variable interpolation using Javascript? -


i'm trying output following each time function run:

<object id="video" width="500" height="500" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={"playlist":["poster_location", {"url": "clip_location","autoplay":false,"autobuffering":true}]}' /> <img src="poster_location" width="500" height="500" alt="poster image" title="no video playback capabilities." /> </object>

and i'd interpolate javascript variables within parts of code (to change video/poster etc).

i realise can done targeting each part needs changed using document.getelementbyid , changing way, but, various reasons, need remove , re-build whole element each time function run.

so there way output html using javascript in fashion similar php's echo?

i'm using jquery, if helps.

the hotest jquery approach jquery template plugin. question is, should doing kind of dom manipulation on client side @ all? decision can make. if need do, template plugin handy. particulars see john resig's writeup.

<!doctype html> <html lang="en"> <head>     <meta charset="utf-8" />     <title></title>     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>     <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>     <script id='summarytmpl' type="text/x-jquery-tmpl">             <li><h1>${name}</h1>             <object id="video" width="500" height="500" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">                     <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />                     <param name="allowfullscreen" value="true" />                     <param name="flashvars" value='config={"playlist":["${posterlocation}", {"url": "${location}","autoplay":false,"autobuffering":true}]}' />                     <img src="poster_location" width="500" height="500" alt="poster image" title="no video playback capabilities." />             </object>      </script>     <script type="text/javascript">             (function($){              var movies = [ { 'name':'die hard', 'location':'http://someurl.com/vid.mpg', 'posterlocation':'http://whereismymovieposter.net' }, { 'name':'long kiss goodnight', 'location':'http://whereisit.com'} ];              $(function(){                         $("#summarytmpl").tmpl(movies).appendto("#movieslist");                 });              })(jquery);     </script> </head> <body>        <ul id="movieslist"></ul> </body> </html>

Comments

Post a Comment

Popular posts from this blog

asp.net - repeatedly call AddImageUrl(url) to assemble pdf document -

i'm using abcpdf , i'm curious if can recursively call addimageurl() function assemble pdf document compile multiple urls? something like: int pagecount = 0; int theid = thedoc.addimageurl("http://stackoverflow.com/search?q=abcpdf+footer+page+x+out+of+", true, 0, true); //assemble document while (thedoc.chainable(theid)) { thedoc.page = thedoc.addpage(); theid = thedoc.addimagetochain(theid); } pagecount = thedoc.pagecount; console.writeline("1 document page count:" + pagecount); //flatten document (int = 1; <= pagecount; i++) { thedoc.pagenumber = i; thedoc.flatten(); } //now try again theid = thedoc.addimageurl("http://stackoverflow.com/questions/1980890/pdf-report-generation", true, 0, true); //assemble document while (thedoc.chainable(theid)) { thedoc.page = thedoc.addpage(); theid = thedoc.addimagetoc
Read more

java - Android recognize cell phone with keyboard or not? -

in android app, want detect user's device if device has keyboard(like motorola milestone) , show corresponding user interface. guys know how that? ! regards justicepenny http://developer.android.com/reference/android/content/res/configuration.html public int keyboard the kind of keyboard attached device. 1 of: keyboard_nokeys, keyboard_qwerty, keyboard_12key. that's it!
Read more

iphone - How would you achieve a LED Scrolling effect? -

how achieve led scrolling effect example below? led sign - led ticker emulator iphone , ipad http://img.skitch.com/20101201-rsfh4p1bajb1wp94k466pdpiuj.preview.jpg sometimes remunerates comment in other posts :) have put code you, should implement font '8pin matrix' realistic feeling. uilabel *label; - (void)viewdidload { [super viewdidload]; label = [[uilabel alloc]initwithframe:cgrectmake(10, 50, 300, 20)]; label.font = [uifont fontwithname:@"courier-bold" size:16.0]; label.backgroundcolor = [uicolor blackcolor]; label.textcolor = [uicolor greencolor]; label.linebreakmode = uilinebreakmodecharacterwrap; // otherwise "…" label.text = @"this led text scrolled "; // blanks space between [self.view addsubview:label]; [nstimer scheduledtimerwithtimeinterval:0.12f target:self selector:@selector(scrolllabel) use
Read more