So beheben Sie das durch die eingebettete Analyse verursachte Visualforce-Problem mit dem Überlauf der Navigationsleiste: reportCharts

Question

Entschuldigung für den langen Titel. Ich habe diese Frage vor etwa einer Woche im offiziellen Salesforce-Entwicklerforum gepostet und habe immer noch keine Antworten erhalten, also dachte ich, ich würde mich hier erkundigen, ob ich noch mehr Glück habe.

Ich habe eine Visualforce-Seite. Es funktionierte gut, bis ich ein eingebettetes Piecharts in der oberen rechten Ecke hinzufügte. Nachdem ich diese hinzugefügt, bemerkte ich, dass die navbar begann aus seinem Behälter zu verschütten (es normalerweise soll mich nach unten für weitere Menüpunkte zu einem Rückgang konvertieren)

Hier ist mein VF-Code:

<apex:page controller="SalesGoalsController" sidebar="false"> 
    <apex:stylesheet value="{!$Resource.MapStyles}" /> 
    <apex:includeScript value="{!$Resource.MapSettings}"/> 
    <apex:includeScript value="{!$Resource.MapTabs}" loadonReady="true"/> 

    <script type="text/javascript"> 
      // some javascript stuff that initializes some things here 
      window.onload = function() { 
       // a bunch of Visualforce.remoting.Manager.invokeAction() 
       // calls that do not manipulate any elements on the page 
       // whatsoever and i would never have any reason to suspect 
       // that this would be what is causing this issue because 
       // literally all these calls do is populate some arrays 
      }; 
    </script> 

    <div class="pagelabel">Maps</div> 

    <div id="tabsContainer"> 
     <ul class="tabs"> 
      <li class="tab"><a href="#tab1">tab1</a></li> 
      <li class="tab"><a href="#tab2">tab2</a></li> 
     </ul>   
    </div> 

    <div id="tab1" class="tabcontent"> 
     <div class="topleft"> 
      <div id="tab1Logo"> 
       <apex:image url="{!$Resource.tab1LogoSmall}"/> 
      </div> 
     </div> 

     <div class="topright"> 
      <div id="piechart-world" class="piechart"> 
       <analytics:reportChart reportId="areportIDgoeshere" size="tiny" showRefreshButton="false"> 
       </analytics:reportChart> 
      </div> 
      <div id="piechart-us" class="piechart"> 
       <analytics:reportChart reportId="areportIDgoeshere" size="tiny" showRefreshButton="false"> 
       </analytics:reportChart> 
      </div> 
      <div id="piechart-ca" class="piechart"> 
       <analytics:reportChart reportId="areportIDgoeshere" size="tiny" showRefreshButton="false"> 
       </analytics:reportChart> 
      </div> 
     </div> 

     <div class="ChartsContainer" > 
      <font size="3" color="blue"> 
       <p>Opportunities sold this year</p> 
       <select id="tab1ChartView" onchange="setView(this)"> 
        <option value="world">World</option> 
        <option value="usa">USA</option> 
        <option value="canada">Canada</option> 
       </select> 
      </font> 
      <div id="tab1SalesChart" class="saleschart"> 
      </div> 
      <font size="3" color="blue"> 
       <p>RFQ received this year</p> 
      </font> 
      <div id="RFQChart" class="saleschart"></div> 
     </div> 
    </div> 

    <div id="tab2" class="tabcontent"> 
     <div class="topleft"> 
      <div id="tab2Logo"> 
       <apex:image url="{!$Resource.tab2LogoSmall}"/> 
      </div> 
     </div> 

     <div class="topright"> 
      <div id="piechart-world" class="piechart"> 
       <analytics:reportChart reportId="aReportIDgoeshere" size="tiny" showRefreshButton="false"> 
       </analytics:reportChart> 
      </div> 
      <div id="piechart-us" class="piechart"> 
       <analytics:reportChart reportId="aReportIDgoeshere" size="tiny" showRefreshButton="false"> 
       </analytics:reportChart> 
      </div> 
      <div id="piechart-ca" class="piechart"> 
       <analytics:reportChart reportId="aReportIDgoeshere" size="tiny" showRefreshButton="false"> 
       </analytics:reportChart> 
      </div> 
     </div> 

     <div class="ChartsContainer" > 
      <font size="3" color="blue"> 
       <p>Opportunities sold this year</p> 
       <select id="tab2ChartView" onchange="setView(this)"> 
        <option value="world">World</option> 
        <option value="usa">USA</option> 
        <option value="canada">Canada</option> 
       </select> 
      </font> 
      <div id="tab2SalesChart" class="saleschart"> 
      </div> 
     </div> 
    </div> 
