Jump to content

autofill suggestions from with two autofill elements - only one element works


ScrewLooseSalad

Recommended Posts

 I'm trying to get to grips with javascript, while conjuring up a form with suggestions built in; the form has two parts that autofill, the second part (var availableTags) of the script works fine, but the first part (var availableCust) doesn't, can anyone point out where I may have gone wrong? Thanks

 

code:

  <script>
    ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
  ///////////////////////////////////////////////////////////////
  $(function() {
    var availableCust = [
	<?php
	
	$sql = "SELECT * FROM `companyuser`.`customerDetails` ORDER BY  `customerDetails`.`Account_Name` ASC ";
	$result = mysql_query($sql);
	while ($row = mysql_fetch_assoc($result))
	{
		$value2 = $row['Address1'];
		$value1 = $row['Account_Name'];
		echo "'$value1 - $value2',\n";
	}
	echo "'other'\n";
	
	?>
    ];
    $( '#recipient'  ).autocomplete({  source: availableCust  });
  });
    ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
  ///////////////////////////////////////////////////////////////
  $(function() {
    var availableTags = [
	<?php
	
	$sql = "SELECT * FROM `fullstocklist`";
	$result = mysql_query($sql);
	while ($row = mysql_fetch_assoc($result))
	{
		$value4 = $row['Part_Name'];
		$value3 = $row['company_PartNo'];
		echo "'$value3 - $value4',\n";
	}
	echo "'other'\n";
	
	?>
    ];
    $( '#tags1'  ).autocomplete({  source: availableTags  });
    $( '#tags2'  ).autocomplete({  source: availableTags  });
    $( '#tags3'  ).autocomplete({  source: availableTags  });
    $( '#tags4'  ).autocomplete({  source: availableTags  });
    $( '#tags5'  ).autocomplete({  source: availableTags  });
    $( '#tags6'  ).autocomplete({  source: availableTags  });
    $( '#tags7'  ).autocomplete({  source: availableTags  });
    $( '#tags8'  ).autocomplete({  source: availableTags  });
    $( '#tags9'  ).autocomplete({  source: availableTags  });
    $( '#tags10' ).autocomplete({  source: availableTags  });
    $( '#tags11' ).autocomplete({  source: availableTags  });
    $( '#tags12' ).autocomplete({  source: availableTags  });

  });
    ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
  ///////////////////////////////////////////////////////////////
  </script>
  On 6/19/2013 at 6:51 PM, nogray said:

If you post the output of your form it will be easier to debug, but does your Address1 or Account_Name has an single quotes, line breaks or other characters that might break out your syntax?

 

 There are no single quotes or anything that should break out the syntax, these are all mysql databases used in other apps I've written that all work fine over there.

What do you mean 'post the output of your form'? What do you want me to post?

In the script you posted, you have multiple lines such as these:

$( '#tags1' ).autocomplete({ source: availableTags });
$( '#tags2' ).autocomplete({ source: availableTags });
$( '#tags3' ).autocomplete({ source: availableTags });

But, I don't see any similar lines for the availableCust values. That is needed to apply the autocomplete functionality to a field

 

EDIT: Never mind, I just saw you had this

$( '#recipient' ).autocomplete({ source: availableCust });

But, you should double check the spelling of all the references.

  On 6/21/2013 at 7:42 PM, nogray said:

view source of the page and copy the javascript code in here.

 

when I view the source in my browser I get something like this:

//........................

  <link rel='stylesheet' href='http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css' />
  <script src='http://code.jquery.com/jquery-1.9.1.js'></script>
  <script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
  <link rel='stylesheet' href='/resources/demos/style.css' />
  <script>
    ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
  ///////////////////////////////////////////////////////////////
  $(function() {

    var availableCust = [

'contact1 - address1',
'contact2 - address2',
'contact3 - address3',
//....etc

    ];
    $( '#recipient'  ).autocomplete({  source: availableCust  });
  });
    ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
  ///////////////////////////////////////////////////////////////
  $(function() {
    var availableTags = [
	
'code1 - part1',
'code2 - part2',
'code3 - part3'
//....etc

    ];
    $( '#tags1'  ).autocomplete({  source: availableTags  });
    $( '#tags2'  ).autocomplete({  source: availableTags  });
    $( '#tags3'  ).autocomplete({  source: availableTags  });
    $( '#tags4'  ).autocomplete({  source: availableTags  });
    $( '#tags5'  ).autocomplete({  source: availableTags  });
    $( '#tags6'  ).autocomplete({  source: availableTags  });
    $( '#tags7'  ).autocomplete({  source: availableTags  });
    $( '#tags8'  ).autocomplete({  source: availableTags  });
    $( '#tags9'  ).autocomplete({  source: availableTags  });
    $( '#tags10' ).autocomplete({  source: availableTags  });
    $( '#tags11' ).autocomplete({  source: availableTags  });
    $( '#tags12' ).autocomplete({  source: availableTags  });

  });
    ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
  ///////////////////////////////////////////////////////////////
  </script>
