apex:outputText in Bootstrap div not working

Question

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

Answer 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")).