Incrementing Numbers With padding Javascript and MySQL IDs

notes and quirk solutions found over time
Post Reply
darknkreepy3#
Site Admin
Posts: 247
Joined: Tue Oct 27, 2009 9:33 pm

Incrementing Numbers With padding Javascript and MySQL IDs

Post by darknkreepy3# »

So, I had a job where I needed to increment through a list of MySQL rows with 001~999 as the ID [001][002] etc 3 padding positions.

How to do this in an AJAX call with HTML5 playing audio and then incrementing to the next number, or looping back after the limit was reached?

take the string into an integer

compare to a limit

use while loop and a padding character of zero [0] to add to the left side of the current number as string

Code: Select all

<html>
	<body>
		<h3>Padding addition for 3 digits with looping after limit in JS</h3>
		<table>
			<tr><td>Current</td>	<td><div id="dCurr">001</div></td></tr>
			<tr><td>Max</td>		<td><div id="dMax">007</div></td></tr>
		</table>
		<hr />
		<input type="button" value="add" onclick="addNum()">
	</body>
</html>

<script language="javascript">
	/*
	by Kristoffe Brodeur. ©2013 All Rights Reserved.
	a quick example of looping a number with padding for use in MySQL row calls with id's that have padding etc
	07-13-2013
	*/
	var div_curr=document.getElementById('dCurr');
	var div_max=document.getElementById('dMax');
	var nCurr=parseInt(div_curr.innerHTML);
	var nMax=parseInt(div_max.innerHTML);
	var nMin=1;//what to loop back to
	var posLen=div_curr.innerHTML.length;//the dCurr and dMax should have the same odometer positions, or character length
	var padding="0";//fill in [00]1 or [0]12 or []134(no fill) etc
	//alert (nMax-nCurr);
	//
	function addNum()
		{
		var testNum=parseInt(div_curr.innerHTML);
		//alert(testNum);
		testNum++;
		//alert(testNum);
		//
		if(testNum>nMax)
			{
			testNum=nMin;
			}
		var sCurr=testNum.toString();
		//loop and add "0" before the string until it is long enough to fit the design in div dCurr
		while(sCurr.length<posLen)
			{
			sCurr=padding+sCurr;
			}
		div_curr.innerHTML=sCurr;
		}
</script>
and in the AJAX environment

Code: Select all

//-----
function load_demo(sID)
	{
	var page_request=false;
	//
	if(window.XMLHttpRequest)//ff
		{
		page_request=new XMLHttpRequest();
		}  
	else if(window.ActiveXObject)//ie
		{
		try
			{
			page_request=new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch(e){}
		}
	else
		{
		return false;
		}
	//
	page_request.onreadystatechange=function()
		{
		//
		switch(page_request.readyState)
			{
			case 0:
				//uninitialized
				break;
			case 1:
				//loading
				break;
			case 2:
				//loaded
				break;
			case 3:
				//interactive
				break;
			case 4:
				//done
				colL.innerHTML=page_request.responseText;
				var audPlayer=document.getElementById('audPlayer');
				var nMin=1;
				var posLen=sID.length;
				var padding="0";
				var testNum=parseInt(sID);
				testNum++;
				//
				if(testNum>sngTotal)
					{
					testNum=nMin;
					}
				var nextSng=testNum.toString();
				//
				while(nextSng.length<posLen)
					{
					nextSng=padding+nextSng;
					}
				//alert(nextSng);
				audPlayer.addEventListener("ended",function(){load_demo(nextSng);});
				audPlayer.play();
				break;
			default:
				break;
			}			
		}
		
	page_request.open('GET','show_song.php?id='+sID,true);
	page_request.send(null);
	}
Post Reply