Keeping inventory in HTML, boo to Excel!

May 19, 2006 3:33 PM

AJAX / DHTML / javascript-filter: If I have an HTML table of numbers, is there a script I can add which would allow me to have a little -/+ button for each cell that would adjust the value of a number in the cell? This is for simple inventory management and would preferably just run as a local HTML file on a Mac OS X machine. (or flash drive)
posted by clango to computers & internet (21 comments total)

Inside of table cell:
<td><span>1</span> <span onclick="change(this,1)">+</span> / <span onclick="change(this,-1)></span></td>

Javascript:
function changeValue(element, value) {
   element.parentNode.firstChild.innerHTML = parseInt(element.parentNode.firstChild.innerHTML) + value;
}
posted by Civil_Disobedient at 3:40 PM on May 19, 2006

Whoops, that function should be called 'change' not 'changeValue'
posted by Civil_Disobedient at 3:41 PM on May 19, 2006

I just did something exactly like this. Here's a simplified sample (mine had some back-end pseudo-Ajax to update the order quantity in real-time as the user incremented/decremented):

Each table's "cell" was actually two cells side-by-side. The first cell contained the actual value:

<td id="cell[1,1]">0</td>

The second cell contained the increment/decrement buttons:

<a href=onclick="fIncrement(1,1);return false;">+</a>
<a href=onclick="fDecrement(1,1);return false;">+</a>

Then here are the Javascript functions that made the magic happen:

function fIncrement(x, y)
{
var x = document.getElementById('cell[' + x+ '-' + y+ ']');
if (x.value<9 9)br> {x.value = ((x.value) * 1) + 1;}
}

function fDecrement(dishid, subdishid)
{
var x = document.getElementById('cell[' + x+ '-' + y+ ']');
if (x.value>0)
{x.value = ((x.value) * 1) - 1;}
}

(Note the "if x<9 9 and if x>0" was to prevent the user from going negative or >99. You may want to adjust that accordingly).

Good luck, and hope this helps.
posted by Doofus Magoo at 3:45 PM on May 19, 2006

Metafilter is like snorting magic up a straw. Thanks!
posted by clango at 3:47 PM on May 19, 2006 [1 favorite]

So you know, there are probably about a million ways to do this. The implementation above isn't very "robust"--if you put any other elements before the first span, for example, the script won't work. It would be far better to code each cell you wish to increment with a unique ID, then use getElementById to specifically target the value. Like this:

HTML snippet:
<td><span id="cell1">666</span></td>
<td><span onclick="adjust('cell1',1);">+</span> / <span onclick="adjust('cell1',-1);">+</span>

Javascript function:
function adjust(elemId, value) {
   if ((tmpElem = document.getElementById(elemId)) != null) {
      tmpElem.innerHTML = parseInt(tmpElem.innerHTML) + value;
   }
}
posted by Civil_Disobedient at 3:50 PM on May 19, 2006

Argh, I didn't mean to suggest DM's implementation wasn't robust, I was referring to my first method.
posted by Civil_Disobedient at 3:51 PM on May 19, 2006

Stupid add-on question- will any of these solutions save the data so that I can close the file and reopen it?

I'm really excited to play with some code like this, it's been a couple years since I did much outside of Photoshop.
posted by clango at 3:57 PM on May 19, 2006

TwiddlyWiki is a javascript-based wiki -- the developer has done a lot of work on saving to the local filesystem. Not sure how he does it exactly, or how easy it would be to adapt.
posted by misterbrandt at 4:10 PM on May 19, 2006

"will any of these solutions save the data so that I can close the file and reopen it?"

Using plain-jane JavaScript? Sorta.

Take my "adjust" function above, and add the following code:
function adjust(elemId, value) {
  if ((tmpElem = document.getElementById(elemId)) != null) {
    newVal = parseInt(tmpElem.innerHTML) + value;
    tmpElem.innerHTML = newVal;
  setCookie(elemId, newVal, 365);
}
}

