Jump to content


Photo

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

autofill suggest form javascript php

Best Answer Psycho, 24 June 2013 - 09:23 AM

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'/>
Go to the full post


  • Please log in to reply
13 replies to this topic

#1 ScrewLooseSalad

ScrewLooseSalad

    Advanced Member

  • Members
  • PipPipPip
  • 84 posts

Posted 19 June 2013 - 06:12 AM

 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>


#2 nogray

nogray

    Advanced Member

  • Members
  • PipPipPip
  • 930 posts
  • LocationSan Francisco CA

Posted 19 June 2013 - 01:51 PM

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?


NoGray.com


#3 ScrewLooseSalad

ScrewLooseSalad

    Advanced Member

  • Members
  • PipPipPip
  • 84 posts

Posted 21 June 2013 - 05:38 AM

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?



#4 ScrewLooseSalad

ScrewLooseSalad

    Advanced Member

  • Members
  • PipPipPip
  • 84 posts

Posted 21 June 2013 - 11:12 AM

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



#5 nogray

nogray

    Advanced Member

  • Members
  • PipPipPip
  • 930 posts
  • LocationSan Francisco CA

Posted 21 June 2013 - 02:42 PM

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


NoGray.com


#6 Psycho

Psycho

    Advanced Member

  • Gurus
  • 10,821 posts
  • LocationCanada

Posted 21 June 2013 - 04:14 PM

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 by Psycho, 21 June 2013 - 04:19 PM.

The quality of the responses received is directly proportional to the quality of the question asked.

I do not always test the code I provide, so there may be some syntax errors. In 99% of all cases I found the solution to your problem here: http://www.php.net

#7 Csharp

Csharp

    Member

  • Members
  • PipPip
  • 29 posts
  • LocationMunich, Germany

Posted 21 June 2013 - 04:31 PM

The JS console doesn't output a single error?



#8 ScrewLooseSalad

ScrewLooseSalad

    Advanced Member

  • Members
  • PipPipPip
  • 84 posts

Posted 24 June 2013 - 04:01 AM

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


#9 ScrewLooseSalad

ScrewLooseSalad

    Advanced Member

  • Members
  • PipPipPip
  • 84 posts

Posted 24 June 2013 - 04:03 AM

you should double check the spelling of all the references.

 

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



#10 ScrewLooseSalad

ScrewLooseSalad

    Advanced Member

  • Members
  • PipPipPip
  • 84 posts

Posted 24 June 2013 - 04:19 AM

The JS console doesn't output a single error?

 

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



#11 Irate

Irate

    Advanced Member

  • Members
  • PipPipPip
  • 358 posts
  • LocationHamburg, Germany
  • Age:17

Posted 24 June 2013 - 08:43 AM

Which browser are you using? Usually, console is available by pressing Ctrl + Shift + I.
Quod placet mihi non placeat tibi. - What I think to be good must not always equal your perception of it.

I am not perfect. I try a lot with the code I provide and I don't guarantee for it to work as I have mostly no option to test it on my mobile phone. I do apologize for any inconvenience I caused, but if I do happen to have helped, liking my posts or marking them as to have solved or answered your question would be nice.

#12 Psycho

Psycho

    Advanced Member

  • Gurus
  • 10,821 posts
  • LocationCanada

Posted 24 June 2013 - 09:23 AM   Best Answer

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

The quality of the responses received is directly proportional to the quality of the question asked.

I do not always test the code I provide, so there may be some syntax errors. In 99% of all cases I found the solution to your problem here: http://www.php.net

#13 ScrewLooseSalad

ScrewLooseSalad

    Advanced Member

  • Members
  • PipPipPip
  • 84 posts

Posted 25 June 2013 - 05:08 AM

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!



#14 ScrewLooseSalad

ScrewLooseSalad

    Advanced Member

  • Members
  • PipPipPip
  • 84 posts

Posted 25 June 2013 - 05:08 AM

 

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!






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com