Apex Code Development You need to sign in to do that
Don't have an account?
Muruganand_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....
Shall I use <apex:actionfunction> and <apex:param> in these.....
You shouldn't need to use apex:param. Does the date value that you pick get written into the input text?
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.
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
I've done this before on a project a couple of years ago. I'll see if I can find my code.
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()
{
}
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?
Looking again at your javascript:
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}" />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.....
<input id="dateOfEntry" type="text" size="25" onClick="callDate(dateOfEntry)" value="{!dateOfEntry}"/> <apex:image url="{!$Resource.cal}" width="20" height="20" /> <br/>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 ?
This part doesn't look right to me:
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.
<input title="Dia/Visita" type="text" name="txtCal" id="txtCal" /> <a ref="javascript:NewCal('txtCal','mmddyyyy','','','spanDay','txtCal')"><apex:image url="{!$Resource.cal}" width="16" height="16" /></a> <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....
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.
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
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.