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

ScrewLooseSalad · June 19, 2013

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>

nogray · June 19, 2013

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?

ScrewLooseSalad · June 21, 2013

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?

ScrewLooseSalad · June 21, 2013

as far as I can tell the Java is exactly the same either way, and the php is working fine...

I really don't get it

nogray · June 21, 2013

I ment post the final script (not the php) here. e.g. view source of the page and copy the javascript code in here.

Psycho · June 21, 2013

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.

Edited June 21, 2013 by Psycho

Csharp · June 21, 2013

The JS console doesn't output a single error?

ScrewLooseSalad · June 24, 2013

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.................

ScrewLooseSalad · June 24, 2013

you should double check the spelling of all the references.

I've checked and double checked, but they all seem to be correct...

ScrewLooseSalad · June 24, 2013

The JS console doesn't output a single error?

I don't know how to check, I'll see if I can find something

Irate · June 24, 2013

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

Psycho · June 24, 2013

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'/>

ScrewLooseSalad · June 25, 2013

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!

ScrewLooseSalad · June 25, 2013

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!

Sign In

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

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information