I am trying to build a webpage with a navbar menu and submenu, On click it runs a function in the index.html and calls an ajax function which calls a php script. The php script in turn calls a windows batch file that calls a powershell script.
I am trying to design it such that after I click on the submenu item, the ajax function calls the php script and runs the powershell script. I also want some sort of feedback from the webpage after I click the submenu item to display that it is busy/loading or working on the request, then followed by the result of the php script after it finishes processing. All this while I still have the navbar on and the submenu on top intact.
My problems are,
2.I am not getting any output from the php script that calls the powershell script at the end.
Any help appreciated!
My index.html is below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
@media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
ul.nav li.dropdown-submenu:hover > ul.dropdown-menu {
display: block;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">VMware VC Reports</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown" data-toggle="dropdown" href="#">Vcenters<span class=caret></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">San Jose Vcenter<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" onclick="t1()">ESX Info</a></li>
</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
<script>
function t1 () {
$.ajax({
url:"t1.php",
type: "POST",
success:function(result){
alert(result);
}
});
}
</script>
</body>
</html>
My t1.php is below.
<?php
echo "Loading...";
system("t1.bat");
echo '<meta http-equiv="refresh" content="1; URL=t1.html" />';
exit;
?>
My t1.html is below. It has almost all of the index.html and this part added at the bottom
ti.html
<script type="text/javascript">
<!--
var iframe = document.createElement("iframe");
iframe.src = "t1.txt";
iframe.width = "20000";
iframe.height = "20000";
iframe.frameBorder = "0";
iframe.scrolling = "no";
document.body.appendChild(iframe);
//-->
</script>
Instead of alerting the php coming from php append it to a html div.
success:function(result){
$('#anydiv').html(result);
}
Please explain this more: "I am not getting any output from the php script that calls the powershell script at the end."