ansaurus

Question

Mimicking a CLI in a web page, using jQuery

Answer 1

A:

This should ajax request on <enter>

<html>
  <head>
    <title>Simple CLI</title>
    <script src="jquery.js">
  </head>
  <body>
    <div>
      <div id="out"></div>
      <input id="in" type="text" />
    </div>
    <script type="text/javascript">
      $('#in').keyup(function(e) {
        if (e.which !== 13)
          return; 
        var cmd = { cmd: $(this).val() };
        $(this).val('');
        $.post('example.php', cmd, function(data) {
          $('#out').append(data);
        });
      };
    </script>
  </body>
</html>

sod 2010-09-06 23:59:36

Answer 2

A:

<html>
  <head>
    <title>Simple CLI</title>
    <script src="jquery.js">
    <style>
      #container_command {
         background-color:#000000;
         color:#ffffff;
         font-family:Courier New;
      } 
    <style>
  </head>
  <body>
    <div>
      <div id="container_command">
          <code id="console"></code>
          <br />
          &#35; command &gt;<input id="cmd_input" type="text" />&nbsp;
      </div>
    </div>
    <script type="text/javascript">

    /* [CDATA[ */
    $(function() {

       $('#cmd_input').keypress(function(ev) {

         if (ev.keyCode == "13")
            ev.preventDefault();
         else
            return true;

         var command = $('#cmd_input').val();

         if (command.length == 0)
             return true;

         $('#cmd_input').val("");

         $.post("example.php", {'cmd': command}, 
            function(data) 
            {
               var console_response = data.resp..replace(/\n/, '<br />');
               $("#console").append(command + ": <br />" +console_response+"<br />"); 
            }
         ,"json");

       });

    });
    /* ]]> */

    </script>
  </body>
</html>

andres descalzo 2010-09-07 13:13:40

ansaurus

tags:

views:

answers:

Mimicking a CLI in a web page, using jQuery

related questions