onclick function

[moonpeep]

Trying to learn how to create functions... This works:

<script>
$(document).ready(function() {
var $sigDiv = $("#signature1").jSignature({'UndoButton':false,color:"#000000",lineWidth:2});
var datapair = $sigDiv.jSignature("getData", "image");
        var i = new Image();
        i.src = "data:" + datapair[0] + "," + datapair[1];
        $(i).appendTo($("#imag"));
});
</script>

<div id="signature1"></div>
<div id="imag" style="height:340px;"></div>

BUT, I want the last 4 lines of the script to happen onclick, so I tried:

<script>
$(document).ready(function() {
var $sigDiv = $("#signature1").jSignature({'UndoButton':false,color:"#000000",lineWidth:2});
});
</script>

<script>
function placesig() {
var datapair = $sigDiv.jSignature("getData", "image");
        var i = new Image();
        i.src = "data:" + datapair[0] + "," + datapair[1];
        $(i).appendTo($("#imag"));
};
</script>

<div id="signature1"></div>
<div id="imag" style="height:340px;"></div>

<input type="button" value="Place Image" onclick="placesig();"/>

This does not work. I've attempted to find the solution, but my lack of js understanding is making it difficult. Any help would be much appreciated. Thanks!

[Old Pedant]

First of all, you are only using vanilla JavaScript to a very small degree.

Most of what you are doing is using the jQuery library. SO you may need to ask this in the jQuery forum, not the vanilla JavaSript forum.

BUT...

This part of the code is pure JavaScript, and it makes NO SENSE AT ALL:

        var i = new Image();
        i.src = "data:" + datapair[0] + "," + datapair[1];

You create an Image object. Good. But then you try to make the .src of the object--which, for an Image object, means the FILENAME OF THE IMAGE--be some funky date: xxx,yyy string.

How do you expect the Image to then show up on the page if you don't give it a valid FILE NAME (techinically, a file URL, but if you use only a name it is assumed to be in the same domain and is converted to a URL).

Then, to make matters even stranger, you appear to be appending your newly created Image object to the Image object that already exists on the page with the ID of "img".

WEIRD.

You say the first version works. I have to believe you. But it makes no sense to me.

[moonpeep]

Hmm. Well the first does work - just checked. I did forget to include:

<script src="jSignature.js"></script>

Which I assume is handling the file naming. The image ends up being download.png.

Since it happens on document ready in the first version, the canvas and resulting image is blank, except for a line - but it is a real png.

I just need to call the same function after some data has been put into the canvas.

Thanks for your reply!

[Old Pedant]

So have you used a debugger and traced through what it happening??

I'd be curious to know the value of some things at certain points in that code (original code fine).

var datapair = $sigDiv.jSignature("getData", "image");
        var i = new Image();
BREAKPOINT:  Find the values of datapair[0] and datapair[1] then STEP OVER and
        i.src = "data:" + datapair[0] + "," + datapair[1];
Find the value of i.src then STEP OVER
        $(i).appendTo($("#imag"));
Find what the <img id="imag"> now looks like.

[Old Pedant]

Believe it or not, I *MAY* know why it doesn't work!

In *THIS* code:

$(document).ready(function() {
    var $sigDiv = $("#signature1").jSignature({'UndoButton':false,color:"#000000",lineWidth:2});
});

$sigDiv is a *LOCAL VARIABLE!*

As soon as that "ready" anonymous function is finished executing, that variable *GOES AWAY*! Poof! Vanished!

So the answer is simple: Make it a GLOBAL variable:

<script type="text/javascript">
var $sigDiv = null; // GLOBAL!

$(document).ready(
    function() 
    {
        // no var here!!!
        $sigDiv = $("#signature1").jSignature({'UndoButton':false,color:"#000000",lineWidth:2});
    }
);

function placesig() 
{
    var datapair = $sigDiv.jSignature("getData", "image");
    var i = new Image();
    i.src = "data:" + datapair[0] + "," + datapair[1];
    $(i).appendTo($("#imag"));
};
</script>

At least try it.

[moonpeep]

You're a genius! Worked like a charm Thank you!