+ Start a Discussion
Muruganand_SforceMuruganand_Sforce 

Unable to Bind Visual force (Java Script ) value to Controller

<script language="javascript" type="text/javascript" src="datetimepicker.js">
</script>
<script>
    function callDate(dateOfEntry){       
        NewCal('dateOfEntry','ddmmyyyy');
    }
</script>
<input id="dateOfEntry" type="text" size="25" onClick="callDate(dateOfEntry)" value="{!dateOfEntry}"/> OR <apex:inputtext id="dateOfEntry" onclick="callDate(dateOfEntry)" value="{!dateOfEntry}" />

 Above is my Visualforce Page.....

 

 

public String dateOfEntry {get; set;}

 

And it is my Apex class...

 

The Issue is I am not able to bind the Value which I got from JavaScript to Controller....

 

Please try this code and suggest....

Muruganand_SforceMuruganand_Sforce

Shall I use <apex:actionfunction> and <apex:param> in these.....

bob_buzzardbob_buzzard

You shouldn't need to use apex:param.  Does the date value that you pick get written into the input text?

 

 

Shashikant SharmaShashikant Sharma

Write this part as

 

<apex:inputtext id="dateOfEntry" onclick="callDate('{!dateOfEntry}')" value="{!dateOfEntry}" />

 I hope you wanted to pass this value to java script function,

 

But I thing rather then passing this you should do this

 

 

<apex:inputtext id="dateOfEntry" onclick="callDate(this.value)" value="{!dateOfEntry}" />

 It will pass the current value of the input text

 

if you face any issue let me know.

Muruganand_SforceMuruganand_Sforce

To Bob : Yes ; there is no issue in getting value from datepicker using javascript....But unable to bind the Value with Contoller.

 

To Shashi : No I am getting the Value from JS

bob_buzzardbob_buzzard

I've done this before on a project a couple of years ago.  I'll see if I can find my code.

Shashikant SharmaShashikant Sharma

Use this

In VFP

 

<script language="javascript" type="text/javascript" src="datetimepicker.js">
</script>
<script>
    function callDate(dateOfEntry){  
        jsBindField();      
        NewCal('dateOfEntry','ddmmyyyy');
    }
</script>
<apex:actionFunction immediate="false" action="{!bindField}" name="jsBindField" rerender="pgMsg">

<apex:inputtext id="dateOfEntry" onclick="callDate(this.value)" value="{!dateOfEntry}" />

 

In Calss

 

public void bindField()

{

}

bob_buzzardbob_buzzard

In my case all I had to initialise the javascript date picker with the id of the inputtext component.  Once the JS datepicker wrote the information back to that input, the submission of the form updated the value in the controller.

 

Are you submitting the page back, or are you looking for an auto-submit that updates the controller once the user clicks on a particular date?

bob_buzzardbob_buzzard

Looking again at your javascript&colon;

 

  function callDate(dateOfEntry){        
        NewCal('dateOfEntry','ddmmyyyy');
    }

 

Is the first parameter of the NewCal supposed to be the id of the input element to update with the value?  Otherwise I can't see how the calendar picker would be able to write the chosen date to the correct place.

 

If that is the case, you'll need to use the $Component global variable to get at the correct id:

 

<script language="javascript" type="text/javascript" src="datetimepicker.js">
</script>
<script>
    function callDate(dateOfEntryId){        
        NewCal(dateOfEntryId,'ddmmyyyy');
    }
</script>
<apex:inputtext id="dateOfEntry" onclick="callDate('{!$Component.dateOfEntry}')" value="{!dateOfEntry}" />

 

 

Muruganand_SforceMuruganand_Sforce

This is my VF Code

....

<apex:page controller="PMtest1">
<apex:form >
<script language="javascript" type="text/javascript" src="datetimepicker.js">
</script>
<script>
	function callDate(dateOfEntry){	
		NewCal('dateOfEntry','ddmmyyyy');
	}
</script>

<apex:pageBlock title="Select the Visit" mode="edit" id="step2">
<apex:includeScript value="{!$Resource.datetimepicker}" />

.......
......
<table cellpadding="5" cellspacing="10" width="100%" border="0">
                        <tr>
                            <td style="font-weight: bold;" WIDTH="35px">
                                <apex:outputtext value="Dia/Hora Inicio" />   
                               
                                <apex:inputtext id="dateOfEntry" onclick="callDate('{!$Component.dateOfEntry}')" value="{!dateOfEntry}" />                   
                               
                               
                            </td>
                        </tr>
                        <tr>

 Apex Code

  public String dateOfEntry {get; set;}

I have uploaded JS file from the following link into Static Resources..........

 javascriptkit.com/script/script2/tengcalendar.shtml


 

