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
JeeTJeeT 

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 
<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
 

Best Answer chosen by JeeT
JeeTJeeT
here is my work around, it could be a hack,but making this as the solution for the time being.

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.
Developer Mode of c3JS Charts
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: 
window.onload = function () { 
    $(document).find('svg').each(function(){ 
        var svgHeight = $(this).attr("height"); var svgWidth = $(this).attr("width");	
        $(this).find("rect").each( function() { $(this).attr('width',svgHeight).attr('height','266'); return false;});
    });
};
This worked for me. Please comment if it worked for you.

All Answers

AshlekhAshlekh
Hi Jeet,

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 
<script src="../resource/chartLib/d3.v3.min.js" charset="utf-8">
</script> <script src="../resource/chartLib/c3.min.js" charset="utf-8"></script>
To 
<apex:includeScript value="{!$Resource.FileName}"/>

or 

<apex:includeScript value="{!URLFOR($Resource.ZipFilename ,'Filepath'}"/>

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
 
JeeTJeeT
Hi Ashlekh, Thanks for your reply. I agree for the best practices, I have also followed the same, but it didn't help. Thank you.. * Prasannajeet*
Thad HorningThad Horning
This started happening in our org also. Did you find a workaround for it?
JeeTJeeT

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.
JeeTJeeT
here is my work around, it could be a hack,but making this as the solution for the time being.

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.
Developer Mode of c3JS Charts
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: 
window.onload = function () { 
    $(document).find('svg').each(function(){ 
        var svgHeight = $(this).attr("height"); var svgWidth = $(this).attr("width");	
        $(this).find("rect").each( function() { $(this).attr('width',svgHeight).attr('height','266'); return false;});
    });
};
This worked for me. Please comment if it worked for you.
This was selected as the best answer