0

I have a Visualforce component that was a Visualforce page, but altered to be a component so that it could be added to a popup on another page.

The popup works fine, however I cannot get it to 'clear' or 'refresh' on button click so that all user data entered is wiped out.

I tried an action function to rerender the outputPanel that contains my component, but that refreshed the entire page...

I tried an apex:commandButton to reRender, but that fails.

Code so far:

    <div id="createMeetingRequest" style="display: none;">
        <apex:outputPanel id="meetingRequestOP">
            <div class="slds-scope">
                <c:CreateMeetingRequest />
            </div>
        </apex:outputPanel>
        <apex:form>
            <apex:commandButton reRender="{!$Component.meetingRequestOP}"></apex:commandButton>
        </apex:form>
    </div>

Then the following image shows what happens when I push the commandButton. My fields are not longer styled, and all this garbage appears at the bottom...

enter image description here

How can I 'refresh' a component so that it is recreated the next time the user opens the popup so all the information is wiped out?

EDIT: here is some component code:

<apex:component controller="CalendarData" extensions="MeetingRequestController"  >

    <!--<head>
        <link rel="stylesheet" href="{!URLFOR($Resource.kendoUI, 'kendo-ui/styles/kendo.common.min.css')}"/>
        <link rel="stylesheet" href="{!URLFOR($Resource.kendoUI, 'kendo-ui/styles/kendo.common-material.min.css')}"/>
        <link rel="stylesheet" href="{!URLFOR($Resource.kendoUI, 'kendo-ui/styles/kendo.silver.min.css')}"/>
        <link rel="stylesheet" href="{!URLFOR($Resource.kendoUI, 'kendo-ui/styles/kendo.silver.mobile.min.css')}"/>

        <apex:slds />
        <apex:includeScript value="/lightning/lightning.out.js"/>

        <script type="text/javascript" src="{!URLFOR($Resource.kendoUI, 'kendo-ui/js/jquery.min.js')}"></script>
        <script type="text/javascript" src="{!URLFOR($Resource.kendoUI, 'kendo-ui/js/kendo.all.js')}"></script>

        <script type="text/javascript" src="{!URLFOR($Resource.decoder, 'he-master/he.js')}"></script>

    </head>-->

    <style>
        #MR_contentWrap .k-edit-field{
            padding: 0 0 .6em !important;
            margin-bottom: 10px;
            width: 62% !important;
        }
        #MR_contentWrap .k-edit-label{
            width: 32% !important;
        }
        #MR_contentWrap .k-multiselect-wrap > ul .k-button .k-icon.k-i-close{
            margin-right: -5px !important;
            margin-top: -5px;
        }

        #MR_contentWrap #MR_sendMeetingRequest:hover{
            background-color: #84a9ec !important;
            background-position: right 0 !important;
            background-image: none !important;
            color: white !important;
        }
        #MR_contentWrap #MR_sendMeetingRequest:focus{
            background-color: #84a9ec !important;
        }

        #MR_contentWrap #MR_cancelMeetingRequest:hover{
            background-color: #84a9ec;
            background-position: right 0;
            background-image: none;
        }
        #MR_contentWrap #MR_cancelMeetingRequest:focus{
            background-color: #84a9ec;
        }

        #MR_contentWrap .k-i-information{
            margin-left: 5px;   
        }

        #MR_contentWrap .k-link-increase, .k-link-decrease{
            height: 15px;
        }

        #MR_contentWrap span.k-widget.k-tooltip.k-tooltip-validation.k-invalid-msg{
            padding: 3px 10px;
        }

        .MR_Wrapper .k-dialog.k-window{
            min-width: 370px;
        }

        #MR_contentWrap #availableDaysContainer .k-check{
            margin-right: 5px;
        }
        #MR_contentWrap #availabeDaysContainer{
            margin-top: 5px;
        }

        #MR_contentWrap .k-notification-warning{
            position: absolute;
            z-index: 10;
        }
        #MR_contentWrap .k-notification-wrap{
            padding: 0.6em 0.5em;
        }

        #MR_contentWrap .k-timepicker{
            margin-bottom: 0px;
        }
    </style>

    <body class="MR_Wrapper slds-scope">
        <div id="MR_resultWindow"></div>
        <div class="k-content">
            <div id="MR_too-many-clients"></div>
        </div>
        <div id="MR_contentWrap" style="overflow: auto;">

            <div class="k-edit-label" style="margin-top: -6px;"><label for="MR_meetingRequestType">Meeting Type</label><span class="k-icon k-i-information" title="If creating a single meeting for a client, choose <b>Client Scheduled Meeting</b>.<br />Otherwise, if creating a general meeting request for multiple people to use to schedule a meeting,<br />Choose <b>General Meeting</b> and leave Invite Clients blank."></span></div>
            <div data-container-for="MR_meetingRequestType" class="k-edit-field" id="MR_meetingRequestTypeContainer">
                <select id="MR_meetingRequestType" data-bind="value: meetingType" style="width: 300px;">
                    <option value="permanent">Permanent</option> 
                    <option value="onetime">One-Time</option>
                </select>
            </div>

            <div id="MR_hideMeetingName" style="display: none;">
                <div class="k-edit-label" style="margin-top: -6px;"><label for="MR_meetingRequestName">Permanent Meeting Request Name</label></div>
                <div data-container-for="MR_meetingRequestName" class="k-edit-field" id="MR_meetingRequestNameContainer">
                    <input id="MR_meetingRequestName" type="text" class="k-input k-textbox" name="MR_meetingrequestname" data-bind="value: meetingName" style="width: 300px;"/>
                </div>
            </div>

            <div class="k-edit-label" style="margin-top: -6px;"><label for="MR_meetingOwnerLabel">Owner</label></div>
            <div data-container-for="MR_meetingOwner" class="k-edit-field" id="MR_meetingOwnerContainer">
                <select id="MR_meetingOwner" name="MR_meetingOwner" required="required" data-required-msg="Please Select An Event Owner" style="width: 300px;" data-bind="value: meetingOwner"></select>
                <span class="k-invalid-msg" data-for="MR_meetingOwner"></span>
            </div>

            <div class="k-edit-label" style="margin-top: -6px;"><label for="MR_meetingEmployeesLabel">Invite Employees</label></div>
            <div data-container-for="MR_meetingEmployees" class="k-edit-field" id="MR_meetingEmployeesContainer">
                <select id="MR_meetingEmployees" style="width: 300px;" data-bind="value: meetingEmployees"></select>
            </div>

            <div class="k-edit-label" style="margin-top: -6px;"><label for="MR_meetingClientsLabel">Invite Clients</label><span class="k-icon k-i-information" title="Find Contacts and Leads by typing their name. Every Contact and Lead found to have the typed phrase in their name will appear in a drop down, which you will be able to select (You must type at least three letters to begin filtering)."></span></div>
            <div data-container-for="MR_meetingClients" class="k-edit-field" id="MR_meetingClientsContainer">
                <select id="MR_meetingClients" style="width: 300px;" data-bind="value: meetingClients"></select>
            </div>

            <div id="MR_clientEmailWrapper" style="display: none;">
                <div class="k-edit-label" style="margin-top: -6px;"><label for="MR_clientEmailSelector">Client Emails To Send Request</label><span class="k-icon k-i-information" title="Every email included in this multi-select will receive a meeting request email. This option only shows up after you include a contact or lead for a <b>Client Scheduled Meeting</b> (One email must always be selected if Client Scheduled Meeting)."></span></div>
                <div data-container-for="MR_clientEmailSelector" class="k-edit-field" id="MR_clientEmailSelectorContainer">
                    <select id="MR_clientEmailSelector" style="width: 300px;" data-bind="value: clientEmails"></select>
                </div>
            </div>

            <div class="k-edit-label" style="margin-top: -6px;"><label for="MR_meetingResourcesLabel">Add Resources</label><span class="k-icon k-i-information" title="Include multiple resources, and the first one found that is available at the time the client schedules their meeting, will be added to the meeting."></span></div>
            <div data-container-for="MR_meetingResources" class="k-edit-field" id="MR_meetingResourcesContainer">
                <select id="MR_meetingResources" style="width: 300px;" data-bind="value: meetingResources"></select>
            </div>

            ele-placeholder

            <div id="MR_orgEmailWrapper">
                <div class="k-edit-label" style="margin-top: -6px;"><label for="MR_orgWideEmailContainer">Org Wide Email Address:</label><span class="k-icon k-i-information" title="The org wide email you select in this drop down list will be the one that is used to send emails in place of the Site Guest User account when emails are sent from the Pulse self scheduler when a client creates a meeting with this meeting request."></span></div>
                <div data-container-for="MR_orgWideEmail" class="k-edit-field" id="MR_orgWideEmailContainer">
                    <input id="MR_orgWideEmail" data-bind="value: orgEmail" style="width: 300px;"/>
                </div>
            </div>

            <div class="k-edit-label" style="margin-top: -6px;"><label for="MR_selectTimezone">Select Timezone</label></div>
            <div data-container-for="MR_selectTimezone" class="k-edit-field" id="MR_selectTimezoneContainer">
                <select id="MR_selectTimezone" data-bind="value: userTimezone" style="width: 300px;"></select>
            </div>

            <div class="k-edit-label" style="margin-top: -6px;"><label for="MR_includeWeekends">Allow Weekend Scheduling</label></div>
            <div data-container-for="MR_includeWeekends" class="k-edit-field" id="MR_includeWeekendsContainer">
                <input type="checkbox" id="MR_includeWeekends" data-bind="checked: includeWeekends" />
            </div>

            <div id="MR_hideWhenPermanent">
                <div class="k-edit-label" style="margin-top: -6px;"><label for="MR_meetingExpirationLabel">Meeting Expiration (Days)</label><span class="k-icon k-i-information" title="The value of this field will determine how many days a client has to schedule this meeting request, starting from the time this meeting request was created."></span></div>
                <div data-container-for="MR_meetingExpiration" class="k-edit-field" id="MR_meetingExpirationContainer">
                    <input id="MR_meetingExpiration" style="width: 300px;" data-bind="value: meetingExpiration"/>
                </div>
            </div>

            <div id="MR_onlyWhenPermanentMeeting">
            <div class="k-edit-label" style="margin-top: -6px;"><label for="MR_availableSelfScheduleHoursStart">Times Of Day Clients Can Schedule A Meeting</label></div>
            <div data-container-for="MR_availableSelfScheduleHoursStart" class="k-edit-field" id="MR_availableSelfScheduleHoursContainer">
                <div style="float: left;">
                    <input id="MR_availableSelfScheduleHoursStart1" data-role="timepicker" style="width: 135px;"/>
                    <p style="margin-right: 5px; margin-left: 5px; display: inline-block; color: black;">To</p>
                    <input id="MR_availableSelfScheduleHoursEnd1" data-role="timepicker" style="width: 135px;"/>
                </div>
                <button id="MR_addTimeBlock" class="slds-button slds-button--neutral" style="padding-left:10px; padding-right:10px; float: left; height: 33.72px; margin-left: 5px; margin-top: 5px;">
                    <svg class="slds-button__icon" aria-hidden="true" style="fill:green;">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.slds, 'assets/icons/utility-sprite/svg/symbols.svg#add')}"></use>
                    </svg>
                </button>
                <button id="MR_removeTimeBlock" class="slds-button slds-button--neutral" style="display:none; padding-left:10px; padding-right:10px; float: left; height: 33.72px; margin-left: 5px; margin-top: 9px;">
                    <svg class="slds-button__icon" aria-hidden="true" style="fill:red;">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.slds, 'assets/icons/utility-sprite/svg/symbols.svg#dash')}"></use>
                    </svg>
                </button>
            </div>

            <!--Elements to Restrict when a user can start scheduling a time, and when they can end (in progress) -->
            <div id="MR_SchedulingWindowInput">
                <div class="k-edit-label" style="margin-top: -6px;"><label for="MR_schedulingWindowStartDate">Available Days To Schedule This Meeting</label><span class="k-icon k-i-information" title="These values will determine the first day a client can schedule this meeting for as well as the last possible day they can schedule this meeting for. They will not be able to select a time on a day that falls outside of this window."></span></div>
                <div data-container-for="MR_schedulingWindowStartDate" class="k-edit-field" id="MR_schedulingWindowStartDateContainer">
                    <input id="MR_schedulingWindowStartDate" data-role="datepicker" data-bind="value: schedulingWindow.startDate" style="width: 135px;"/>
                    <p style="margin-right: 5px; margin-left: 5px; display: inline-block; color: black;">To</p>
                    <input id="MR_schedulingWindowEndDate" data-role="datepicker" data-bind="value: schedulingWindow.endDate" style="width: 135px;"/>
                </div>
            </div>

            <div class="k-edit-label" style="margin-top: -6px;"><label for="MR_selfSchedulingStartTime">Earliest Time Client Can Select A Meeting Time (Hours)</label><span class="k-icon k-i-information" title="The number specified in this field will determine how many hours from the time the user visits the self scheduler they can begin choosing times for meetings. For example, a value of 2 will mean the earliest time the user can schedule a meeting is 2 hours from when they visit the self scheduler."></span></div>
            <div data-container-for="MR_selfSchedulingStartTime" class="k-edit-field" id="MR_selfSchedulingStartTimeContainer">
                <input id="MR_selfSchedulingStartTime" data-min="0.250" data-decimals="3" data-restrict-decimals="true" data-step="0.250" data-role="numerictextbox" data-bind="value: earliestScheduleTime" style="width: 300px;"/>
            </div>
            <!--End in progress elements-->

            <div class="k-edit-label" style="margin-top: -6px;"><label for="MR_availableDays">Days Available For Clients To Schedule On</label></div>
            <div data-container-for="MR_availableDays" class="k-edit-field" id="MR_availableDaysContainer">
                <label class="k-check MR_k-weekend"><input type="checkbox" class="MR_k-weekend-checkbox" value="0"/>Su</label>
                <label class="k-check"><input type="checkbox" class="MR_k-weekday-checkbox" value="1"/>Mo</label>
                <label class="k-check"><input type="checkbox" class="MR_k-weekday-checkbox" value="2"/>Tu</label>
                <label class="k-check"><input type="checkbox" class="MR_k-weekday-checkbox" value="3"/>We</label>
                <label class="k-check"><input type="checkbox" class="MR_k-weekday-checkbox" value="4"/>Th</label>
                <label class="k-check"><input type="checkbox" class="MR_k-weekday-checkbox" value="5"/>Fr</label>
                <label class="k-check MR_k-weekend"><input type="checkbox" class="MR_k-weekend-checkbox" value="6"/>Sa</label>
            </div>
            </div>

            <div class="k-edit-label" style="margin-top: -6px;"><label for="MR_readOnly">View Only</label><span class="k-icon k-i-information" title="Checking this option will make the scheduler accessed with this meeting request link read only. Users visiting the scheduler through this link will not be able to schedule any events, just look at available times."></span></div>
            <div data-container-for="MR_readOnly" class="k-edit-field" id="MR_readOnlyContainer">
                <input id="MR_readOnly" type="checkbox" data-bind="checked: readOnly" />
            </div> 
        </div>

        <script id="MR_tagTemplate" type="text/x-kendo-template">
            #var dataStr = '';#
            #if(data.name != undefined){#
                #dataStr = data.name;#
            #}else if(data.text != undefined){#
                #dataStr = data.text;#
            #} else if(typeof data == 'string'){#
                #dataStr = data;#
            #}#
            #dataStr = he.decode(dataStr);#
            <span class="selected-value" title="#:dataStr#" style="color: black;">#:dataStr#</span>
        </script>

        <script id="MR_InviteItemTemplate" type="text/x-kendo-template">
            #var dataStr = '';#
            #if(data.name != undefined){#
                #dataStr = data.name;#
            #}else if(data.text != undefined){#
                #dataStr = data.text;#
            #} else if(typeof data == 'string'){#
                #dataStr = data;#
            #}#
            #dataStr = he.decode(dataStr);#
            <div id="nameDiv" style="color: black; background: #:data.tagColor#;">
                #:dataStr#
                #if(data.descriptor != null){#
                    <p style="font-size: 10px; margin-top: -10px; margin-bottom: 0px;">#:data.descriptor#</p>
                #}#
            </div>
        </script>

        <script id="MR_OrgEmailSelectorTemplate" type="text/x-kendo-template">
            <span style="line-height: 0px;">
                #:data.DisplayName#
                <p style="font-size: 10px;">#:data.Address#</p>
            </span>
        </script>

        <script id="MR_EmailSelectionTemplate" type="text/x-kendo-template">
            #:he.decode(data.label)# : #:he.decode(data.email)#
        </script>

        <script type="text/javascript">
//initializing widgets, binding events, doing logic, etc... it is fairly long
</script
</body>
</apex:component>

The issue looks like it 'refreshes' the HTML, but does not rerun the javascript, and then prints out that junk that appears to be my controller methods at the end of my HTML

0

Just rerender the parent outputpanel and it will recreate the child components including the visualforce component.

 <apex:commandButton reRender="meetingRequestOP"/>
  • Doing that still gives me that mess that I have in the picture I posted, and my component doesn't fully reload as it is missing all the styling and dynamic components. But no errors show up. – Tyler Dahle Feb 22 '18 at 15:33
  • @TylerDahle check in console you might getting some exception. – Tushar Sharma Feb 22 '18 at 15:48
  • There is nothing in the console. It just seems to be printing out my controller and its methods in that try-catch that it adds to my popup. – Tyler Dahle Feb 22 '18 at 15:52
  • @TylerDahle Can you share your component code the error looks strange. – Tushar Sharma Feb 22 '18 at 15:58
  • I posted an edit with some code for the component. It appears the 'rerender' only refreshes the html, but is not running the javascript for the component again. – Tyler Dahle Feb 22 '18 at 17:11

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.