+ Start a Discussion
PrazPraz 

javascript & ajax not working in my vf page

Hi,

 

I have simply copy and pasted this ajax code from the tutorial in a vf page yet it does not seem to be working. Help will be appreciated

 

 

<apex:page> <script type="text/javascript"> var __sfdcSessionId = '{!GETSESSIONID()}'; </script> <script src="../../soap/ajax/18.0/connection.js" type="text/javascript"></script> <script type="text/javascript"> window.onload = setupPage; alert("hi"); function log(message) { alert(message); } function setupPage() { //function contains all code to execute after page is rendered var state = { //state that you need when the callback is called output : document.getElementById("output"), startTime : new Date().getTime()}; var callback = { //call layoutResult if the request is successful onSuccess: layoutResults, //call queryFailed if the api request fails onFailure: queryFailed, source: state}; sforce.connection.query( "Select Id, Name, Industry From Account order by Industry", callback); } function queryFailed(error, source) { source.output.innerHTML = "An error has occurred: " + error; } /** * This method will be called when the toolkit receives a successful * response from the server. * @queryResult - result that server returned * @source - state passed into the query method call. */ function layoutResults(queryResult, source) { if (queryResult.size > 0) { var output = ""; The AJAX Toolkit Sample Visualforce Page Using the AJAX Toolkit //get the records array var records = queryResult.getArray('records'); //loop through the records and construct html string for (var i = 0; i < records.length; i++) { var account = records[i]; output += account.Id + " " + account.Name + " [Industry - " + account.Industry + "]<br>"; } //render the generated html string source.output.innerHTML = output; } } </script> <div id="output"> </div> </apex:page>

 

 I cannot see any output not even that alert("hi") message!!!

 

Best Answer chosen by Admin (Salesforce Developers) 
Jon Mountjoy_Jon Mountjoy_

Sure - check out the Force.com Workbook - http://developer.force.com/workbook

Look at Tutorial 7

 

Notice how in the Visualforce it has something like this, which iterates over the results for display:

 

<apex:dataTable value="{!products}" var="pitem" rowClasses="odd,even">

 

The {!products} is the key.  This will automatically call a method getProducts() in the controller, which they've got as:

 

 

public DisplayMerchandise[] getProducts() { if (products == null) {products = new DisplayMerchandise[]{}; for (Merchandise__c item : [SELECT id, name, description__c, price__c FROM Merchandise__c WHERE Total_Inventory__c > 0]) {products.add(new DisplayMerchandise(item)); } } return products; }

 

Check out the Visualforce developer guide for even more.  

 

 

 

All Answers

imuinoimuino

You have an error on line 40 where it says:

 The AJAX Toolkit Sample Visualforce Page Using the AJAX Toolkit

It should be

//The AJAX Toolkit Sample Visualforce Page Using the AJAX Toolkit

I mean you need to comment that line or the script get broken

 

 If you are using Firefox you can download the firebug plug-in, you can seethe javascript error with it.

ocortinasocortinas

I see one issue on your code and is this one (let me know if this solve your issue):

  • Comment this line and then your page should be working now

The AJAX Toolkit Sample Visualforce Page Using the AJAX Toolkit
PrazPraz

tnx guys

 

one more help is appreciable:

 

How can I call and use Apex variable and SObject variable in AJAX?

 

As I am trying here to  write

 

 

{!View.Ppack__Start_Date__c}==> sObject field or {!StartDate} and {!endDate} as Apex class properties

 

 

 

 It has stop responding like getting no value or on alert shwoing nothing not even other properties in alert which was showing earlier.

 

Regards

 

Praz

 

ocortinasocortinas
can you copy/paste part of the code you add and that's not working for you?
PrazPraz

<apex:page standardController="TCI__c" title="View COntroller" extensions="ChannelViewController"> <html> <head> <script type="text/javascript"> var __sfdcSessionId = '{!GETSESSIONID()}'; </script> <script src="../../soap/ajax/18.0/connection.js" type="text/javascript"></script> <script type="text/javascript"> window.onload = setupPage; var Hi="Hi"; var startTime = new Date.getTime(); var output = document.getElementById("output"); function setupPage() { alert(Hi); var endDate = new Date() var startDate = new Date(endDate.getDate()-91); alert(endDate); alert(startDate); alert(__sfdcSessionId); alert({!View.Pack__Start_Date__c}); try { var queryResult = sforce.connection.query("select pack__Date_of_Entry__c,pack__Sales__c,pack__Product__c from pack__TCI__c where pack__Date_of_Entry__c>="+{!startDate}+" AND pack__Date_of_Entry__c <="+{!endDate}+" AND pack__Report_Type__c="+report_type); alert(queryResult); layoutResults(queryResult, output); } catch(error) { alert(error); queryFailed(error, output); } } function queryFailed(error, output) { output.innerHTML = "<font color=red>An error has occurred:</font> <p>" + error; } function layoutResults(queryResult, output) { if (queryResult.size > 0) { var output = ""; var records = queryResult.getArray('records'); for (var i = 0; i < records.length; i++) { var pack= records[i]; output += pack.pack__Date_of_Entry__c+ " " + pack.pack__Sales__c + pack.pack__Product__c + "<BR>"; } output.innerHTML = output } else { output.innerHTML = "No records matched."; } } </script> </head> <body> <div id="output"> </div> </body> </html> </apex:page>

 

two problems here..when I am trying to put the alert for the SObject field the whole code is showing no response  and I am not able to get any value from start date and end Date and also no inner html is also getting set to the div..please see

 

 

public class ChannelViewController { public pack__TCI__c channelView = new pack__TCI__c(); public pack__TCI__c getChannelView (){ return this.channelView ; } public void setChannelView (pack__TCI__c channelView ){ this.channelView =channelView ; } public Date startDate = date.today(); public Date endDate = startDate.addDays(6); public ChannelViewController(ApexPages.StandardController controller) { this.channelView.pack__Start_Date__c = date.today(); }

 so I have given code for both visualforce and apex..please check where to correct

 

 

Jon Mountjoy_Jon Mountjoy_

Praz, why you are using the Ajax toolkit to do the query - ie. sforce.connection.query ....

 

I suggest simply putting the query in your controller.  Much faster. 

PrazPraz

Hi,

 

I need to get the grid of information or the query result on load...how can I do that...

 

1>How can I do queries on load in apex class?

2>How to show them in the page on load?

 

Can you give me some examples...

Jon Mountjoy_Jon Mountjoy_

Sure - check out the Force.com Workbook - http://developer.force.com/workbook

Look at Tutorial 7

 

Notice how in the Visualforce it has something like this, which iterates over the results for display:

 

<apex:dataTable value="{!products}" var="pitem" rowClasses="odd,even">

 

The {!products} is the key.  This will automatically call a method getProducts() in the controller, which they've got as:

 

 

public DisplayMerchandise[] getProducts() { if (products == null) {products = new DisplayMerchandise[]{}; for (Merchandise__c item : [SELECT id, name, description__c, price__c FROM Merchandise__c WHERE Total_Inventory__c > 0]) {products.add(new DisplayMerchandise(item)); } } return products; }

 

Check out the Visualforce developer guide for even more.  

 

 

 

This was selected as the best answer
PrazPraz

Tnx :)

 

I have another problem:

 

I can see the date in text in the following way

 

 

Thu Mar 11 00:00:00 GMT 2010

 I want to see it in the following way

 

yyyy:mm:dd

 

How can I format it?


 

Jon Mountjoy_Jon Mountjoy_

Hi Praz

 

I'm not sure on that.  I've seen it somewhere on the boards - I'd just do a search.

 

Jon 

ocortinasocortinas
If you check on Apex Tutorial Basics page under Datetime Methods exists a format function that could help you on that:
format    String dateFormat    String    Returns a Datetime as a string using the supplied Java simple date format and the local time zone of the current user. If the time zone cannot be determined, GMT is used. For example:
datetime myDT = Datetime.now();
String myDate = myDT.format('h:mm a');
Java simple date format: http://java.sun.com/j2se/1.4.2/docs/api/java/text/SimpleDateFormat.html

Let me know if this works for you and that case mark as solved to help pthers to find this solutions.
Regards.

PrazPraz

I am using the following format to display

 

 

<apex:dataTable value="{!listing}" var="item" rowClasses="odd,even">
<apex:column headerValue="Start Date" style="width:100px">
<apex:outputText value="{!item.Date_of_Entry__c}"/>
</apex:column>
<apex:column headerValue="Sales" style="width:100px">
<apex:outputText value="{!item.Sales__c}"/>
</apex:column>
<apex:column headerValue="Opportunity" style="width:100px">
<apex:outputText value="{!item.Opportunity__c}"/>
</apex:column>
</apex:dataTable>

 

 and corresponding class is

 

 

public Pack__TCI__c[] getListing(){ listing= new Pack__TCI__c[]{}; List<Pack__TCI__c> tcis = [select Pack__Date_of_Entry__c,Pack__Sales__c,Pack__Opportunity__c from Zymepack__TCI__c limit 13]; if(tcis!=NULL){ for(Pack__TCI__c tci:tcis){ listing.add(new Pack__TCI__c(Pack__Date_of_Entry__c = tci.Pack__Date_of_Entry__c, Pack__Sales__c = tci.Pack__Sales__c, Pack__Opportunity__c = tci.Pack__Opportunity__c)); } } return listing; }

 

 so how can I format the sObject field here?

 

 

imuinoimuino

Lets say you have a var on your controller named actualDate if you want to format it on the vf page

you need to do the next

 

<apex:outputText value="{0,date,MM,dd,yyyy}">
      <apex:param value="{!actualDate}" />
</apex:outputText>

PrasenPrasen
Tnx man :manhappy: