Popup form on any page launch editable popup for any form from any page

So I needed to find a way to launch an existing PHPR pop-up form on a report page that opened a edit form using one of my existing forms in the same PHPR project. Unfortunately reports don't offer any popups for Add/Edit since it's not relevant to the report. However, I still needed to be able to alter some records based on the data that was being displayed in my reports list of results.

So I found this post by PHPR folks that shows you how to "Displaying a page in a popup window" http://xlinesoft.com/blog/2013/04/25/displaying-a-page-in-a-popup-window/'

Using that as a basis I was able to create clickable popups attached to each line in my report as follows:

Step 1:
Using the "custom files" capability inside PHPRunner in the visual editor tab I created a new js file titled "manual_popup.js" in a newly created folder I decided to name "async". Here are the file contents:

//http://xlinesoft.com/blog/2013/04/25/displaying-a-page-in-a-popup-window/
function displayPopup(params)
{
        var pageid=1;
        var pageObj = Runner.pages.PageManager.getById(pageid);
        args = {
                bodyContent: "<iframe frameborder='0' id='popupIframe" + pageid + "' style='width: 100%; height: 100%; border: 0;'></iframe>",
                footerContent: "<span> </span>",
                headerContent: params.headerContent,
                centered: true,
                render: true,
                width: params.width ? params.width : params.popUpWidth,
                height: params.height ? params.height : params.popUpHeight
        },
        afterCreateHandler = function(win) {
                var bodyNode = $(win.bodyNode.getDOMNode()),
                iframeNode = $("iframe#popupIframe" + pageid, bodyNode);
 
                iframeNode.load(function() {
                        if (Runner.isChrome) {
                                bodyNode.addClass("noScrollBar");
                        }
                win.show();     
 
                }).attr("src", params.url);
        },
        afterCloseHandler = params.afterClose;
 
        if (Runner.isChrome) {
        $("< style type='text/css'> .yui3-widget-bd::-webkit-scrollbar {display:none;} < /style>").appendTo("head");
        }
         
        Runner.pages.PageManager.createFlyWin.call(pageObj, args, true,
        afterCreateHandler, afterCloseHandler);
}
 //Note: I removed the other function call here on the example given by PHPR docs and placed it in the JSonload event to allow this script to become reusable throughout entire app!

Step 2:
On the page where you need to have popups launch from add a custom php snippet right after your header section (so we can refer to the file we created in step 1). Obviously use your own folder path to ensure it's fetching it in the location you created the js file.

echo '<script src="async/manual_popup.js" type="text/javascript"></script>';

Step 3:
In the report's visual editor page, I chose the field I wanted to make clickable into a popup and edited the control to "View as->custom". In there I added this:

//OrderID is the data field that is coming from my report and what I am using to identify the specific records I want to open in popup edit form
$value = "<span style='margin-left:35px;'><a class='edit_category' href='#' data-orderid='".$data['OrderID']."'>edit cat</a></span>";

Step 4:
In the report's JS onload event, I addded the following:

//This approach lets us reuse async/manual_popup.js universally and make specific functions for specific pages here :-)
$('.edit_category').click(function(){
        //console.log($(this).data("orderid"));
        params = {
                                url: 'my_special_order_form_edit.php?editid1=' + $(this).data("orderid"),
                                afterClose: function(win) {
                                        win.destroy(true);
                                        },
                                headerContent: 'Edit Order Advertiser Category',
                                popUpWidth: 600,
                                popUpHeight: 850
        };

        displayPopup(params); //calling the function defined in out async/manual_popup.js
}); 

Step 5:
In the edit form that opens up once report row is clicked, I added to the "After Record Added" event the following code to make it close automatically once saved:

echo '<script type="text/javascript" src="include/loadfirst.js"></script>
<script>
$(document).ready(function() {
 
window.parent.document.location.reload(); //Do this so TOC report page reloads in order for us to see the changes realtime

/* This recommended PHPR code below is only good for closing popup window but does not refresh parent!
$(".yui3-button-close", window.parent.document).trigger("click");
$(".yui3-panel-content", window.parent.document).remove();
*/


});
</script>';
 exit();

Step 6:
Done!


You can pretty much use this throughout any other PHPR pages.. not just reports :-)