Beefy Boxes and Bandwidth Generously Provided by pair Networks
Syntactic Confectionery Delight

CGI ajax repeating input

by baxy77bax (Deacon)
on Oct 19, 2009 at 18:36 UTC ( #802064=perlquestion: print w/replies, xml ) Need Help??
baxy77bax has asked for the wisdom of the Perl Monks concerning the following question:


i am hoping for some guidance with this script. so far i had no need to mess with CGI but things have changed. i went through some examples and here is what a came up with:

<html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <style type="text/css"> html { height: 100%; } body { background: #fff; font-size: 12px; font-family: monospace; heig +ht: 99%; margin:0px; padding: 0px; } form { padding: 0px; margin: 0px; } pre { font-size: 12px; } br { clear: both; } :focus { outline: 0; } input.cmdline { border: none; border: 0px; font-size: 12px; font-famil +y: monospace; padding: 0px; margin:0px; width:100%; } table.inputtable { width:100%; vertical-align:top; } td.inputtd { width:100%; } #input { margin-left: 8px; color: #666; overflow: hidden; } #output{ margin-left: 8px; margin-top: 8px; } .less { color: #666; } .info { color: #090; } table { padding: 0px; margin: 0px; border-collapse: collapse; border-s +pacing: 0px; } td { padding: 0px; margin: 0px; vertical-align: top; font-size: 12px; +font-family: monospace; } .help td { padding-right: 25px; font-size: 12px; } div#prompt { display: inline; white-space:nowrap; padding:0px; margin: +0px; } img { border: none; } </style> <script language="Javascript"> function xmlhttpPost(strURL) { var xmlHttpReq = false; var self = this; if (window.XMLHttpRequest) { self.xmlHttpReq = new XMLHttpRequest(); } else if (window.ActiveXObject) { self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); }'POST', strURL, true); self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-ww +w-form-urlencoded'); self.xmlHttpReq.onreadystatechange = function() { if (self.xmlHttpReq.readyState == 4) { updatepage(self.xmlHttpReq.responseText); } } self.xmlHttpReq.send(getquerystring()); } function getquerystring() { var form = document.forms['f1']; var word = form.word.value; qstr = 'w=' + escape(word); return qstr; } function updatepage(str){ document.getElementById("result").innerHTML = str; } </script> </head> <body> <form name="f1" onsubmit='return false' class='cmdline' action=''> <input id='inputfield' name='word' type='text' class='cmdline' autocom +plete='off' value="" onkeydown = 'if(event.which==13){JavaScript:xmlh +ttpPost("/cgi-bin/test1.cgi")}' /> <div id="result"></div> </form> </body> </html> test1.cgi #!/usr/bin/perl use CGI; $query = new CGI; $secretword = $query->param('w'); $remotehost = $query->remote_host(); print $query->header; print "<p>Massage <b>$secretword</b> came from <b>$remotehost</b> IP +</p>";
i have to admit i have only some vague clue on how xmlhttpPost() function works . but what i'm trying to achieve is to execute the function within the test1.cgi every time i hit enter.

to give an illustrative example on how would i do it naturally :

$|=1; while(1){ chomp(my $say = <>); ($say eq 'q') ? (exit(0)) : (print "\nI caught $say \n"); }
so what i'm trying to achieve is to repeatedly go through <input id='inputfield' name='word' type='text' class='cmdline' autocomplete='off' value="" onkeydown = 'if(event.which==13){JavaScript:xmlhttpPost("/cgi-bin/test1.cgi")}' /> line of code. or maybe it would be better if i could just repeatedly input something without executing the whole test1.cgi script, but rather only some functions. that way i could also store some input into some global @array or something...

so if anyone has any advice how to achieve this please share the knowledge!!!!

thank you!!!

Replies are listed 'Best First'.
Re: CGI ajax repeating input
by stonecolddevin (Vicar) on Oct 19, 2009 at 18:49 UTC

    Check out jQuery. It'll make your ajax usage a *ton* easier.


      I agree that using jQuery or any of a number of other JavaScript AJAX-type libraries on the client side would make your life a lot easier (, prototype, Cappuccino, just to name a few. There are a bunch out these days).

      As far as your code is concerned...your Perl looks sound and simple...although I haven't done a lot of CGI work. What about:

      <input id='inputfield' name='word' type='text' class='cmdline' autocom +plete='off' value="" onkeydown = 'if(window.event.keycode == 13){Java +Script:xmlhttpPost("/cgi-bin/test1.cgi")}' />
      Does the event keycode make any difference? Do you know that the CGI script is called with each tab?

      Also, I think your response CAN have a header...although I'm not sure it needs one...seems like I've sent back just raw text before in as an AJAX response. But that is what all the wonderful frameworks out there help nicely with.

Log In?

What's my password?
Create A New User
Node Status?
node history
Node Type: perlquestion [id://802064]
Approved by jrsimmon
[Discipulus]: the same for me! I'd use your own one! ;=)

How do I use this? | Other CB clients
Other Users?
Others exploiting the Monastery: (6)
As of 2018-05-28 10:00 GMT
Find Nodes?
    Voting Booth?