modal call using id as azax page in script

 <script>
    function modalFunction(val){
    var userValue =    document.getElementById(val).innerHTML;
        alert(userValue);
        var ajaxURL = "patientViewModalLoad.do";
        $.ajax({
            /* async:false, */
            url : ajaxURL,
            success : function(result) {
                $("#patView_modalcall").html(result);
            },
            complete:function(){
                /* $("#PGSCCModal").modal({
                    backdrop:'static',
                    show:true
                }); */
                $("#PGSCCModal").modal('show');
                dataTableInitializationPatientViewPAT();
            }
           
        });
    }
 </script>




  /* async:false, */ need for more data load at a time pop up open


   /* $("#PGSCCModal").modal({
                    backdrop:'static',
                    show:true
                }); */   need when click outside then pop up close


SO,


  <script>
    function modalFunction(val){
    var userValue =    document.getElementById(val).innerHTML;
        alert(userValue);
        var ajaxURL = "patientViewModalLoad.do";
        $.ajax({
            async:false,
            url : ajaxURL,
            success : function(result) {
                $("#patView_modalcall").html(result);
            },
            complete:function(){
                $("#PGSCCModal").modal({
                    backdrop:'static',
                    show:true
                });
                dataTableInitializationPatientViewPAT();
            }
           
        });
    }
 </script>  














Jsp page :
<div id="PGSCCModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
    <div id="patView_modalcall" class="modal-content">
           here include modal contain(head, body and footer) thats means azax page
    </div>
  </div>
</div>

here include modal contain(head, body and footer) thats means azax page :
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@taglib prefix="s" uri="/struts-tags" %>


  <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;  </button>
                        <h4 class="modal-title" id="myModalLabel">Patient View List</h4>
                      </div>
                      <div class="modal-body">
                    <!-- START PAGE CONTENT-->   
                          <!-- BEGIN EXAMPLE TABLE widget-->
                <div class="widget red">
                    <div class="widget-title">
                        <h4><i class="icon-reorder"></i> Data Table</h4>
                            <!--span class="tools">
                                <a href="javascript:;" class="icon-chevron-down"></a>
                                <a href="javascript:;" class="icon-remove"></a>
                            </span-->
                    </div>
                    <div class="widget-body">
                        <table class="table table-striped table-bordered"  id="patViewDataTable3">
                            <thead>
                            <tr>
                                <th style="text-align:center;">HN Number</th>
                                <th style="text-align:center;">Patient Name</th>
                                <th style="text-align:center;">Age </th>
                                <th style="text-align:center;">Current Problem</th>
                                <th style="text-align:center;">Last Visit</th>
                                <th style="text-align:center;">Details</th>
                                <th style="text-align:center;">Preview</th>
                            </tr>
                            </thead>
                            <tbody>
                            <s:iterator value="patientViewList"  status="rowstatus">
                            <tr class="odd gradeX">
                                <td><s:property value='reg_no'/></td>
                                <td><s:property value='full_name'/></td>
                                <td><s:property value='patient'/></td>
                                <td><s:property value='pname'/></td>
                                <td><s:property value='kkk'/></td>
                                <td><s:property value='kkk'/></td>
                                <td style="text-align:center;"><a href="#" ><i class="icon-print"></i></a></td>
                            </tr>
                            </s:iterator>
                            </tbody>
                        </table>
                     </div>
                </div>
                <!-- END EXAMPLE TABLE widget-->

<!-- END PAGE CONTENT-->
   
                       
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                     
                     





dataTableInitializationPatientViewPAT(); is use for table initialize

 <script type="text/javascript">
    // $(document).ready(function (){
     //  dataTableInitializationPatientViewPAT();
    // });

function dataTableInitializationPatientViewPAT() {
        var asInitVals = new Array();
        var oTable = $('#patViewDataTable3').dataTable({
            /*"oLanguage": {
                "sSearch": "Search all: "
            }*/
            "bDestroy" : true,
            "autoWidth" : false,
            "bScrollCollapse" : true,
            "bProcessing" : true,
            "bJQueryUI" : true

        });

        $("thead input").keyup(function() {
            /* Filter on the column (the index) of this element */
            oTable.fnFilter(this.value,$("thead input").index(this));
        });

        /*
         * Support functions to provide a little bit of 'user friendlyness' to the textboxes in
         * the footer
         */
         $("thead input").each(function(i) {
            asInitVals[i] = this.value;
        });

         $("thead input").focus(function() {
            if (this.className == "search_init") {
                this.className = "";
                this.value = "";
            }
        });

         $("thead input").blur(function(i) {
            if (this.value == "") {
                this.className = "search_init";
                this.value = asInitVals[$("thead input").index(this)];
            }
        });
    }
  </script>