function getCookie(c_name) {
  if (document.cookie.length > 0) {
    c_start=document.cookie.indexOf(c_name + "=");
    if (c_start != -1) {
      c_start=c_start + c_name.length+1 ;
      c_end=document.cookie.indexOf(";",c_start);
      if (c_end==-1) c_end=document.cookie.length;
      return unescape(document.cookie.substring(c_start,c_end));
    }
  }
  return null
}

function setCookie(NameOfCookie, value, expiredays) {
  var ExpireDate = new Date ();
  ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
  document.cookie = NameOfCookie + "=" + escape(value) + ((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
  return true;
}

window.onload = function() {
  document.getElementById('cell1').innerHTML = getCookie('cell1');
}
posted by Civil_Disobedient at 4:20 PM on May 19, 2006

If you want to save it to a file proper-like, you'll either have to use a proper language like PHP or Perl, or use one of Microsoft's ActiveX objects like Scripting.FileSystemObject (blech).
posted by Civil_Disobedient at 4:22 PM on May 19, 2006

No, neither of those solutions will cause the change to persist past when the page is closed. That is an entirely other question, and is very non-trivial. What you're doing seems like a very difficult way to go about keeping inventory.
posted by Rhomboid at 4:26 PM on May 19, 2006

CD - Using a cookie is not a good road to go down. It will *appear* to persist, but only when opened in that one browser. The poster indicated that he wanted to keep the file on a flash drive which implies that it will be opened on multiple machines. Besides, for keeping inventory storing data as cookies sounds like a terrible idea -- one browser crash or user clicking on "clear cookies" and everything's gone.
posted by Rhomboid at 4:29 PM on May 19, 2006

Is there a reason you wouldn't just use a free online tool like iRows for this?
posted by scottreynen at 6:55 PM on May 19, 2006

scottreynen: simple ignorance. i'll go check that out next.
posted by clango at 8:23 PM on May 19, 2006

Rhomboid, you are wrong. The data will persist quite nicely. I didn't mention things like "this is a dumb idea" or "this isn't AJAX" or "you're going about this the wrong way" because frankly, that's not my business. If someone asks a question, particularly a programming one, I will provide the best answer I can give within the constraints of the information provided.

And you are wrong, in that the second method I mention (using the ActiveX Object) will most certainly persist the data long after you've left the browser. So please do yourself and others a service by understanding what you're talking about before shooting down solutions.
posted by Civil_Disobedient at 2:43 AM on May 20, 2006

Oh please, I use TiddlyWiki every day and I know exactly how it works, and how it saves itself to disk. When I wrote "neither of those solutions" I was referring to the first and third posts in this thread, because your posts about cookies and activeX were written while I was writing mine and I did not preview. I thought that would be obvious.
posted by Rhomboid at 3:24 AM on May 20, 2006

Well, Rhomboid, when I made a statement criticizing my own code above (fifth post), and saw that it could be misconstrued to be in reference to a post that had been created in the interim, I clarified myself so as not to cause confusion or grief. Since you did not do this, how was anyone supposed to know your 'correction' didn't, in fact, apply to my statement? The context was ambiguous when you say "no, neither of those solutions will [work]" ...directly following two solutions I suggested.
posted by Civil_Disobedient at 7:39 AM on May 20, 2006

Civil_Disobedient, I am a little dumb with this stuff sometimes. Is it bad manners around here to post a link to how I'm trying to implement your code in order to ask what the heck I'm doing wrong?
posted by clango at 7:48 AM on May 20, 2006

Not really, but it might be better handled in email, with a summary of your final implementation once you get it working to your liking. Email is in the profile.
posted by Civil_Disobedient at 8:14 AM on May 20, 2006

Sorry, forgot to say, by all means post your link so that everyone else can offer their help as well. I just know that, as these things go, it can sometimes take a while to iron out all the bugs.
posted by Civil_Disobedient at 8:15 AM on May 20, 2006

A-OK, I'll drop you a line when I get home. Thanks, you may have made my life easier.
posted by clango at 11:31 AM on May 20, 2006