Need help with ajax request - JavaScript Discussion Boards

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:

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.

".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: '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

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. Smile | :)

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. Smile | :)

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.

C#

function OnTargetDrop(){

    //////////////////////////
    alert(oDragItem.value); //for checking a value of dragged item
    alert(oDragTarget.value);//for checking the item that arrive on the target
    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;// brings a value dragged item. if dragged item is <div class="Dragable" selectable="no"style="background-color:#eee8aa;"value="10"> cb13030940</div> brings value as 10. to change to numerical type value-0. if drag the other item, pick the other value.
    var $node = $("#order").children().eq(temp);//by using jQuery, approach the item quantity at the bottom of the table. appoint the tr at the item quantity to id id order, and using $(#order")to approach to tr. using children().eq(temp) to approach to specific td.
//if eq(0) is first td, eq(1)is second td,...eq(temp)->put the value item to temp and approach to specific td. and save the approach object to node. 
    var org_val = $node.text()-0;// by usin :)  :) g $node.text() bring number 300 in the <td>300</td>tag. to change it to numerical type, use -0.  
    $node.text(org_val+tmp_val);//by using $node.txt(changable text) change text in the specific td tag. 
    //////////////////////////

    oDragItem.style.position="";
    oDragTarget.appendChild(oDragItem);
    //oDragTarget.dataTransfer();
    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. Big Grin | :-D

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?

C#

var id = this.FileName.replace(".png", "").replace(".jpg", "") + "_" + index;
var src = this.Path + this.Filename + "?" + new Date().getTime();
// create an image element, and set it up for use later on
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...

JavaScript

$('<img />').attr('src', 'http://urdomain.com/name.jpg').load(function(){
    if(true === this.complete) {
        var width = this.width;
        var height = this.height;
    } else {
        // unable to load image into memory
    }
});

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:

JavaScript

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:

JavaScript

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;
        }
    });

    // and added these functions

    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

My level of frustration with javascript is pretty freakin' high right now, and my opinion of the architecture is about as low as it can possibly get.

I can't seem to get a grasp of how things are scoped.

I'd really like to cuss like a sailor and kick the dog right about now.

the only thing that IS right is the path to the file.

".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