0

I have the following code, which is a bootstrap modal. I am trying to use apex:outputText within it, but it seems like the outputText is just getting loaded when the page loads (the value inside needs to be able to change), is there a way for me to reRender the div (I tried wrapping the div in apex:outputPanels and rerendering them with an action function, but it didn't work. The data string I want to output is called "thing"

<apex:outputPanel id="modalPanel">
    <div id="eventModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title" style="font-size: 2.6em !important;">New Event</h4>
          </div>
          <div class="modal-body" style="font-size: 1.6em !important;">
            Technician: <br/><br/>
            Asset:  <apex:outputPanel id="modalPanel"><apex:outputText value="{!modalAsset}" /> </apex:outputPanel> <br/><br/>
            Length (pulldown menu)
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </apex:outputPanel> 

EDIT:

Here is the javascript:

<script> 
$(document).ready(function() { 
    $("table").click(function (event) {
         setValues(1); // <-This is the function that sets the controller values
         renderTheModal(); //<-This is the function that rerenders the modal
        }
    });
    //You cannot click on this thing until the function above executes, so there are no problems with it being shown before the stuff gets set.
    $(document).on("click","#schedule tr",function (event) {
      $("#eventModal").modal("show");
    });
});

Then here are the actionfunctions:

<apex:actionFunction name="setValues" action="{!myMethod}" reRender="table2">
    <apex:param value="a" name="skill" assignTo="{!thing}" />
</apex:actionFunction>
<apex:actionFunction name="renderTheModal" action="{!myMethod}" reRender=" modalPanel" />
  • How are you setting the value of {!thing} and what are you doing when you want the value to change? – CyberJus Jun 8 '15 at 20:34
  • I am setting it with an action function on the click of a data element, and I know it is getting set correctly because the debug logs have it set before I click on the button that brings up the modal – newuser Jun 8 '15 at 20:38
  • So you set the value with one event action and then open the modal with the other? Is the rerender working outside of the modal operation? – CyberJus Jun 8 '15 at 20:43
  • Basically I don't know what to do to get the apex:outputtext to display the value. I have tried putting outputpanels around the modal div, and re rendering that (that didn't work), and I don't really know what else to try. – newuser Jun 8 '15 at 20:48
  • Can you post the code you are using to do the rerender? – CyberJus Jun 8 '15 at 20:50
1

One part of the overall problem is that this:

$(document).ready(function() {
    ...
});

runs when the page is first rendered in the browser so the on("click") is applied to the DOM elements that exist then, not the elements after a re-render.

So when you have got the apex:actionFunction to re-render, also use its oncomplete to add a call to a JavaScript function that sets up the event handling again (such as the on("click")).

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.