php - Appending the contents of a UNIX command to a div tag -
i'm making unix web-based terminal learning purposes. far have made text box , output being displayed. sort of this.
<?php $output = shell_exec('ls'); echo "<pre>$output</pre>"; ?> 
form
<html> <head> <link href="/css/webterminal.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function shell_execute(str) { if (str.length==0) { document.getelementbyid("txtout").innerhtml=""; return; } if (window.xmlhttprequest) {// code ie7+, firefox, chrome, opera, safari xmlhttp=new xmlhttprequest(); } else {// code ie6, ie5 xmlhttp=new activexobject("microsoft.xmlhttp"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid("txtout").innerhtml=xmlhttp.responsetext; } } xmlhttp.open("get","exec.php?q="+str,true); xmlhttp.send(); } </script> </head <body onload="setuser();"> <div class="container"> <h2>unix web based terminal 1.0</h2> <br /> <p><b>output</b></p> <form> <span id="user"></span>< <input type="text" class="textbox" onkeyup="shell_execute(this.value)" size="20" /> </form> <div class="output"> <p><span id="txtout"></span></p> </div> </div> </body> </html> but want if page terminal. when type command, should store result of shell command, , append div tag. typing in commands, keep on showing output. in unix terminal.
how can append output of commands div tag?
change:
document.getelementbyid("txtout").innerhtml=xmlhttp.responsetext; to:
document.getelementbyid("txtout").innerhtml += xmlhttp.responsetext; on sidenote, why not using of established javascript frameworks?
with jquery example reduce code maybe 4 lines.
edit - using jquery: http://api.jquery.com/jquery.ajax/
<html> <head> <link href="/css/webterminal.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script type="text/javascript"> $(function () { $('#cmd').bind('keydown', function (evt) { if (evt.keycode === 13) { // enter key var cmdstr = $(this).val(); $.ajax({ url: 'exec.php', datatype: 'text', data: { q: cmdstr }, success: function (response) { $('#txtout').append(response); } }); } }); }); </script> </head> <body> <div class="container"> <h2>unix web based terminal 1.0</h2> <br /> <p><b>output</b></p> <span id="user"></span> <input id="cmd" type="text" class="textbox" size="20" /> <div class="output"> <p><span id="txtout"></span></p> </div> </div> </body> </html>
Comments
Post a Comment