Ensuring auto-refresh of Standard page after updates in child popup custom Visualforce window

Operational convenience is essential for efficient functioning of any software application. When you are accessing the Standard page on Salesforce, there could be several times you may need custom development which can be done using the child custom Visualforce page that is accessed with a click of a button on the Standard page. Ideally, the updates made in the child popup window should automatically reflect in the parent (standard page) window without you having to refresh the parent window. This will ensure quick access to updates.

A possible method to achieve the above stated result (auto refresh of Standard page after changes made in popup child custom Visualforce window) is to use JavaScript from custom Visualforce page. However, Salesforce will not permit auto refresh of the Standard page to avoid Cross Site Scripting Forgery. In order to overcome the issue, the following two solutions are recommended –

XMLHttpRequest cannot load https://cs9.salesforce.com/_ui/common/request/servlet/JsLoggingServlet. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://c.cs9.visual.force.com‘ is therefore not allowed access.

a. Redirecting the Standard page to Visualforce page

A simple and easy approach to avoid the cross site scripting error is to redirect the Standard page to the custom Visualforce page. After making updates on the custom Visualforce page, the customer will be directed back to the standard page that will reflect the updates made.

b. Including Visualforce page into Bootstrap or JQuery Modal

Another solution is to include the Visualforce page into Modal Div Element as iframe. As iframe is considered as a part of the Standard page, it is quite simple to write a JavaScript to manipulate the Standard page.

blog1-screen

The below is the code that will trigger when the custom Visualforce page button is clicked –

On Click Take Survey Button will execute following function

{!REQUIRESCRIPT('/soap/ajax/26.0/connection.js')}

{!REQUIRESCRIPT(‘/js/functions.js’)}

{!REQUIRESCRIPT(‘/resource/jQueryMin’)}

{!REQUIRESCRIPT(‘/resource/BootstrapMin’)}

var fileref=document.createElement(“link”);

fileref.setAttribute(“rel”, “stylesheet”);

fileref.setAttribute(“type”, “text/css”);

fileref.setAttribute(“href”,

“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css”);

if (typeof fileref!=”undefined”)

document.getElementsByTagName(“head”)[0].appendChild(fileref);

var modalElement = document.createElement(“div”);

var innerModal = ‘<div class=”modal fade” id=”myModal” tabindex=”-1″ role=”dialog”‘ +  ‘aria-‘ +

‘labelledby=”myModalLabel” aria-hidden=”true”>’ +

‘<div class=”modal-dialog”> ‘ +

‘<div class=”modal-content”>’ +

‘<div class=”modal-header”> ‘ +

‘ <h4 class=”modal-title” id=”myModalLabel”>Assign Queue for Call List</h4> ‘ +

‘</div> ‘ +

‘<div class=”modal-body”> <iframe src=”/apex/CTTestPage?’ +

‘id={!Account.Id}”‘ + ‘style = ” display: block;’ +

‘margin-left: auto;’ +

‘margin-right: auto;”> ‘ +

” +

‘</iframe>’ +

‘ </div> ‘ +

‘<div class=”modal-footer”> ‘ +

‘ <button type=”button” class=”btn btn-default” data-dismiss=”modal” ‘ + ‘onclick =’ +  ‘

“window.location.reload();”>Close</button> ‘ +

” +

‘</div> ‘ +

‘</div> ‘ +

‘</div> ‘ +

‘</div>’;

modalElement.innerHTML = innerModal;  // Add HTML Elements into Div

document.body.appendChild(modalElement);  // Append new element into body

$(‘#myModal’).modal({backdrop: ‘static’})

$(‘#myModal’).modal(‘show’);  // method to call modal element

After Clicking Take Survey Button we will get following BootStrap Modal

blog1-screen2

The visual force Page is Embedded into Modal div into IFrame