You need to sign in to do that
Don't have an account?
JeeT
JavaScript is not working with <apex:form> tag in Winter 16 Release
Hi Guys,
A quick help will be much appreciated, i am going to post one piece of VF code. This was working fine before Winter16 Release; Stange that its not working now.
For one of our application i am using c3js(http://c3js.org) for the chart generation. for which i need some user input to refresh the chart.
So i am using a picklist and a command-button to accomplish this.
After a long work arround i get to know that <apex:form> tag is causing ERROR.
if i will remove the <apex:form> tag its working fine...
Visualforce Code
A quick help will be much appreciated, i am going to post one piece of VF code. This was working fine before Winter16 Release; Stange that its not working now.
For one of our application i am using c3js(http://c3js.org) for the chart generation. for which i need some user input to refresh the chart.
So i am using a picklist and a command-button to accomplish this.
After a long work arround i get to know that <apex:form> tag is causing ERROR.
if i will remove the <apex:form> tag its working fine...
Visualforce Code
<apex:page controller="DS_TrendingController" applyBodyTag="true" showHeader="false" docType="html-5.0"> <!-- Chart library --> <link rel="stylesheet" type="text/css" href="../resource/chartLib/c3.css"/> <apex:form> <!-- Some Inputs are required to refresh the chart, to run it for the interval of TODAY, THIS_WEEK, THIS_MONTH.. --> </apex:form> <div class="col-md-6"> <div id="barChart" style=""></div> </div> <script src="../resource/chartLib/d3.v3.min.js" charset="utf-8"></script> <script src="../resource/chartLib/c3.min.js" charset="utf-8"></script> <script> var chart2 = c3.generate({ bindto: '#barChart', data: { x : 'x', columns: [ ['x','Inprogress','Doc Submitted','Approval','Forecasting','Decission Pending','Closed lost','Closed Won',], ['Won',3,0,2,1,0,1,2,], ['Lost' ,0,-1,0,0,-1,0,0,], ], type: 'bar', groups: [ ['Won', 'Lost'] ], colors: { Won: '#00c0ef', Lost: '#dd4b39' } }, axis: { x: { type: 'category' // this needed to load string x value } }, bar: { width: { ratio: 0.3 // this makes bar width 50% of length between ticks } } }); </script> </apex:page>
How to use this JS wiht <apex:form> tag?
Thanks
Jeet
After the release of Winter 16, visualforce page is loading with some extra js libraries which conflicting with c3Js and unable to form the <rect> tag with proper height and width. follow the below highlighted; <rect> is blank !!! which is causing blank graphs.
I was trying to dig into the c3js library codes, but unable to find the "rect" formation section.
thought of to update above <rect> with proper height and width values after the DOM loads. it worked for me. yo ho :)
Just add these few lines on your page: This worked for me. Please comment if it worked for you.
All Answers
You can use the Script tag out of Form tag and it is a Best Practise. Other thing you need to change the way of including JS file.
Form To
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_javascript_intro.htm
As salesforce has change the domain of the static resources.
Here is an Artical - https://help.salesforce.com/apex/HTViewSolution?id=000213971&language=en_US
-Thanks
Ashlekh Gera
Hi Horning,
This is quit surprising change of Witner 16 release !! as well not getting any help from c3JS Team.
I have not yet received any solution. Trying with moris.js, but this api is not reaching to my app's expectation.
I have raised an issue list in gitHub (https://github.com/masayuki0812/c3/issues/1452 (https://github.com/masayuki0812/c3/issues/1452" target="_blank)).
Kindly add your comments on the issue.
After the release of Winter 16, visualforce page is loading with some extra js libraries which conflicting with c3Js and unable to form the <rect> tag with proper height and width. follow the below highlighted; <rect> is blank !!! which is causing blank graphs.
I was trying to dig into the c3js library codes, but unable to find the "rect" formation section.
thought of to update above <rect> with proper height and width values after the DOM loads. it worked for me. yo ho :)
Just add these few lines on your page: This worked for me. Please comment if it worked for you.