How can I create an HTML button with an action and append it to the DOM using PerlScript?

Question

How can I create an HTML button with an action and append it to the DOM using PerlScript?

2.7k views Asked by Mike Caron At 23 November 2024 at 00:02

I'm specifically talking about the IE embedded script language "PerlScript" from ActiveState.

I currently have the following, but when button 3 is pressed, no action happens.

<html>
    <head>
        <title>perlscript baby!</title>
    </head>

    <script language="perlscript" event="onload" for="window">
        sub yawn
        {
            $window->alert("hi!");
        }
        sub createNew
        {
            $b = $window->document->createElement('button');
            $b->{value} = "button 3";
            $b->{onclick} = "yawn()";
            $window->alert("Button: " . $b->{outerHTML});
            $window->document->body->appendChild($b);
        }
        sub enable
        {
            undef $window->document->all('buttn 2')->{disabled};
        }
    </script>

   <body>
       <input id='enabler' type='button' value='button 1' onclick='enable()'></input>
       <input id='action' type='button' value='button 2' disabled onclick="createNew()"></input>
   </body>
</html>

Original Q&A

There are 1 answers

**Damian Powell** · Accepted Answer · 2012-06-08 20:03:54

This is a very difficult thing to achieve, apparently. The browser (IE9 in my case) is expecting the value of the onclick attribute (when set from a script) to be a function reference rather than a string. We can prove this by converting your code into the equivalent JavaScript as shown below.

<script language="javascript">
    function yawn()
    {
        window.alert("hi!");
    }
    function createNew()
    {
        b = window.document.createElement('button');
        b.value = "button 3";
        b.onclick = "yawn()";
        window.alert("Button: " + b.outerHTML);
        window.document.body.appendChild(b);
    }
    function enable()
    {
        window.document.getElementById("action").removeAttribute("disabled");
    }
 </script>

If we run this, the third button will appear, but clicking it will do nothing. We need to make only a minor adjustment to make this work in JavaScript.

function createNew()
{
    // ...
    b.onclick = function() { yawn(); };
    // ...
}

Now, if we convert this back to the equivalent perlscript, we can see that it still doesn't work.

sub yawn
{
    $window->alert("hi!");
}
sub createNew
{
    $b = $window->document->createElement('button');
    $b->{value} = "button 3";
    $b->{onclick} = sub { $window->yawn(); };
    $window->alert("Button: " . $b->{outerHTML});
    $window->document->body->appendChild($b);
}
sub enable
{
    $window->document->getElementById("action")->removeAttribute("disabled");
}

In fact, it's a little bit worse because now, if you use your favourite HTML debugger to inspect the button 3 element, there is no onclick handler at all. So what can we do to get around this? Well, the answer is actually pretty simple - don't use PerlScript to create the elements dynamically, instead, create them statically and use PerlScript to hide and show them.

<html>
    <head>
        <title>perlscript baby!</title>
    </head>
    <script language="perlscript">
        sub yawn
        {
            $window->alert("hi!");
        }
        sub createNew
        {
            $window->document->getElementById('button3')->style->{display} = "inline";
        }
        sub enable
        {
            $window->document->getElementById("action")->removeAttribute('disabled');
        }
    </script>
    <body>

        <input id='enabler' type='button' value='button 1'
            onclick='javascript:enable();' />

        <input id='action' type='button' value='button 2' disabled
            onclick='javascript:createNew();' />

        <input id='button3' type='button' value='button 3' style='display:none;'
            onclick='javascript:yawn();'/>

    </body>
</html>

This seems to do the job nicely, although I'm not sure how well it will fit into your use case. There is of course, one massively weird thing in this code: the onclick handlers for each of the input elements explictly states that it is calling a JavaScript function. This is not true, obviously, as those functions are actually PerlScript subroutines. However, if you remove the javascript: prefix, then the handlers are never called. I think this just further highlights the browser's bias towards JavaScript.

Hope that helps!

TechQA.

How can I create an HTML button with an action and append it to the DOM using PerlScript?

There are 1 answers

Related Questions in PERL

Related Questions in DOM

Related Questions in DHTML

Related Questions in ACTIVEPERL

Related Questions in PERLSCRIPT

Popular Questions

Popular Tags

Trending Questions