Visualforce Section in View Doesn't Reload Properly after field update

Hi, I created a VF page, which is meant to be a pricing calculator. It's divided into a grid using html and css and structured with apex code to allow for merge fields and inline editing. I embedded the page as a section of our opportunity object, where the calculator is supposed to live. When I first go to the page everything looks great, it loads fine and the inline editing works. Then when I click the save button that also sits inside the section the page reloads but the app doesn't. In the section where it lives there's another copy of the same page. AND inside the calculator section of that page is a preview of my source code. I'll paste my code below. It's a lot but I think we can ignore the divs and just look at the very top and very bottom. I think the answer lies there.

Also below my code, I'll add a screen shot of what it looks like when the page reloads after I save something with inline edit.

I'm a JS Dev but I'm just now learning Apex and Visualforce, so forgive me if this is obvious. But I did about an hour of googling before I got to this point so any help would be greatly apprecited. Cheers.

<apex:page standardController="Opportunity" tabStyle="Opportunity">
   
    <apex:stylesheet value="https://fonts.googleapis.com/css?family=Raleway:400,700"/>
    <style>

        h1 {
            color: blue;
            }

        .field_container {
            width: 30%;
            height: 30px;
            display: inline-block;
            margin: 0;
            border: none;
        }
        .field_container_2 {
            width: 22.5%;
            height: 30px;
            display: inline-block;
            margin: 0;
            border: none;
        }
        h3 {
            color: #000;
            margin: 10px 0 0 10px;
            font-size: 1.5em;
            font-family: Raleway;
            }
       .row_container {
            padding-bottom: 20px;
            text-align: center;
            }
      .container {
            width: 80%;
       
            }
            
            .row {
            padding-top: 15px;
            display: block;
            }
           .pbHeader {
           color: #000000 !important;
           font-family: Raleway;
           }
           field_container.inlineEditUndo {
           display: none;
           }
           select {
           max-width: 150px;
           }
           body {
               background-color: #fff !important;
           }
           .opportunityTab .secondaryPalette, .individualPalette .opportunityBlock .secondaryPalette .opportunityTab .listViewport .subNav .linkBar, .opportunityTab .mComponent .cHeader, .opportunityTab .genericTable, .opportunityTab .bSubBlock, .opportunityTab .bPageBlock {
               border: none;
               }
    </style>

  <apex:form >
  <apex:pageBlock mode="inlineEdit">
  <div class="container">
  <!-- Animation Row -->
    <div class="row_container" id="elearning_animation_row">
      <h3>eLearning and Animation</h3>
      <div class="row" id="row_1">
        <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Minutes_ELA1__c}"/><apex:facet name="header">Minutes</apex:facet></apex:pageBlock></div>
        <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Level_ELA1__c}"/><apex:facet name="header">Level</apex:facet></apex:pageBlock></div>
        <div class="field_container"><apex:pageBlock >{!Opportunity.Price_ELA1__c}<apex:facet name="header">Price</apex:facet></apex:pageBlock></div>
      </div>
      <div class="row" id="row_2">      
        <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Minutes_ELA2__c}"/><apex:facet name="header">Minutes</apex:facet></apex:pageBlock></div>
        <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Level_ELA2__c}"/><apex:facet name="header">Level</apex:facet></apex:pageBlock></div>
        <div class="field_container"><apex:pageBlock >{!Opportunity.Price_ELA2__c}<apex:facet name="header">Price</apex:facet></apex:pageBlock></div>
      </div>
      <div class="row" id="row_3">
        <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Minutes_ELA3__c}"/><apex:facet name="header">Minutes</apex:facet></apex:pageBlock></div>
        <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Level_ELA3__c}"/><apex:facet name="header">Level</apex:facet></apex:pageBlock></div>
        <div class="field_container"><apex:pageBlock >{!Opportunity.Price_ELA3__c}<apex:facet name="header">Price</apex:facet></apex:pageBlock></div>
      </div>
    </div>
    <!-- ID Row -->
    <div class="row_container" id="instructional_design_row">
      <h3>Instructional Design</h3>
      <div class="row" id="row_4">
        <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Minutes_ID1__c}"/><apex:facet name="header">Minutes</apex:facet></apex:pageBlock></div>
        <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Level_ID1__c}"/><apex:facet name="header">Level</apex:facet></apex:pageBlock></div>
        <div class="field_container"><apex:pageBlock >{!Opportunity.Price_ID1__c}<apex:facet name="header">Price</apex:facet></apex:pageBlock></div>
      </div>
      <div class="row" id="row_5">      
        <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Minutes_ID2__c}"/><apex:facet name="header">Minutes</apex:facet></apex:pageBlock></div>
        <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Level_ID2__c}"/><apex:facet name="header">Level</apex:facet></apex:pageBlock></div>
        <div class="field_container"><apex:pageBlock >{!Opportunity.Price_ID2__c}<apex:facet name="header">Price</apex:facet></apex:pageBlock></div>
      </div>
    </div>
    
 <!--  Other Row -->
    <div class="row_container" id="other_row">
      <h3>Other</h3>
      <div class="row" id="row_7">      
        <div class="field_container_2"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Project_Management__c}"/><apex:facet name="header">Level of Project Management</apex:facet></apex:pageBlock></div>
        <div class="field_container_2"><apex:pageBlock >{!Opportunity.Subtotal_PM__c}<apex:facet name="header">Project Management Price</apex:facet></apex:pageBlock></div>
        <div class="field_container_2"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Voiceover_Minutes__c}"/><apex:facet name="header">Voiceover Minutes</apex:facet></apex:pageBlock></div>
        <div class="field_container_2"><apex:pageBlock >{!Opportunity.Price_VO__c}<apex:facet name="header">Voiceover Price</apex:facet></apex:pageBlock></div>
      </div>
      <div class="row" id="row_8">      
        <div class="field_container_2"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Assessments_ELM_Creates__c}"/><apex:facet name="header">ELM Assessments</apex:facet></apex:pageBlock></div>
        <div class="field_container_2"><apex:pageBlock >{!Opportunity.Price_Assessments__c}<apex:facet name="header">Assessments Price - Total</apex:facet></apex:pageBlock></div>
        <div class="field_container_2"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Stock_Photography_Minutes__c}"/><apex:facet name="header">Stock Photography Minutes</apex:facet></apex:pageBlock></div>
        <div class="field_container_2"><apex:pageBlock >{!Opportunity.Price_Stock_Photography__c}<apex:facet name="header">Stock Photography Price</apex:facet></apex:pageBlock></div>
      </div>
      <div class="row" id="row_9">      
        <div class="field_container_2"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Assessments_Client_Provides__c}"/><apex:facet name="header">Client Assessments</apex:facet></apex:pageBlock></div>
        <div class="field_container_2"><apex:pageBlock >{!Opportunity.Price_Assessments__c}<apex:facet name="header">Assessments Price - Total</apex:facet></apex:pageBlock></div>
        <div class="field_container_2"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Script__c}"/><apex:facet name="header">Script Writing Minutes</apex:facet></apex:pageBlock></div>
        <div class="field_container_2"><apex:pageBlock >{!Opportunity.Price_Scripting__c}<apex:facet name="header">Scripting Price</apex:facet></apex:pageBlock></div>
      </div>
      <div class="row" id="row_10">      
        <div class="field_container_2"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Line_Item_Expense__c}"/><apex:facet name="header">Line Item Expense</apex:facet></apex:pageBlock></div>
        <div class="field_container_2"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Line_Item_Expense_Notes__c}"/><apex:facet name="header">Line Item Expense Notes</apex:facet></apex:pageBlock></div>
        <div class="field_container_2"></div>
         <div class="field_container_2" ><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Localization_Quote__c}"/><apex:facet name="header">Localization Quote</apex:facet></apex:pageBlock></div>
      </div>
    </div>
  <!--   Total Row -->
    <div class="row_container" id="total_row">
      <h3>Total</h3>
      <div class="row" id="row_10">
        <div class="field_container_2" ><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Total_Price__c}"/><apex:facet name="header"><strong>Total Price</strong></apex:facet></apex:pageBlock></div>
        <div class="field_container_2"></div>
        <div class="field_container_2"></div>
        <div class="field_container_2"></div>
      </div>
         <apex:inlineEditSupport event="ondblClick" showOnEdit="saveButton,cancelButton" hideOnEdit="editButton" />
    </div>
      <apex:pageBlockButtons >
                <apex:commandButton value="Save" action="{!save}" id="saveButton" />
                <apex:commandButton value="Cancel" action="{!cancel}" id="cancelButton" />
                </apex:pageBlockButtons>
