SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Not your average webpage.

    Okay, I am not sure if you would consider this an advanced question or not but I am going to put it here. Basically, I want ideas.

    I have a page which will be using a form similar to this one here:
    HTML Code:
    <form action="<?php PHP_SELF ?>">
    <div style="width:50%;float:left"><fieldset>
     <legend>Customer Information</legend>
     Name (Last, First): <input type="text" size="15">, <input type="text" size="15"><br />
     Address 1: <input type="text" size="30"><br />
     Address 2: <input type="text" size="30"><br />
     City/St/Zip: <input type="text" size="15"> <input type="text" size="2"> <input type="text" size="10"><br />
     Phone #: <input type="text" size="14"><br />
    </fieldset></div>
    <div style="width:50%;float:left"><fieldset>
     <legend>Shipping Information</legend>
     Name (Last, First): <input type="text" size="15">, <input type="text" size="15"><br />
     Address 1: <input type="text" size="30"><br />
     Address 2: <input type="text" size="30"><br />
     City/St/Zip: <input type="text" size="15"> <input type="text" size="2"> <input type="text" size="10"><br />
     Phone #: <input type="text" size="14"><br />
    </fieldset></div>
    <fieldset style="clear:both">
      <legend>Products</legend>
      <table width="100%" cellspacing="0" cellpadding="2" border="0">
      <tr style="background-color:#336633;color:#ffffff;">
        <th width="35">SKU</th>
    	<th width="*">DESCRIPTION</th>
        <th width="20">QTY</th>
        <th width="30">PRICE</th>
        <th width="20">DISC</th>
      </tr>
      <!-- Repeat this row 25 times -->
      <tr>
        <td><input type="text" size="14" align="center"></td>
        <td><input type="text" size="65" align="left"></td>
        <td><input type="text" size="3" align="center"></td>
        <td>$<input type="text" size="6" align="center"></td>
        <td><input type="text" size="2" align="center">%</td>
      </tr>
      <!-- End repeat -->
      </table>
    </form>
    What I need to do is when someone scans in a SKU from a barcode reader or types it in the SKU box, the other information is updated. Overall, there will be about 35-50 thousand product SKUs. Now, I can think of a few ways to do this.

    1) Load the entire product database into a javascript array and retrieve the needed information using the onBlur event attached to the SKU fields. However, I think there will be serious memory concerns on the end user's machine this way.

    2) Load the entire product database into a javascript array within a second window and load it with the onBlur event of the SKU fields. Same concern with loading.

    3) Submit the form onBlur of the SKU field's, retrieve the information and display the form again.

    4) Submit a copy of the form in a secondary window, retrieve the information from the database and load it into the appropriate fields in the main window.

    Now, I would also like to dynamic increase the number of rows in the form. So for example, there would only be ten rows shown initially and when those are filled, the script adds a new row on the bottom. This would be easiest using option #3 above but for appearance issues (I want this to behave like a Windows Application), I think Option 4 would be best. So my actual question is how do I get Javascript to add a new row of fields at the appropriate time?
    Wayne Luke
    ------------


  2. #2
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remote Scripting, baby!
    <snip>An alternative is remote scripting. Remote scripting allows you to work in client script, but call methods (function or subroutines) in an ASP page. In effect, you can call server scripts as if they were local routines, but they run on the server, with full access to the capabilities of the server. Because you never leave the current page to call the server script, the state of the page is maintained.</snip>
    Of course, that's just my opinion. I could be wrong.

  3. #3
    SitePoint Zealot fmavituna's Avatar
    Join Date
    Apr 2003
    Location
    istanbul
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is another way just like remote scripting.

    Iframe scripting I'm using it some of my websites and it's working fine.

    A sample
    http://ferruh.mavituna.com/asdfclub
    user : asdf
    pass : asdf

    write something to search, page will not refresh but you will get the results.

    So you don't need to setup etc. remote scripting with this way. But probably remote scripting a more healthy solution.

  4. #4
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mr. Brownstone
    Hmm... Microsoft's solution is pretty much out. This is going to be running under Linux and PHP/MySQL. Windows solutions are not an option because of the costs involved at this time. We simply don't have $10,000 to put into a server and licensing.
    Wayne Luke
    ------------


  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not have a hidden frame and call to that when you need the form updated, and use javascript to actually update the form. If it's a little slow have the form disabled while it retrieves the information then enabled again when it's done.

    Quite simple.
    -Mark

  6. #6
    SitePoint Wizard Crowe's Avatar
    Join Date
    Nov 2001
    Location
    Huntsville
    Posts
    1,117
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    35-50 thousand product in one javascript page. Ouch. Is it not possible to have them scan/type in the sku then hit submit and the next page just load the results of that one sku? I know this ads an extra step, but man would it be faster!
    Chrispian H. Burks
    Nothing To Say

  7. #7
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    * agrees with Crowe *
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  8. #8
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Crowe
    35-50 thousand product in one javascript page. Ouch. Is it not possible to have them scan/type in the sku then hit submit and the next page just load the results of that one sku? I know this ads an extra step, but man would it be faster!

    Actually, if you read my entire post, I was thinking of going with Option #3 which would submit the form after each sku and retrieve the information from the database or even submit it after a few skus and retrieve the information. What I need to know is how to use Javascript to write a new row of form fields into a table onBlur of an item.
    Wayne Luke
    ------------


  9. #9
    SitePoint Wizard Crowe's Avatar
    Join Date
    Nov 2001
    Location
    Huntsville
    Posts
    1,117
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by W. Luke
    Actually, if you read my entire post, I was thinking of going with Option #3 which would submit the form after each sku and retrieve the information from the database or even submit it after a few skus and retrieve the information. What I need to know is how to use Javascript to write a new row of form fields into a table onBlur of an item.
    Woopsie. I don't know how I missed that, my bad, very sorry!
    Chrispian H. Burks
    Nothing To Say

  10. #10
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Tis ok, I think I have it figured out. Sometimes, just talking about things make them appear clearer in your mind.
    Wayne Luke
    ------------


  11. #11
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here ya go -- although I'm confused as to why the inputs dont have names
    Code:
    <html>
    <head>
    	<script type="text/javascript">
    		document.createHTMLElement = function( elemName, attribs )
    		{
    			var elem = document.createElement( elemName );
    			if ( typeof attribs != 'undefined' )
    			{
    				for ( var i in attribs )
    				{
    					switch ( true )
    					{
    						case ( i == 'text' )  : elem.appendChild( document.createTextNode( attribs[i] ) ); break;
    						case ( i == 'class' ) : elem.className = attribs[i]; break;
    						default : elem.setAttribute( i, '' ); elem[i] = attribs[i];
    					}
    				}
    			}
    			return elem;
    		}
    		function addRow( parentId )
    		{
    			var parent = document.getElementById( parentId );
    			var html   = document.createHTMLElement;
    			var i	  = -1;
    			var cell = tr = td = inp = null;
    			var data = [
    				[14,'center'],
    				[65,'left'],
    				[3,'center'],
    				[6,'center'],
    				[2,'center']
    				];
    			tr  = html( 'tr' );
    			while ( cell = data[++i] )
    			{
    				td  = ( i == 3 ) ?
    					html( 'td', {text:'$'} ):
    					html( 'td' );
    				inp = html( 'input', {type:'text', size: cell[0], align: cell[1]} );
    				td.appendChild( inp );
    				if ( i == 4 )
    				{
    					td.appendChild( document.createTextNode( '%' ) );
    				}
    				tr.appendChild( td );
    			}
    			parent.appendChild( tr );
    		}
    
    	</script>
    </head>
    <body>
    <form action="">
    	<div style="width:50%;float:left">
    		<fieldset>
    			<legend>Customer Information</legend>
    			Name (Last, First): <input type="text" size="15">, <input type="text" size="15"><br />
    			Address 1: <input type="text" size="30"><br />
    			Address 2: <input type="text" size="30"><br />
    			City/St/Zip: <input type="text" size="15"> <input type="text" size="2"> <input type="text" size="10"><br />
    			Phone #: <input type="text" size="14"><br />
    		</fieldset>
    	</div>
    	<div style="width:50%;float:left">
    		<fieldset>
    		<legend>Shipping Information</legend>
    		Name (Last, First): <input type="text" size="15">, <input type="text" size="15"><br />
    		Address 1: <input type="text" size="30"><br />
    		Address 2: <input type="text" size="30"><br />
    		City/St/Zip: <input type="text" size="15"> <input type="text" size="2"> <input type="text" size="10"><br />
    		Phone #: <input type="text" size="14"><br />
    		</fieldset>
    	</div>
    	<fieldset style="clear:both">
    		<legend>Products</legend>
    		<table width="100%" cellspacing="0" cellpadding="2" border="0">
    			<thead>
    				<tr style="background-color:#336633;color:#ffffff;">
    					<th width="35">SKU</th>
    					<th width="*">DESCRIPTION</th>
    					<th width="20">QTY</th>
    					<th width="30">PRICE</th>
    					<th width="20">DISC</th>
    				</tr>
    			</thead>
    			<tfoot>
    				<tr>
    					<td><input type="button" value="Add Row" onclick="addRow('itemRows')"></td>
    				</tr>
    			</tfoot>
    			<tbody id="itemRows">
    			<!-- Repeat this row 25 times -->
    				<tr>
    					<td><input type="text" size="14" align="center"></td>
    					<td><input type="text" size="65" align="left"></td>
    					<td><input type="text" size="3" align="center"></td>
    					<td>$<input type="text" size="6" align="center"></td>
    					<td><input type="text" size="2" align="center">%</td>
    				</tr>
    			<!-- End repeat -->
    			</tbody>
    		</table>
    	</table>
    </form>
    
    </body>
    </html>
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  12. #12
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by W. Luke
    Tis ok, I think I have it figured out. Sometimes, just talking about things make them appear clearer in your mind.
    I did all that for nothing?

    Just kidding, it wasn't that hard
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  13. #13
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Actually, you didn't. I like what you did and will probably integrate it into my solution. What I am working on is making OSCommerce act like a Point of Sale machine as well as websales. We also plan on using it for telephone sales. Possibly using a laptop or tablet PC for remote sales at festivals and rennassaince faires as well. Any speed enhancements that I can build into it are helpful. Even on a direct ethernet connection, there will be some lag.

    Anyway, thanks for the help.
    Wayne Luke
    ------------


  14. #14
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure -- if you need help getting element names straight or whatever, let me know.

    * wonders what a reputation boost from W.Luke is like * (j/k) [img]images/smilies/wink.gif[/img]
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  15. #15
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I happened upon the following links yesterday (thank you, Zeldman), and I thought of you:

    1. O'Reilly Network: Remote Scripting with IFRAME
    2. Remote Scripting - Ashley IT

    Here’s the O'Reilly example: http://www.oreillynet.com/javascript...ad_static.html
    Of course, that's just my opinion. I could be wrong.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •