Jquery while loop to write html

Associate
Joined
27 Dec 2004
Posts
612
Location
Andover
I've currently got some javascript that uses document.write to repeat the same div with slight changes every time. However, I feel Jquery could be a much better way of doing this for the code I'm using.

Code:
<script type="text/javascript">
var g=1;
while (g<=44)
  {                
    document.write("<div id=\"selection\">");
    document.write("<a class=\"playback\" href=\"#\">");
    document.write("<img id=\"play\" src=\"images/");
    document.write(g);
    document.write(".jpg\" />");        
    document.write("</a>");                
    document.write("<audio id=\"a");
    document.write(g);
    document.write("\">\">");
    document.write("<source src=\"audio/");                 
    document.write(g);                 
    document.write(".mp3\" type=\"audio/mpeg\" />");                
    document.write("Your browser does not support HTML5 audio.");
    document.write("</audio>");
    document.write("</div>");
    g++;                
    }
    </script>

However, reading through Jquery tutorials have been great, but I can't bring my head around how to recreate this!

Can someone help me piece this together in Jquery?
 
I tried the first method before I left work and like my some of my previous javascript it actually crashes out the browser! I'll update tomorrow when I'm back in
 
Thanks guys, Spunkey's method worked perfectly. I actually tried the other method but it gave me the same error with the browser crashing. Just so I know, how come the first example would cause the browser to crash in some instances?
 
So here's the big question, is there any reason this code would magically stop working even in the most simplest of tests?

Actually, pretty much any Jquery I had working before now refuses to work!
 
It was the same code as above but I was using it within an app platform called worklight.

Without knowing the platform uses prototype.js for all it's Javascript library so all Jquery calls using $ need to be renamed using jQuery.noConflict();
 
Last time I reopen this, honest!

I'll add a bit of a back story to all this so you can understand my frustration a bit. I'm currently developing/trialling projects that uses web languages for app development (basically an app with it's own browser that loads local content). There are some pretty good frameworks out there and for your basic apps it works quite well.

Now using Spunkey's I managed to make a soundboard using Jquery. Works perfect on the majority of PC web browsers and works well on android (surprisingly considering html5 support within the android OS is not perfect). However, mobile sarafi (ipad) refuses to run the code leaving me a bit stuck.

The source can be seen on www.ft-design.org.uk/ipad

The index.html is a simple mockup and Soundboard.js is where the jquery is kept.

Any ideas?
 
It's a web page wrapped in a native app, by browser I mean it just loads your js/html as if it was being loaded within the browser. So it still runs on the same rules that mobile sarafi/android browser have
 
Yeah, the Jquery fails to load. I've got it down to line 6 or 7 relating to "class: playback", this calls a function to play a sound when clicked. Works fine on android and most web browsers, but ipad/mobile sarafi fails at that point and doesn't load any more.
 
I've only just had a chance to check this but yes that works! Completely missed that as it's fine in everything but mobile sarafi. Works now, well displays (the sound linked to them gets stuck and plays the same audio no matter which one you press). Think it's more of a html5 audio/ipad issue so back to the drawing board...

Thanks though, on to phonegap API now to use sound directly
 
Back
Top Bottom