</div>
  
    </apex:pageBlock>
   </apex:form>

</apex:page>

January 31, 2016
·
Answer
·
Like
0
·
Follow
1

Lakshman
Under your user profile, turn off development mode and try.
And the next thing you need to do is on your Save action add a rerender attribute and set it to the form id, something like rerender="formId". Add Id to your form.

Let us know if it helps.

January 31, 2016
·
Like
1
·
Dislike
0

Aaron Hill
Lakshman, I appreciate your response. I turned off development mode and added the rerender property to the save action but the section still rerenders as a full page. It recreates the full opportunity page within the section of the original page. Like something recursive might be happening but I can't tell. The source code doesn't appear anymore though, so that's progress. I'll leave another picture of what I'm seeing now. Is my page set up incorrectly to be a view section? Thanks.

January 31, 2016
·
Like
0
·
Dislike
0

Lakshman
I see that you are not using a extension thats why it is redirecting to the standard page after save. To fix this creat an extension class and override the save method. in the constructor of the extension class write sample code as below -

public class MyController{ Apexpages.StandardController controller; public MyController(Apexpages.StandardController c){ controller = c; } public PageReference save() { controller.save();//invoke standard Save method return null; } }
Let us know the results.

January 31, 2016
·
Like
0
·
Dislike
0

Aaron Hill
Lakshman, thanks for getting back to me again. Like I said, I'm pretty unfamiliar with Apex and MVC in general. I tried to create a controller extension using this guide: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_controller_extension.htm. It didn't work, I had no idea where to put it, I declared it as the last item in my pageBlock. I want to take more time to learn about this stuff but right now I really just need a hotfix.This was the code I created:

public class myControllerExtension { // The extension constructor initializes the private member // variable acct by using the getRecord method from the standard // controller. public myControllerExtension(ApexPages.StandardController) { public class MyController{ Apexpages.StandardController controller; public MyController(Apexpages.StandardController c){ controller = c; } public PageReference save() { controller.save();//invoke standard Save method return null; } } } }

January 31, 2016
·
Like
0
·
Dislike
0

Lakshman
Below is my working visualforce page, I kept the controller code same as yours.
<apex:page standardController="Opportunity" tabStyle="Opportunity" extensions="myControllerExtension"> <apex:stylesheet value="https://fonts.googleapis.com/css?family=Raleway:400,700"/> <style> h1 { color: blue; } .field_container { width: 30%; height: 30px; display: inline-block; margin: 0; border: none; } .field_container_2 { width: 22.5%; height: 30px; display: inline-block; margin: 0; border: none; } h3 { color: #000; margin: 10px 0 0 10px; font-size: 1.5em; font-family: Raleway; } .row_container { padding-bottom: 20px; text-align: center; } .container { width: 80%; } .row { padding-top: 15px; display: block; } .pbHeader { color: #000000 !important; font-family: Raleway; } field_container.inlineEditUndo { display: none; } select { max-width: 150px; } body { background-color: #fff !important; } .opportunityTab .secondaryPalette, .individualPalette .opportunityBlock .secondaryPalette .opportunityTab .listViewport .subNav .linkBar, .opportunityTab .mComponent .cHeader, .opportunityTab .genericTable, .opportunityTab .bSubBlock, .opportunityTab .bPageBlock { border: none; } </style> <apex:form id="formId"> <apex:pageBlock mode="inlineEdit"> <div class="container">  <div class="row_container" id="elearning_animation_row"> <h3>eLearning and Animation</h3> <div class="row" id="row_1"> <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Minutes_ELA1__c}"/><apex:facet name="header">Minutes</apex:facet></apex:pageBlock></div> <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Level_ELA1__c}"/><apex:facet name="header">Level</apex:facet></apex:pageBlock></div> <div class="field_container"><apex:pageBlock >{!Opportunity.Price_ELA1__c}<apex:facet name="header">Price</apex:facet></apex:pageBlock></div> </div> <div class="row" id="row_2"> <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Minutes_ELA2__c}"/><apex:facet name="header">Minutes</apex:facet></apex:pageBlock></div> <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Level_ELA2__c}"/><apex:facet name="header">Level</apex:facet></apex:pageBlock></div> <div class="field_container"><apex:pageBlock >{!Opportunity.Price_ELA2__c}<apex:facet name="header">Price</apex:facet></apex:pageBlock></div> </div> <div class="row" id="row_3"> <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Minutes_ELA3__c}"/><apex:facet name="header">Minutes</apex:facet></apex:pageBlock></div> <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Level_ELA3__c}"/><apex:facet name="header">Level</apex:facet></apex:pageBlock></div> <div class="field_container"><apex:pageBlock >{!Opportunity.Price_ELA3__c}<apex:facet name="header">Price</apex:facet></apex:pageBlock></div> </div> </div>  <div class="row_container" id="instructional_design_row"> <h3>Instructional Design</h3> <div class="row" id="row_4"> <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Minutes_ID1__c}"/><apex:facet name="header">Minutes</apex:facet></apex:pageBlock></div> <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Level_ID1__c}"/><apex:facet name="header">Level</apex:facet></apex:pageBlock></div> <div class="field_container"><apex:pageBlock >{!Opportunity.Price_ID1__c}<apex:facet name="header">Price</apex:facet></apex:pageBlock></div> </div> <div class="row" id="row_5"> <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Minutes_ID2__c}"/><apex:facet name="header">Minutes</apex:facet></apex:pageBlock></div> <div class="field_container"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Level_ID2__c}"/><apex:facet name="header">Level</apex:facet></apex:pageBlock></div> <div class="field_container"><apex:pageBlock >{!Opportunity.Price_ID2__c}<apex:facet name="header">Price</apex:facet></apex:pageBlock></div> </div> </div>  <div class="row_container" id="other_row"> <h3>Other</h3> <div class="row" id="row_7"> <div class="field_container_2"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Project_Management__c}"/><apex:facet name="header">Level of Project Management</apex:facet></apex:pageBlock></div> <div class="field_container_2"><apex:pageBlock >{!Opportunity.Subtotal_PM__c}<apex:facet name="header">Project Management Price</apex:facet></apex:pageBlock></div> <div class="field_container_2"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Voiceover_Minutes__c}"/><apex:facet name="header">Voiceover Minutes</apex:facet></apex:pageBlock></div> <div class="field_container_2"><apex:pageBlock >{!Opportunity.Price_VO__c}<apex:facet name="header">Voiceover Price</apex:facet></apex:pageBlock></div> </div> <div class="row" id="row_8"> <div class="field_container_2"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Assessments_ELM_Creates__c}"/><apex:facet name="header">ELM Assessments</apex:facet></apex:pageBlock></div> <div class="field_container_2"><apex:pageBlock >{!Opportunity.Price_Assessments__c}<apex:facet name="header">Assessments Price - Total</apex:facet></apex:pageBlock></div> <div class="field_container_2"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Stock_Photography_Minutes__c}"/><apex:facet name="header">Stock Photography Minutes</apex:facet></apex:pageBlock></div> <div class="field_container_2"><apex:pageBlock >{!Opportunity.Price_Stock_Photography__c}<apex:facet name="header">Stock Photography Price</apex:facet></apex:pageBlock></div> </div> <div class="row" id="row_9"> <div class="field_container_2"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Assessments_Client_Provides__c}"/><apex:facet name="header">Client Assessments</apex:facet></apex:pageBlock></div> <div class="field_container_2"><apex:pageBlock >{!Opportunity.Price_Assessments__c}<apex:facet name="header">Assessments Price - Total</apex:facet></apex:pageBlock></div> <div class="field_container_2"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Script__c}"/><apex:facet name="header">Script Writing Minutes</apex:facet></apex:pageBlock></div> <div class="field_container_2"><apex:pageBlock >{!Opportunity.Price_Scripting__c}<apex:facet name="header">Scripting Price</apex:facet></apex:pageBlock></div> </div> <div class="row" id="row_10"> <div class="field_container_2"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Line_Item_Expense__c}"/><apex:facet name="header">Line Item Expense</apex:facet></apex:pageBlock></div> <div class="field_container_2"><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Line_Item_Expense_Notes__c}"/><apex:facet name="header">Line Item Expense Notes</apex:facet></apex:pageBlock></div> <div class="field_container_2"></div> <div class="field_container_2" ><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Localization_Quote__c}"/><apex:facet name="header">Localization Quote</apex:facet></apex:pageBlock></div> </div> </div>  <div class="row_container" id="total_row"> <h3>Total</h3> <div class="row" id="row_10"> <div class="field_container_2" ><apex:pageBlock mode="inlineEdit"><apex:outputField value="{!Opportunity.Total_Price__c}"/><apex:facet name="header"><strong>Total Price</strong></apex:facet></apex:pageBlock></div> <div class="field_container_2"></div> <div class="field_container_2"></div> <div class="field_container_2"></div> </div> <apex:inlineEditSupport event="ondblClick" showOnEdit="saveButton,cancelButton" hideOnEdit="editButton" /> </div> <apex:pageBlockButtons > <apex:commandButton value="Save" action="{!save}" id="saveButton" reRender="formId"/> <apex:commandButton value="Cancel" action="{!cancel}" id="cancelButton" /> </apex:pageBlockButtons> </div> </apex:pageBlock> </apex:form> </apex:page>

Let me know if it works now.

February 1, 2016
·
Like
0
·
Dislike
0

Aaron Hill
Error: Apex class 'myControllerExtension' does not exist

That's what gets returned when I use this code. Not sure why it's different.

February 1, 2016
·
Like
0
·
Dislike
0

Lakshman
You need to create your class myControllerExtension, you said you already created it ?

public class myControllerExtension { // The extension constructor initializes the private member // variable acct by using the getRecord method from the standard // controller. public myControllerExtension(ApexPages.StandardController) { public class MyController{ Apexpages.StandardController controller; public MyController(Apexpages.StandardController c){ controller = c; } public PageReference save() { controller.save();//invoke standard Save method return null; } } } }

February 1, 2016
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Visualforce Section in View Doesn't Reload Properly after field update

You need to sign in to do that.