在模态对话框中执行 JavaScript答案

【问题标题】：Executing JavaScript inside modal Dialog在模态对话框中执行 JavaScript
【发布时间】：2016-06-29 17:43:07
【问题描述】：

我有这段代码来创建和显示模式对话框：

$(document).ready(function(){
  $("#btn_transfer").click(function(){
    // show Modal
    $('#transfer_stock').modal('show');
  });
});

<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Modal -->

<div class="modal fade" id="transfer_stock" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Transfer Stock</h4>
      </div>
      <div class="modal-body">
        <?php include 'transfer_stock.php'; ?>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->

<div align="right"><input type="button" name="btn_transfer" id="btn_transfer" value="Transfer Stock" class="btn btn-info" />

模态对话框如我所愿显示，但我无法在模态对话框中出现的名为“transfer_stock.php”的文件中执行任何脚本。

这是 transfer_stock.php 的代码

<!doctype html>
<html lang=''>
<head>
   <meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="css/style_index.css">
   
   <script src="js/script.js"></script>

   <script language="javascript" type="text/javascript">

  function getXMLHTTP() { //fuction to return the xml http object
    var xmlhttp=false;  
    try{
      xmlhttp=new XMLHttpRequest();
    }
    catch(e){
      try{      
        xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(e){
        try{
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e1){
          xmlhttp=false;
        }
      }
    }
      
    return xmlhttp;
    }
  
  function getMaterial(code) {
    
    var strURL="get_material_name.php?cc="+code;
    var req = getXMLHTTP();

    var strURL1="get_material_unit_only.php?cc="+code;
    var req1 = getXMLHTTP();

    var strURL2="get_stock_wh1.php?cc="+code;
    var req2 = getXMLHTTP();

    var strURL3="get_stock_wh2.php?cc="+code;
    var req3 = getXMLHTTP();
    
    if (req) {
      
      req.onreadystatechange = function() {
        if (req.readyState == 4) {
          // only if "OK"
          if (req.status == 200) {            
            document.getElementById('material_name_div').innerHTML=req.responseText;
          } else {
            alert("There was a problem while using XMLHTTP:\n" + req.statusText);
          }
        }
      }

      req.open("GET", strURL, true);
      req.send(null);
    }

    if (req1) {
      
      req1.onreadystatechange = function() {
        if (req1.readyState == 4) {
          // only if "OK"
          if (req1.status == 200) {           
            document.getElementById('material_unit_div').innerHTML=req1.responseText;           
          } else {
            alert("There was a problem while using XMLHTTP:\n" + req1.statusText);
          }
        }
      }

      req1.open("GET", strURL1, true);
      req1.send(null);
    }

    if (req2) {
      
      req2.onreadystatechange = function() {
        if (req2.readyState == 4) {
          // only if "OK"
          if (req2.status == 200) {           
            document.getElementById('stock_wh_1_div').innerHTML=req2.responseText;           
          } else {
            alert("There was a problem while using XMLHTTP:\n" + req2.statusText);
          }
        }
      }

      req2.open("GET", strURL2, true);
      req2.send(null);
    }

    if (req3) {
      
      req3.onreadystatechange = function() {
        if (req3.readyState == 4) {
          // only if "OK"
          if (req3.status == 200) {           
            document.getElementById('stock_wh_2_div').innerHTML=req3.responseText;           
          } else {
            alert("There was a problem while using XMLHTTP:\n" + req3.statusText);
          }
        }
      }

      req3.open("GET", strURL3, true);
      req3.send(null);
    }
  }

  function getPersonnel(regno) {
    
    var strURL="get_personnel_reg_no.php?cc="+regno;
    var req = getXMLHTTP();

    if (req) {
      
      req.onreadystatechange = function() {
        if (req.readyState == 4) {
          // only if "OK"
          if (req.status == 200) {            
            document.getElementById('personnel_name_div').innerHTML=req.responseText;           
          } else {
            alert("There was a problem while using XMLHTTP:\n" + req.statusText);
          }
        }
      }

      req.open("GET", strURL, true);
      req.send(null);
    }
  }

  // AJAX call for autocomplete 
$(document).ready(function(){
  $("#material_code").keyup(function(){
    $.ajax({
    type: "POST",
    url: "search_material.php",
    data:'keyword='+$(this).val(),
    beforeSend: function(){
      $("#search-box").css("background","#FFF url(images/LoaderIcon.gif) no-repeat 165px");
    },
    success: function(data){
      $("#suggesstion-box").show();
      $("#suggesstion-box").html(data);
      $("#material_code").css("background","#FFF");
    }
    });
  });

  $("#reg_no").keyup(function(){
    $.ajax({
    type: "POST",
    url: "search_personnel.php",
    data:'keyword='+$(this).val(),
    beforeSend: function(){
      $("#search-box1").css("background","#FFF url(images/LoaderIcon.gif) no-repeat 165px");
    },
    success: function(data){
      $("#suggesstion-box1").show();
      $("#suggesstion-box1").html(data);
      $("#reg_no").css("background","#FFF");
    }
    });
  });
});

function selectMaterial(val) {
$("#material_code").val(val);
getMaterial(material_code.value);
$("#suggesstion-box").hide();
}

function selectPersonnel(val) {
$("#reg_no").val(val);
getPersonnel(reg_no.value);
$("#suggesstion-box1").hide();
}

</script>

<style>

#material-list{position:absolute; float:left; list-style:none; margin:0; padding:0; width:150; overflow-y: auto; overflow-x:hidden; height: 200px;}
#material-list li{padding: 10px; background:#FAFAFA;border-bottom:#F0F0F0 1px solid;}
#material-list li:hover{background:#F0F0F0;}
#search-box{padding: 10px;border: #F0F0F0 1px solid; width: 150;}

#personnel-list{position:absolute; float:left; list-style:none; margin:0; padding:0; width:150; overflow-y: auto; overflow-x:hidden; height: 200px;}
#personnel-list li{padding: 10px; background:#FAFAFA;border-bottom:#F0F0F0 1px solid;}
#personnel-list li:hover{background:#F0F0F0;}
#search-box1{padding: 10px;border: #F0F0F0 1px solid; width: 150}

</style>

</head>
<body>

<center>

                   <form id="form1" name="form1" method="post" action="save_user.php">

                     <table>
                       <tr>
                         <td width="25%" bgcolor="#8eb4e3" class="td-data_1"><font size="2dp"><strong>Date</strong></font></td>
                         <td width="15%" bgcolor="#d9d9d9" colspan="2" class="td-data_1">
                         <input type="date" name="date" id="date" placeholder="Date" value="<?php echo date("Y-m-d");?>" style="font-size:13px; width: 150"/></td>
                       </tr>
                       <tr>
                         <td bgcolor="#8eb4e3" class="td-data_1"><font size="2dp"><strong>Material Name</strong></font></td>
                         <td bgcolor="#d9d9d9" width="15%" class="td-data_1">
                         
                         <span class="frmSearch">
                         <input type="text" id="material_code" placeholder="Enter Material Name" style="font-size:13px; width: 150"/>
                         <span id="suggesstion-box"></span>
                         </span>
                         </td>
                         <td bgcolor="#d9d9d9" class="td-data_1">
                         <span id="material_name_div" style="font-size:14px">Material Name, Specs and Size</span>
                         </td>
                       </tr>
                       <tr>
                         <td bgcolor="#8eb4e3" class="td-data_1"><font size="2dp"><strong>Stock (Existing)</strong></font></td>
                         <td colspan="2" colspan="2" bgcolor="#d9d9d9" class="td-data_1">
                         <span id="stock_wh_1_div" style="font-size:14px">Stock WH 1</span>
                         /
                         <span id="stock_wh_2_div" style="font-size:14px">Stock WH 2</span>
                         </td>
                        </tr>
                        <tr>
                         <td bgcolor="#8eb4e3" class="td-data_1"><font size="2dp"><strong>Source</strong></td>
                         <td width="10%" colspan="2" bgcolor="#d9d9d9" class="td-data_1">
                         <input type="radio" name="location" value="WH1" checked><strong><font color="#8B0000" style="font-size:13px;">WH 1 </font></strong> &nbsp;
                         <input type="radio" name="location" value="WH2"><strong><font color="#8B0000" style="font-size:13px;">WH 2</font></strong>
                         </td>
                       </tr>
                       <tr>
                         <td bgcolor="#8eb4e3" class="td-data_1"><font size="2dp"><strong>Qty (Transferred)</strong></font></td>
                         <td bgcolor="#d9d9d9" width="15%" class="td-data_1">
                         <input type="number" id="qty_transferred" placeholder="Enter Qty" style="font-size:13px; width: 150"/>
                         </td>
                         <td bgcolor="#d9d9d9" class="td-data_1">
                         <span id="material_unit_div" style="font-size:14px">Material Unit</span>
                         </td>
                       </tr>
                       <tr>
                         <td bgcolor="#8eb4e3" class="td-data_1"><font size="2dp"><strong>Personnel Name</strong></font></td>
                         <td width="15%" bgcolor="#d9d9d9" class="td-data_1">
                         <div class="frmSearch">
                         <input type="text" id="reg_no" placeholder="Enter Personnel Name" style="font-size:13px; width: 150"/>
                         <div id="suggesstion-box1"></div>
                         </div>
                         </td>
                         <td bgcolor="#d9d9d9" class="td-data_1">
                         <span id="personnel_name_div" style="font-size:14px">Personnel Reg. Name</span>
                       </tr>
                       <tr>
                         <td bgcolor="#8eb4e3" class="td-data_1"><font size="2dp"><strong>Note</strong></font></td>
                         <td colspan="2" bgcolor="#d9d9d9" class="td-data_1">
                         <input type="text" name="note" id="note" style="width: 100%" /></td>
                       </tr>
                     </table>
                     <br/>
                     <div align="center"><input type="submit" name="button" id="button" value="Save" class="btn btn-info" /></div>
                    </form>

</center>

</body>

</html>

自动完成功能在模态对话框中不起作用，但是当我通过 http 执行 transfer_stock.php 文件时，所有脚本都正常工作。

如何在模态对话框中加载脚本？

任何帮助将不胜感激。

谢谢，

【问题讨论】：

您认为模式更像是 iframe，而它更像是您主页上的任何其他 div。

标签： javascript php jquery html twitter-bootstrap

【解决方案1】：

1- 我没有看到任何 ajax 调用或 .load() 函数：

$(document).ready(function(){
    $("#btn_transfer").click(function(){
        // show Modal
        $('#transfer_stock').modal('show');
    });
});

2- 如果您有效地使用 ajax 在某处调用 transfer_stock.php... 它的内容应该以您主页的 div 或 <span> 之类的元素结尾。 p>

3- 此transfer_stock.php 不应包含<html>、<head>、<body> 等标签。没有任何 jQuery 库调用，因为它应该已经加载到您的主调用者页面中。

在此处阅读有关 ajax 的更多信息：jQuery Ajax POST example with PHP

【讨论】：