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