I need some help understand how JavaScript and Visualforce interact.

I have a eventListener that works perfectly when the DOM is loaded:

window.addEventListener('DOMContentLoaded', function() {
if ('{!bvs.Status__c}' != 'Completed') {
    document.getElementById("populatedChart").style.display = "none";
if ('{!bvs.Status__c}' == 'Completed') {
    document.getElementById("oldPullreportbutton").style.display = "none";
if ('{!bvs.CompanyName__c}'.length > 0) {

I also have some code that tells the div to reRender after a button click:

<apex:commandLink action="{!pullReport}" onclick="showCreditPull()" oncomplete="stopSpinner()" value="Pull Report"/>

function showCreditPull() {
    var panel = $('.spinBorder');
    var spinner = panel.find(".business-loading-icon");

function stopSpinner(){
  var panel = $('.spinBorder');
  var spinner = panel.find(".business-loading-icon");
  rerenderData();//this is an actionFunction that reRenders the div
  if ('{!bvs.Status__c}' != null){
      document.getElementById("oldPullreportbutton").style.display = "none";
      $("#populatedChart").replaceWith( "<p>Error!</p>" ); 

My question is- why does is {!bvs.Status__c} in stopSpinner() not recognized? No matter what the status is, it runs through and hides the oldPullreportbutton. It's acting like it doesn't recognize the binded {!bvs.Status__c}. But it is able to be read with the eventListener.

UPDATE: Code from inspect:

    document.getElementById("oldPullreportbutton").style.display = "none";
    $("#populatedChart").replaceWith( "<p>Error!</p>" );
    console.log('got out 1');

'{!bvs.Status__c}' is guaranteed to never be null, because even if Status is an empty string, your code effectively evaluates as:

if('' != null) {

Clearly, "empty string" is not the same as null, so this condition is always true.

Instead, consider using:

if({!ISBLANK(bvs.Status__c)}) {

Which will evaluate to this when the string is empty:

if(true) {

And will evaluate to this otherwise:

if(false) {
  • ({!ISBLANK(bvs.Status__c)}) is still coming back true no matter what the status is. When the page loads, it loads this conditional as 'true' and it does not change, even if I change the status__c value or not. – Olivia Nov 14 '16 at 19:23
  • This leads me to believe that the JS is running on the initial page load and is saving the values ahead of time. Although it does not take any action until I call it. Does this sound correct? – Olivia Nov 14 '16 at 19:24
  • @Olivia You have to "rerender" the script if you want the latest values. What you're trying to do is pretty fragile as is. – sfdcfox Nov 14 '16 at 19:35
  • @ssfdcfox, I do rerender the script with rerenderData();//this is an actionFunction that reRenders the div. I have attempted actionStatus but this does not allow the correct end result either. Is there another way to make it less fragile? – Olivia Nov 14 '16 at 19:47
  • 1
    @Olivia I generally recommend Using either pure Visualforce or pure JavaScript. Trying to mix the two isn't particularly nice in most cases. I'm still not sure exactly what you're trying to do (I've seen a few of your questions), but you might consider either using a RemoteAction method and keep it all in JavaScript, or do the showing/hiding stuff using Visualforce's "rendered" and "reRender" attributes. – sfdcfox Nov 14 '16 at 20:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.