2016-06-29 11 views
0

habe ich diesen Code zu erstellen und zu zeigen, modalen Dialog:Ausführen von JavaScript innerhalb modalen Dialogs

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

Der modale Dialog, wie ich wollte gezeigt wird, aber ich kann jedes Skript nicht ausführen in der Datei 'transfer_stock.php', die im modalen Dialog erscheint.

Hier ist der Code von 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>

Die Funktion zur automatischen Vervollständigung wird nicht innerhalb des modalen Dialog zu arbeiten, aber wenn ich die transfer_stock.php Datei über http ausführen, die alle das Skript funktioniert einwandfrei.

Wie wird das Skript im modalen Dialog geladen?

Jede Hilfe wird sehr geschätzt.

Danke,

+1

Sie sind über den Modal als mehr wie und iframe zu denken, wenn es mehr wie jedes andere div auf Ihrer Haupt-Seite ist. – JonSG

Antwort

0

1- ich jeden Ajax-Aufruf oder .load() Funktion in dem nicht sehen:

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

2- Wenn Ihr Ajax effektiv nutzen transfer_stock.php irgendwo anrufen .. Der Inhalt sollte in ein Element wie div oder <span> Ihrer Hauptseite enden.

3- Diese transfer_stock.php sollte NICHT <html>, <head>, <body> usw. Tags enthalten. Rufen Sie einen beliebigen jQuery-Bibliotheksaufruf auf, da dieser bereits auf Ihrer Hauptanruferseite geladen sein sollte.

mehr über Ajax Lesen Sie hier: jQuery Ajax POST example with PHP

Verwandte Themen