</apex:page> 

Hier ist meine CSS:

ul.tabs { 
    overflow: hidden; 
    border-top: none; 
    border-left: none; 
    border-right: none; 
    border-bottom: 3px solid; 
    border-color: #1797C0; 
    padding: 0px; 
    margin: 0px; 
    margin-bottom: 10px; 
} 

li.tab { 
    list-style-type: none; 
    float: left; 
    display; inline; 
    background-color: inherit; 
    border: none; 
    outline: none; 
    cursor: pointer; 
    padding: 0px; 
    margin: 0px; 
    transition: 0.3s; 
} 

.tabs a { 
    padding: 5px 10px; 
    font-weight: bold; 
    display: inline-block; 
    background: #fff; 
    color: #000; 
    text-decoration: none; 
} 

.tabs a:hover { 
    text-decoration: none; 
    color: #1797C0; 
} 

.tabs a.active { 
    background: #1797C0; 
    color: #fff; 
    text-decoration: none; 
} 

.topleft { 
    float: left; 
    position: relative; 
    width: 100%; 
    margin-bottom: 10px; 
} 

.topright { 
    float: right; 
    position:absolute; 
    right:10px; 
    z-index: 11; 
} 

.piechart { 
    display: none; 
} 

.pagelabel { 
    position: relative; 
    font-size: 1.5em; 
    color: #222; 
    margin: 10px; 
} 

.saleschart { 
    width: 90vw; 
    height: 90vh; 
    padding-top: 15px; 
} 

.logo { 
    display: inline; 
    float: left; 
} 

.chartheader { 
    color: #0000ff; 
    font-size: 1.3em; 
} 

.maptotal { 
    font-size: 1.5em; 
    color: #222; 
    display: inline; 
    float: right; 
    width: 60%; 
} 

ich eine Javascript-Funktion, die im Grunde alle außer einer der Kreisdiagrammen zu Display setzt: keine (Die angezeigte ist die Anzeige: Block), abhängig davon, auf welcher Registerkarte sich der Benutzer befindet. Ich weiß, dass das ziemlich hacky ist, aber ich konnte keinen besseren Weg finden, es zu tun.

function showPiechart(piechart_name) { 
    var elem_id = "piechart-" + piechart_name; 
    for (var i=0, elem; elem = piechart_divs[i]; i++) { 
     if (elem.id == elem_id) { 
      elem.style.display = "block"; 
     } else { 
      elem.style.display = "none"; 
     }; 
    }; 
}; 

Answer 1

Also, für was auch immer stumm Grund, wenn Sie einige Visualforce.remoting.manager.invokeAction(); Anrufe innerhalb eines window.onload = function() { ... } Block gemacht wird, es wird Ihr navbar brechen. In der Tat, nach allem, was ich weiß, könnte dies passieren, auch wenn Sie nicht Visualforce.remoting.manager.invokeAction(); Anrufe machen. Es kann sogar vorkommen, dass der Block nur einige console.log("hello world"); Anweisungen aufruft. Um diesen ärgerlich dummen Fehler zu umgehen, müssen Sie stattdessen etwas wie window.onready verwenden. Hoffe das hilft jedem anderen, der auf ein ähnliches Problem stößt, so dass sie nicht 6 Tage damit verbringen, sich die Haare auszuziehen, um es herauszufinden, wie ich es getan habe!

Update: sieht aus wie jemand bereits erklärt hat, warum nichts mit window.onload in einer Visualforce-Seite zu tun ist nein bueno. Sie können hier nachlesen: https://salesforce.stackexchange.com/questions/184589/window-onload-function-disables-inline-edit-capabilities-on-custom-vf-page

Die dünne ist, dass Salesforce bereits window.onload an seinen eigenen Mist hakt, der jede Funktion enthält, die sie haben, die Navbar zusammenzufalten. Wenn Sie es selbst in Ihre VF-Seite einhaken, überschreibt das, was sie getan haben, und so wird ihr Mist nie ausgeführt. Je mehr Sie wissen ...