Then wrote the above code.....

Muruganand_SforceMuruganand_Sforce
<input id="dateOfEntry" type="text" size="25" onClick="callDate(dateOfEntry)" value="{!dateOfEntry}"/>											<apex:image url="{!$Resource.cal}" width="20" height="20" /> <br/>

 

Muruganand_SforceMuruganand_Sforce
 public class MyObject {
     	
     private String textdata1 = 'welcome';	
 	 public String gettextdata1() { return textdata1; }
     public void settextdata1(String data1) { 
     	textdata1 = data1; }
     
      }
      
      public MyObject my_object;
	 
	  public MyObject getMyObject() {
	    if (my_object == null) { my_object = new MyObject(); }
	    return my_object;
	  }

 Above is my apex controller....

	<apex:commandButton value="Submit Data" id="btnCopy" onclick="submitForm()" rerender="newData" />
	        	
	        		<apex:outputPanel id="newData">
	    				Posted value: {!MyObject.textdata1}<br/>		    
	  				</apex:outputPanel>
	  	  		
	  		<script> 
	 var btnCopy = document.getElementById("{!$Component.btnCopy}");
	 var textFld = document.getElementById("{!$Component.textFld}"); 
	  		 			alert('Loading');
	  		 			alert(textFld.value);
	  		 			
	  		 </script>
	  		 <script>	function submitForm() {
	    				alert(btnCopy.value);
	  		 			alert(textFld.value);    textFld.value = "Set from onLoad event";	      				
	  		alert(textFld.value);
	  		 			myObject.textdata1=textFld.value;
	  		 			//alert(MyObject.textdata1);
	  		 			 btnCopy.click();
	     				 
	   					 }		
	    	</script>

 myObject.textdata1=textFld.value;

 

Is this the right way to bind the JS Value to Apex ?

bob_buzzardbob_buzzard

This part doesn't look right to me:

 

myObject.textdata1=textFld.value;

 I wouldn't expect you to be able to access a controller property that way.

 

You should use the textdata1 as the merge field value for the apex:inputtext that the calendar picker is associated with.  Then when the user chooses a date, use javascript to update the input value.  Then when the form is submitted, that will automatically set the property in the controller.

Muruganand_SforceMuruganand_Sforce
 <input title="Dia/Visita" type="text" name="txtCal" id="txtCal"  />&nbsp;
<a ref="javascript&colon;NewCal('txtCal','mmddyyyy','','','spanDay','txtCal')"><apex:image url="{!$Resource.cal}" width="16" height="16" /></a>
	                                    &nbsp;&nbsp;&nbsp;<span id="spanDay"></span>
 <td style="padding-left:20px"><br />
	             <input type="button" value="{!$Label.Next}" onclick="submit()" />
	            </td>


<script src="datetimepicker.js" type="text/javascript" ></script>

<script type="text/javascript">
		    function punctual()
		    {
		        this.strDate;
		        this.numVisitingRound;
		        this.strSubject;
		        this.selected;
		    }
objPunctual = new punctual();

 function submit() {
//some code
//end result is
alert(objPunctual.strDate); alert(objPunctual.numVisitingRound); alert(objPunctual.strSubject); } </script>

 

 I want to bind with  myObject { var1,var2,var3} in the contoller.

 

objPunctual is my final result  which i want to bind with myObject.

 

merge field means merging the values of two fields...whats the meaning in this context....

 

bob_buzzardbob_buzzard

Merge field in Salesforce is a placeholder for a field that will be replaced with data from records etc.  If you go to the online help and type 'merge field' there is a detailed description.

 

You seem to be using standard HTML markup for inputs, buttons etc.  You need to be using Visualforce equivalents - e.g. apex:inputText, apex:commandButton. 

Muruganand_SforceMuruganand_Sforce

If I use Standard Visual force component like apex:inputtext then javascript is not binding....Hence I have been forced to stick to the HTML mark up...

 

 

In my last post I sent my actual code...and requirement....

 

my legs are struck here and I am spening my whole to enery to get out of this...Like a jeep struck with mud ..... Vrrrrrrrrroom

bob_buzzardbob_buzzard

You cannot use HTML markup in this way, you have to use Visualforce components in order to correctly submit the form.

 

The VF markup will be turned into HTML via the rendering engine.  Thus an apex:inputtext will result in an <input type="text"/> element on the rendered page.     When I've integrated with 3rd party calendars in the past, I've used javascript to populate the values of those generated HTML inputs.

 

The other option is to use apex:param components inside your button that submits the form, but that will have to be an apex:commandbutton rather than a regular HTML button to allow that to work.