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">×</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" />