Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    onclick function

    Trying to learn how to create functions... This works:
    Code:
    <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:

    Code:
    <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!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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:
    Code:
            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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hmm. Well the first does work - just checked. I did forget to include:
    Code:
    <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!

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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).

    Code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Believe it or not, I *MAY* know why it doesn't work!

    In *THIS* code:
    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:
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    moonpeep (12-15-2012)

  • #6
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    You're a genius! Worked like a charm Thank you!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •