Jquery while loop to write html

Verbium

Verbium

Verbium

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?
 
Code: 
<script type="text/javascript">

for (var i = 0; i < 44; i++)
  {                
    $("body").append("<div id=\"selection\">");
    $("body").append("<a class=\"playback\" href=\"#\">");
    $("body").append("<img id=\"play\" src=\"images/");
    $("body").append(i);
    $("body").append(".jpg\" />");        
    $("body").append("</a>");                
    $("body").append("<audio id=\"a");
    $("body").append(i);
    $("body").append("\">\">");
    $("body").append("<source src=\"audio/");                 
    $("body").append(i);                 
    $("body").append(".mp3\" type=\"audio/mpeg\" />");                
    $("body").append("Your browser does not support HTML5 audio.");
    $("body").append("</audio>");
    $("body").append("</div>");              
}

</script>

Is that what you mean? I used a 'for' loop instead of a 'while' as it's better for the situation you are writing.
 
Tiluss' method will work fine, but I was bored with 10 minutes before I go home, so I wrote this using a some of jQuerys DOM injection methods...

Code: 
<script type="text/javascript">
	for (var i = 0; i < 44; i++) {                
		var $div = $("<div>").attr("id", "selection");
		var $a = $("<a>").attr({
			class: "playback",
			href: "#"
		}).appendTo($div);
		var $img = $("<img>").attr({
			id: "play",
			src: "images/" + i + ".jpg"
		}).appendTo($a);
		var $audio = $("<audio>").attr("id", "a" + i).html("Your browser does not support HTML5 audio.").appendTo($div);
		var $source = $("<source>").attr({
			src: "audio/" + i + ".mp3",
			type: "audio/mpeg"
		}).prependTo($audio);
		
		$div.appendTo("BODY")
	}
</script>
 
Last edited:
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
 
Mr Sniper said:
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
Click to expand...

That's cause you are writing each line at a time. It is much better to write all of the HTML in one go, as per Spunkey's example.
 
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?
 
GREAT SUCCESS!

Re. the crashing I'd assume it's because you're trying to write to the body of the page 660 times just as the page finishes loading. I guess the browser doesn't like it. It would probably work if you made all your html into one $("body").append() call.

Either way, glad to help.
 
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!
 
Yes plenty, however without seeing the code in situ it would be impossible for us to debug it for you.
 
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?
 
What stage is this supposed to be in?

Im not sure I entirely understand what you are building this for. "an app with it's own browser that loads local content".

Are you building a website to be packaged up into a native app ready for android / iOS or is this just a website that you want built?
 
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.
 
Think I have tracked this problem down, the jQuery documentation says this for the .attr() method:

WARNING: When setting the 'class' attribute, you must always use quotes!
Click to expand...

On line 6, the line that the browser complains about you have:

Code: 
var $a = $("<a>").attr({
  class: "playback",
  href: "#"
}).appendTo($div);

You probably just need to wrap 'class' in quotes to resolve this issue:


Code: 
var $a = $("<a>").attr({
  'class': "playback",
  href: "#"
}).appendTo($div);
 
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
 
You must log in or register to reply here.
Back
Top Bottom