1

Here is my code simplified so it's easy to copy and paste it in your dev console.

As the code is shown: the middle column will reRender, but not the right column. When you remove the code in the middle column, the right column code reRenders. Why will both not reRender at the same time?

VF Page

<apex:page controller="debugPageController">
    <apex:form >

        <script type="text/javascript">
        function doSearch() {
            console.log('doSearch is firing');

            console.log("Input value: " + document.getElementById("searchBox").value);

            searchServer(
                document.getElementById("searchBox").value
            );
        }
        </script>

        <apex:actionFunction name="searchServer" action="{!runSearch}" reRender="calendar, taskList">
            <apex:param name="searchBox" value="" />
        </apex:actionFunction>

        <input type="text" id="searchBox" value="" onkeyup="doSearch();"/>

        <!--Beginning of middle column -->
        <apex:pageBlock mode="edit" id="calendar">   


            <apex:outputPanel layout="block" styleClass="col-sm-12 col-md-8 col-lg-6">
                <apex:outputPanel layout="block" styleClass="section section-calendar">
                    <apex:outputPanel layout="block" styleClass="fc fc-unthemed fc-ltr">

                        <!-- View by Task Owner -->
                        <div class="fc-toolbar">
                            <div class="fc-left">

                                <button class="fc-next-button fc-button fc-state-default fc-corner-right">
                                    <span class="fc-icon fc-icon-right-single-arrow"></span>
                                </button>
                                <span class="arrowIcons">


                                </span>
                                <apex:commandButton value="Today"/>
                            </div>
                            <div class="fc-right">
                                <apex:commandButton value="Month"/>
                                <apex:commandButton value="Week"/>
                            </div>
                            <div class="fc-center">
                                <h2>
                                </h2>
                            </div>
                        </div>


                        <!-- Task Calendar Header End -->
                        <!-- Monthly Task Calendar -->         
                        <div class="fc-view-container">
                            <div class="fc-view fc-month-view fc-basic-view">
                                <table>
                                    <thead class="fc-head">
                                        <tr>
                                            <td class="fc-head-container fc-widget-header">
                                                <div class="fc-row fc-widget-header">
                                                    <thead>
                                                        <tr>
                                                            <th class="fc-day-header fc-widget-header fc-sun" ><span>{!searchBox}</span></th>
                                                            <th class="fc-day-header fc-widget-header fc-mon" ><span>{!searchBox}</span></th>
                                                            <th class="fc-day-header fc-widget-header fc-tue" ><span>{!searchBox}</span></th>
                                                            <th class="fc-day-header fc-widget-header fc-wed" ><span>{!searchBox}</span></th>
                                                            <th class="fc-day-header fc-widget-header fc-thu" ><span>{!searchBox}</span></th>
                                                            <th class="fc-day-header fc-widget-header fc-fri" ><span>{!searchBox}</span></th>
                                                            <th class="fc-day-header fc-widget-header fc-sat" ><span>{!searchBox}</span></th>
                                                        </tr>   
                                                    </thead> 
                                                </div>
                                            </td>
                                        </tr>
                                    </thead>
                                    <tbody class="fc-body">
                                        <apex:repeat value="{!searchBox}" var="wc">
                                            {!wc}
                                        </apex:repeat>                                                            
                                    </tbody>
                                </table>

                            </div>
                        </div>  
                        <!-- Monthly Task Calendar End -->   
                    </apex:outputPanel>
                </apex:outputPanel>
            </apex:outputPanel>
        </apex:pageBlock>
        <!--End of middle column-->

        <!--Beginning of right column--> 
        <apex:pageBlock mode="edit" id="taskList">
            <apex:outputPanel layout="block" styleClass="col-sm-12 col-sm-offset-0 col-md-8 col-md-offset-4 col-lg-3 col-lg-offset-0">
                <div class="panel panel-default panel-tasks">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            Tasks
                        </h3>
                    </div>
                    <div class="list-group">
                        <apex:repeat value="{!searchBox}" var="task" id="taskList">
                            <a href="/{!task}" class="list-group-item">
                                <span clas="badge"><apex:outputText value="{!task}"/></span>
                                <h4 class="list-group-item-heading">
                                    <apex:outputText value="{!task}"/>
                                    <ul class="list-unstyled">
                                        <li>
                                            <strong>Assigned To: </strong>
                                            <apex:outputText value="{!task}"/>
                                        </li>
                                        <li>
                                            <strong>Related To: </strong>
                                            <apex:outputText value="{!task}"/>
                                        </li>
                                    </ul>
                                </h4>
                            </a>
                        </apex:repeat>
                    </div>

                </div>
            </apex:outputPanel>
        </apex:pageBlock>

    </apex:form>
</apex:page>

Controller

public class debugPageController {

    public String searchBox{get; set;}

    public PageReference runSearch() {
        searchBox = Apexpages.currentPage().getParameters().get('searchBox');
        System.debug('searchBox >>>>> ' + searchBox);
        return null;
    }

}

1 Answer 1

2

The reason it doesn't work is because you're generating invalid markup.

enter image description here

Include another table tag where it belongs to produce valid markup and it works just fine.

<div class="fc-view-container">
    <div class="fc-view fc-month-view fc-basic-view">
        <table> <!-- add another table tag -->
            <thead class="fc-head">
                <tr>
                    <td class="fc-head-container fc-widget-header">
2
  • why does invalid markup break the javascript?
    – Tyler Zika
    Oct 24, 2016 at 15:10
  • why do web browsers even attempt to render invalid markup? Isn't this why there's a spec?
    – Mark Pond
    Oct 24, 2016 at 15:58

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .