|
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
|
|
|
|
|
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.
".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
|
|
|
|
|
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
|
|
|
|
|
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?
".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
|
|
|
|
|
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
|
|
|
|
|
...and the light goes on.
Is there a way to postpone exiting the anonymous function before loading has completed?
".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
|
|
|
|
|
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
|
|
|
|
|
Well, I don't like doing it this way, but I am using what I call a stair-step approach:
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.
".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
|
|
|
|
|
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.
|
|
|
|
|
I don't know the framework but I am curious how is action returning a usable url??
marcusKam wrote: url = action({consumer:
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
|
|
|
|
|
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
|
|
|
|
|
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. 
as if the facebook, twitter and message boards weren't enough - blogged
|
|
|
|
|
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.
|
|
|
|
|
Everything inside the Ajax call should be a JSON object. In your second line of it, you have = instead of :
Fix that, and fix the URL of your action and this should work.
|
|
|
|
|
function OnTargetDrop(){
alert(oDragItem.value);
alert(oDragTarget.value);
var temp = oDragTarget.value;saving a value of target div that brings the position of dragged box
if arrived target is <div class="DropTarget" value="2"> brings 2 as value
var tmp_val = oDragItem.value-0;
var $node = $("#order").children().eq(temp);
var org_val = $node.text()-0;
$node.text(org_val+tmp_val);
oDragItem.style.position="";
oDragTarget.appendChild(oDragItem);
if (navigator.platform=="iPad") MakeDragable(oDragItem);
}
<blockquote class="FQ"><div class="FQA">Quote:</div>
<td>
{
<div class="DropTarget" value="1">
<div class="Dragable" seletable="no" style="background-color:#eee8aa;" value="10">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#87cefa;" value="10">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#66cdaa;" value="20">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#eee8aa;" value="10">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#eee8aa;" value="30">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#87cefa;" value="20">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#66cdaa;" value="20">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#eee8aa;" value="10">cb13030940</div>
</div>
<blockquote class="FQ"><div class="FQA">Quote:</div></td></blockquote>
</blockquote>
<blockquote class="FQ"><div class="FQA">Quote:</div><td align="center">
<div class="DropTarget" value="2">
<div class="Dragable" seletable="no" style="background-color:#eee8aa;" value="20">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#87cefa;" value="10">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#66cdaa;" value="20">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#eee8aa;" value="20">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#87cefa;" value="20">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#87cefa;" value="20">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#66cdaa;" value="10">cb13030940</div>
</div>
</td></blockquote>
<blockquote class="FQ"><div class="FQA">Quote:</div>
<blockquote class="FQ"><div class="FQA">Quote:</div><%
int sum1, sum2;
%></blockquote>
<tr align="center" id="order">
<td width = "25">Order Quantity</td>
<td><%=sum1%></td>
<td><%=sum2%></td>
<td>sum3</td>
<td>sum4</td>
<td>sum5</td>
<td>sum6</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr></blockquote>}
}// when the value gets 1, the value in the div's sum
becomes sum1. when the value gets 2, the value in the div's sum becomes sum2. when div moves, sum1 or sum2 change depends on specific value,
|
|
|
|
|
What's your question?
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
can I recommend that you use.
http://jsfiddle.net/[^]
and then discuss the problem that you are having and need help with. 
as if the facebook, twitter and message boards weren't enough - blogged
|
|
|
|
|
I want to add GO button. After press the go button then stage3 will open in New tab.
Please help me and add the Line in below Script and
reply on my email :abmanish71@gmail.com
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Combo Boxes</title>
</head>
<body>
<form name="isc">
<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>Select your department</option>
<option>ACCT</option>
<option>BACC</option>
<option>BMGT</option>
</select>
<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
</select>
<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
</select>
<input type="button" name="next" value="Next" onclick="window.location=stage3.options[stage3.options.selectedIndex].value;" style="font-family:Arial;Z-INDEX: 105; POSITION: absolute; TOP: 20px" enable>
<script>
</script>
|
</form>
</body>
</html>
____________________
Thanks & Regards
Manish Kumar
E - mail : abmanish71@gmail.com
modified 24-May-13 23:23pm.
|
|
|
|
|
What do you mean by "stage3 will open in New tab?" Isn't stage3 a dropdown list?
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
I'm trying to load an image and retrieve its width/height. The image appears to be okay, but width/height are zero. The image isn't part of the page (yet), I'm simply creating it for later. Anyone got any help for me?
var id = this.FileName.replace(".png", "").replace(".jpg", "") + "_" + index;
var src = this.Path + this.Filename + "?" + new Date().getTime();
this.ItemImage = new Image();
$(this.ItemImage).attr(
{
'src': src
,'id' : id
});
this.Width = $(this.ItemImage).width();
this.Height = $(this.ItemImage).height();
".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
|
|
|
|
|
John Simmons / outlaw programmer wrote: The image isn't part of the page (yet), I'm simply creating it for later.
That is the answer to your problem.
since the image isn't loaded yet the browser won't set the width and height properties. will the image ever be loaded by the browser??
maybe try something like...
$('<img />').attr('src', 'http://urdomain.com/name.jpg').load(function(){
if(true === this.complete) {
var width = this.width;
var height = this.height;
} else {
}
});
as if the facebook, twitter and message boards weren't enough - blogged
|
|
|
|
|
Your suggestion didn't work. I'm going to try adding a hidden div to the document, and then add images to that div. Maybe that will do what I need...
".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
|
|
|
|
|
John Simmons / outlaw programmer wrote: Your suggestion didn't work
what part didn't work? did you get the callback from the load event?
as if the facebook, twitter and message boards weren't enough - blogged
|
|
|
|
|
I was trying to do this:
function MyClass
{
this.property1 = 'somevalue1';
this.property2 = 'somevalue2';
this.Height = 0;
this.Width = 0;
$('<img />').attr({'id': id, 'src' : src}).load(function()
{
if (true === this.complete)
{
Width = this.width;
Height = this.height;
}
});
}
That didn't work (this.width and this.height were the expected values, but trying to assign the vars did not work. So I changed it to this:
function MyClass
{
this.property1 = 'somevalue1';
this.property2 = 'somevalue2';
var Height = 0;
var Width = 0;
$('<img />').attr({'id': id, 'src' : src}).load(function()
{
if (true === this.complete)
{
Width = this.width;
Height = this.height;
}
});
this.width = function()
{
return Width;
}
this.height = function()
{
return Height;
}
}
I have no idea why I can't assign vars the way I originally tried it. IMHO, Javascript is nothing more than a hack whose main intent is to drive real programmers insane.
".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
|
|
|
|
|
John Simmons / outlaw programmer wrote: $('<img />').attr({'id': id, 'src' : src}).load(function()
{
if (true === this.complete)
{
Width = this.width;
Height = this.height;
}
});
did you account for the fact that the .load(...) is an asynchronous function?? the other thing of course is putting a break point in the response for the load function.
maybe you are getting a bad response from the load response because it's pathed out wrong??
as if the facebook, twitter and message boards weren't enough - blogged
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
