function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SaintMichaelSaintMichael 

from html input inside component to controller

I have component:

<apex:component >
	<apex:includeScript value="{!URLFOR($Resource.AutoCompleteJQuery, 'AutoCompleteJQuery/jquery-1.8.1.min.js')}" />
	<apex:includeScript value="{!URLFOR($Resource.AutoCompleteJQuery, 'AutoCompleteJQuery/jquery-ui-1.8.23.custom.min.js')}" />
	
	<link rel="stylesheet" type="text/css"
		href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" />


	<!-- Attributes Required for Component -->
	<apex:attribute name="datalist" description="JSON String. the script below turns this intoan auto complete list/type suggest list." type="String" required="true" />
	
	
	
	<script>

	$(function() {

		var availableTags = new Array();
		availableTags = {!datalist};
		//alert(availableTags);
		
		$( "#tags" ).autocomplete({
			source: availableTags
		});
	});

</script>


<div class="demo">

<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags" />
</div>

</div> 
	
	
</apex:component>

 

The input with id="tags" is an autocomplete, drop down list.

I need to get the value from that input into my controller.

 

I tried using what was mentioned in the forums:

inputHidden

actionFunction

 

I have not been able to get either method working.

 

Here is my current page testing the component:

<apex:page controller="AutoCompleteData">
    
    <script>
    
    function setCurrent(){
    	var currentValue = document.getElementById('tags').value;
    	document.getElementById('inptHdn');
    	
    	
    }
    </script>
    


 
       <c:AutoCompleteComponent datalist="{!JSONString}"/>
		<apex:form >
			<apex:inputHidden value="{!currentValue}" id="inptHdn"/>
			<apex:commandButton onclick="setCurrent();" action="{!log}"></apex:commandButton>
		</apex:form>
		
</apex:page>

 

 And here is the log function in the controller:

public PageReference log(){
	System.debug('Log method: '+currentValue);
	return null;
}

 The autocomplete list shows up properly, I just cannot get it back into my controller.

Any ideas?

 

If you are recommending the inputHidden or actionFunction, please show a good example, please.

 

 

Best Answer chosen by Admin (Salesforce Developers) 
SaintMichaelSaintMichael

I am finally able to get the component value into my controller.

 

Controller:

@RemoteAction
public static String log(String item){
	System.debug('Log method: '+item);
	return 'hello';
}

 Javascript in the Visualforce page:

 function setCurrent(){
    	
    	var currentValue = document.getElementById('tags').value;
    	
    	//alert(currentValue);
    	
    	Visualforce.remoting.Manager.invokeAction(
    	'{!$RemoteAction.AutoCompleteData.log}',
    	currentValue,
    	function(result, event){
    	if(event.status){
    	alert("good!");
    	}
    	},
    	{escape: true}
    	
    	);
    	
    	
    	
    	
    	
    }
    </script>

 

Here is the component implementation:

<c:AutoCompleteComponent datalist="{!JSONString}"/>
		<button type="button" onclick="setCurrent();">Click Me!</button>