<style>
//....
</style>


<div id='editableform'>
 <!-- panel one - top left - delivery information -->
 <div id='topleftpan'>
   <table class='letabl'>
     <tr>	   <td>Deliver To:</td>	   <td><input id='' size='40' id='recipient' value='recipient'/></td>	 </tr>
     <tr>	   <td rowspan='6' style='vertical-align:text-top;'>Address:</td>	   <td><input id='' size='40' /></td>	 </tr>
     <tr>	   <td><input id='' size='40' /></td>	 </tr>
     <tr>	   <td><input id='' size='40' /></td>	 </tr>
     <tr>	   <td><input id='' size='40' /></td>	 </tr>
     <tr>	   <td><input id='' size='40' /></td>	 </tr>
     <tr>	   <td><input id='' size='40' /></td>	 </tr>
     <tr>	   <td>Contact</td>	   <td><input id='' size='40' /></td>	 </tr>
   </table>
 </div>
 
 <!-- panel two - top right - address information -->
 <div id='toprightpan'>
   <table class='letabl2'>
     <tr bgcolor="#EDEDED" style='border: 2px solid Gray;'>	   <td>Deliver To:</td>	   <td><input id='' size='40'/></td>	 </tr>
	 <tr  style='height:32px;'>		</tr>
     <tr bgcolor="#EDEDED" style='border: 2px solid Gray;'>	   <td>Date:</td>	   <td><input id='' size='40'/></td>	 </tr>
	 <tr  style='height:32px;'>		</tr>
     <tr bgcolor="#EDEDED" style='border: 2px solid Gray;'>	   <td>Order No:</td>	   <td><input id='' size='40'/></td>	 </tr>
	 <tr  style='height:32px;'>		</tr>
     <tr bgcolor="#EDEDED" style='border: 2px solid Gray;'>	   <td>Telephone:</td>	   <td><input id='' size='40'/></td>	 </tr>
   </table>
   <input type="submit" name="clear1" value="Clear" style="margin-top:10px; float:right;">
 </div>

 <!-- panel three - bottom - package content information -->
 <div id='bottompan'>
   <table class='letabl'>
     <tr align=center>
	   <td>Item no</td>
	   <td colspan='2'>Item Description</td>
	   <td>Quantity</td>
	 </tr>
     
     <tr align=center>
	   <td>1</td>
	   <td><input name='itemIden1' size='55' id='tags1' /></td>
	   <td><input name='itemDesc1' size='55'/></td>
	   <td><input name='quantity1' size='6'/></td>
	 </tr>
	 
     <tr align=center>
	   <td>2</td>
	   <td><input name='itemIden2' size='55' id='tags2' /></td>
	   <td><input name='itemDesc2' size='55'/></td>
	   <td><input name='quantity2' size='6'/></td>
	 </tr>
	 
     <tr align=center>
	   <td>3</td>
	   <td><input name='itemIden3' size='55' id='tags3' /></td>
	   <td><input name='itemDesc3' size='55'/></td>
	   <td><input name='quantity3' size='6'/></td>
	 </tr>
	 
//etc.................
  On 6/24/2013 at 1:43 PM, Irate said:

Which browser are you using? Usually, console is available by pressing Ctrl + Shift + I.

 

Chrome and Firefox, I'll be sure to remember to check the console in future!

  On 6/24/2013 at 2:23 PM, Psycho said:

 

Could it be because you have TWO id references in the relevant input tag? The first one is empty.

<input id='' size='40' id='recipient' value='recipient'/>

 

 That was exactly it! How did I overlook that?!

Thankyou so much!

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.