JavaScript

#realJSOP30-May-13 11:53

30-May-13 11:53

I've already tried that - the image.width property is still 0.

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997

Richard Deeming30-May-13 8:34

30-May-13 8:34

I'm not particularly familiar with the <canvas> tag, but I can see why your _imageWidth is zero: the load(function(){ ... }) method is adding the function as a handler to the image's load event. It won't get called until the image has loaded, which won't happen immediately.

Try putting the rest of your code in the callback:

JavaScript

function doIt()
{
    var _filename      = "http://paddedwall.org/2012mustang/images/blacklights_03.jpg";
    var _divName       = "#canvasesDiv";
    var _sceneWidth    = $(_divName).width();
    var _sceneHeight   = $(_divName).height();

    $('<img />').attr({'id': 'backgroundImage', 'src' : _filename}).load(function()
    {
        if (this.complete === true)
        {
            var _imageWidth = this.width;
            if (_imageWidth === 0)
            {
                _imageWidth = _sceneWidth;
            }

            var _scale = _sceneWidth / _imageWidth;
            var _canvas = $("<canvas>Not html5</canvas>");
            _canvas.css('width', _sceneWidth);
            _canvas.css('height', _sceneHeight);
            _canvas.attr('id', "backgroundCanvas");
            _canvas.css('width', _sceneWidth);
            _canvas.css('height', _sceneHeight);
            _canvas.css('position', 'absolute');
            _canvas.css('top', 0);
            _canvas.css('left', 0);
            _canvas.css('z-index', 0);
            _canvas.css("display", "block");
            $(_divName).append(_canvas[0]);

            var _context = _canvas[0].getContext('2d');
            _context.setTransform(1, 0, 0, 1, 0, 0);
            _context.scale(_scale, _scale);
            _context.drawImage(this, 0, 0);
        }
    });
}

http://jsfiddle.net/hXqMG/[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Manfred Rudolf Bihy30-May-13 8:42

30-May-13 8:42

That's exactly what I meant. Smile | :)

I'm not sure though that load will happen if the node JSOP constructed is not added to the DOM yet.

Cheers!

"I had the right to remain silent, but I didn't have the ability!"

Ron White, Comedian

Richard Deeming30-May-13 8:46

30-May-13 8:46

It seems to work in the jsFiddle I linked to, at least in Firefox.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Manfred Rudolf Bihy30-May-13 8:49

30-May-13 8:49

Thanks for the information Richard!
I should try that one in other browsers as well.

[Modified]Works in IE 10 as well[/Modified]
Cheers!

"I had the right to remain silent, but I didn't have the ability!"

Ron White, Comedian

Richard Deeming30-May-13 8:51

30-May-13 8:51

It also appears to work in Chrome 29, Opera 12.15 and IE10.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Manfred Rudolf Bihy30-May-13 8:53

30-May-13 8:53

Just modified my post for IE 10.

Cheers!

"I had the right to remain silent, but I didn't have the ability!"

Ron White, Comedian

#realJSOP30-May-13 11:54

30-May-13 11:54

That's all well and good for this sample, but the actual code I took it from is 700 lines spread out among four classes.

Manfred Rudolf Bihy31-May-13 1:35

31-May-13 1:35

Do you have this on a public website where one could take a look at the whole thing?

Cheers!

"I had the right to remain silent, but I didn't have the ability!"

Ron White, Comedian

#realJSOP1-Jun-13 2:24

1-Jun-13 2:24

Nope. I don't publish until something is working pretty much the way I want it to. I have a spaghetti-code non-jquery version running just fine, but that's kind of moot since that won't be used by anyone anyway.

FWIW, this little sample is exhibiting the same issues as the big version. I created this sample to simplify everything to try to see what's happening a little easier. Unfortunately, it hasn't helped.

I'm using Chrome to debug, and even though the image appears to load (if you put an alert in the load anonymous function, you can see that it succeeds), nothing shows up on the canvas. I'm willing to concede that I'm doing something wrong, but what it is, I don't know. I've also tried this code in both an aspx page, and a standard html page with the same results.

Richard Deeming3-Jun-13 2:00

3-Jun-13 2:00

If the code you've posted is representative of the code you're using, the problem is quite obvious: when the load method returns, the image hasn't loaded, and so you're trying to draw a blank image. You need to wait until the load event fires before you try to use the image.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

#realJSOP5-Jun-13 8:56

5-Jun-13 8:56

I was under the impression that calling load on the image would cause it to load. Beyond that, what about the line that reads if (this.complete === true) in the anonymous function? Won't that do what you're saying?

