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,
- I am getting an pop up alert window, which I think is because of alert(result) in my t1 () ajax function. How can I make it a webpage display?
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>