Richard Deeming5-Jun-13 9:12

5-Jun-13 9:12

Calling jQuery's load method[^] attaches an event handler to the load event; it doesn't cause the script to block until the image has loaded.

The this.complete === true line in the event handler works because it's called when the image has loaded. The code which follows the call to load(function(){...}) is executing before the image has loaded.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

#realJSOP5-Jun-13 10:54

5-Jun-13 10:54

...and the light goes on.

Is there a way to postpone exiting the anonymous function before loading has completed?

Richard Deeming5-Jun-13 11:02

5-Jun-13 11:02

Not that I've seen. You'll need to trigger the remainder of the code from the anonymous function which handles the event.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

#realJSOP6-Jun-13 2:54

Need help with ajax request

6-Jun-13 2:54

Well, I don't like doing it this way, but I am using what I call a stair-step approach:

JavaScript

function doIt()
{
    doStep1();

    this.doStep1 = function()
    {
        do something 
        do something
        $(img).load(function()
        {
            if (this.complete === true)
            {
                doStep2(img.naturalWidth)
            }
        });
    }

    this.doStep2 = function(width)
    {
        calc scale
        do other suff
        $(obj).dosomeOtherAsynchThing(function()
        {
            doStep3();
        });
    }

    this.doStep3 = function(width)
    {
        do something
        etc...
    }
}

Now that the image is actually being displayed, I can now try to finger out why the scale isn't being set as expected in the context.

marcusKam27-May-13 0:03

marcusKam

27-May-13 0:03

Hello, i am using play framework 1.2.3 with eclipse, i want to call a controller method with this java request, but when i click the button nothing happens. anyone have an idea what went wrong?

Best regards.

<script type="text/javascript">
	$("#request").click(function(){
		
	var reqphone = $('#reqPhone').val();
    	var key = $('#accesscode').val();
   	var fro = $('#from').val();
    	var too = $('#to').val();
    	var myPhone = $('#userPhone').val();

    	var action = #{jsAction @reversetest(':consumer',':accessKey', ':usersPhone', ':reqPhone',':from', ':to') /};
    	
    $.ajax({
    	type:"GET",
    	url =  action({consumer: 'marcus', accessKey: key, usersPhone: myPhone, reqPhone: reqphone, from: fro, to: too}),
    	success: function (response)
    	{
    		$("#XMLArea").val(response);
    	}
    });
	
})
	</script>

<input type="button" id="request" class="button" name="request" style="float: left; top: 50px; left: 310px; position: absolute;"></input>

modified 27-May-13 7:21am.

Dennis E White28-May-13 4:29

Dennis E White

28-May-13 4:29

I don't know the framework but I am curious how is action returning a usable url??

marcusKam wrote:
url = action({consumer: 'marcus', accessKey: key, usersPhone: myPhone, reqPhone: reqphone, from: fro, to: too}),

I would probably start with some breakpoints and step through this. maybe also add an error handler for that ajax call.

best of luck.

as if the facebook, twitter and message boards weren't enough - blogged

marcusKam29-May-13 10:29

marcusKam

29-May-13 10:29

thanks both for your answers, play framework generates a useable urlwhen the action method is called.

I had to move my from the "<head>" section too the "<body>" section cause my button wasnt able to access the script otherwise for some too me unknown reason, anyway i used the jquery .load method and filled it with "action{data}" and it worked as supposed to.

Thanks for the help

Dennis E White29-May-13 10:38

Dennis E White

29-May-13 10:38

marcusKam wrote:
I had to move my <script> from the "<head>" section too the "<body>" section cause my button wasnt able to access the script

any script that will interface the document you want to put towards the bottom of your page. this is especially true when adding button handlers.

you may have seen it work 'sometimes' but when you add handlers like this in the <head> of your document you open yourself up to errors where the handler never gets called.

marcusKam wrote:
play framework generates a useable urlwhen the action method is called.

I hate to say kind of like backbone but I am guessing this is similar in that it's for supporting another MVC framework on the client with a REST backend. pretty cool. Smile | :)

as if the facebook, twitter and message boards weren't enough - blogged

marcusKam29-May-13 10:43

marcusKam

29-May-13 10:43

Yeah you are right! I'm not very experienced at java yet, i've only worked in visual studio before, and when you put the scripts in ur in vs it works perfectly fine.

of course i meant the JsAction method makes the action variable and useable Url and when u post
action{data: "hello"} it just adds the values to the url. Smile | :)