This page require Adobe Flash 9.0 (or higher) plug in.

Adobe Spry AJAX LoadURL Method

12 Aug, 2008  Articles Submits, GoodStuff Reviews, Software, Useful Scripts

Oh yeah, just in case I forget I’ll just post this one to remind me. Adobe Spry AJAX LoadURL is one of the method used by Spry Framework to post data accross site without refreshing of pages.

There’s other methods as well, such as Post Form using XHR method. But I’ll be posting on this one first

Like all AJAX you can customized your data to send and trigger a callback functions. Spry LoadURL is part of SpryData.js so make sure you include it in your script tag.

Let’s take a look of the parameters to use:-

var req = Spry.Utils.loadURL = function(method, url, async, callback, opts);

More info on how to use it at here. Here is my demonstration for php.

I wrote some sample on how I use loadURL to with sample effect for callback here.

Check out more on source code sample.

Before Body Tag

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<script>
//To submit data without refresh we usually use loadURL function with inclusion of SpryData.js.
//There are two layers here one is used to contained the form, the other is used for notice.
//The one used for notice comes with fade effect which will trigger when the callback function
//is triggered.
 
function triggerSubmit(){
   var data1_value = document.sample.data1.value;
   var data2_value = document.sample.data2.value;
   var formData = 'data1='+data1_value+'&data2='+data2_value;
   //The next line is to encode the variables values e.g. weird characters to make it safe for transfer
   formData = encodeURI(formData);
   var url ="http://www.isgoodstuff.com/wp-content/demo/process.php";
   Spry.Utils.loadURL('POST', url, true, ReturnWithEffect, {postData: formData, headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"}});
} 
 
function ReturnWithEffect(req){
   //We use xhRequest to received notification from server side, usually the process file will return with an echo/write.
   var result = req.xhRequest.responseText; 
   document.getElementById("notice").innerHTML = result;
   FadeEfx.start();
}            
</script>

After Body Tag

1
2
3
4
5
6
7
8
9
10
11
12

<div class="container">
	<div class="notice" id="notice"></div>
	<script type="text/javascript">
		//By placing this script just below the layer notice, you can call function FadeEfx anytime, by using FadeEfx.start();
		var FadeEfx = new Spry.Effect.Fade('notice');
	</script>
	<form name="sample">
		<p>Data 1 : <input type="text" name="data1" id="data1"></p>
		<p>Data 2 : <input type="text" name="data2" id="data2"></p>
		<input type="button" value="AJAX POST!" onclick="triggerSubmit()">
	</form>
</div>

For Php File - process.php

1
2
3
4
5
6
7

<?php
$data1 = $_POST["data1"];
$data2 = $_POST["data2"];
//Send data back to callback function.
echo "From Server Side - Your Data1 value is ".$data1." and Data2 value is ".$data2;
// You may continue with the form data1 and data2 and do your database thingy
?>

Until next time, happy sprying.

Other Cool Related Stuff

8 Comments so far »

  1. no imageDels (Who am I?) said

    am August 12 2008 @ 7:31 pm

    i have seen this on Google :
    http://www.google.com/search?hl=id&client=opera&rls=en&hs=SUX&q=%22Simple+AJAX+Post+with+Effect%22&btnG=Telusuri&lr=
    or
    http://www.isgoodstuff.com/2008/08/11/adobe-spry-simple-ajax-post-with-effect/

    but i can’t find that article anymore, i really need to know how to post using spry into internal page (the page that calling ajax function self) not the external page

    hope you can write it again,
    thanks

  2. no imageMr.GoodStuff (Who am I?) said

    am August 13 2008 @ 6:25 am

    Oh just edited the post, you can find my sample of codes in the 2nd last paragraph - which have simple AJAX post with effect. Sorry, didnt complete the article last time :3

  3. no imageDels (Who am I?) said

    am August 13 2008 @ 3:10 pm

    ok thanks :D

    i really need that since i’m really new to spry (and ajax)

  4. no imageDels (Who am I?) said

    am August 13 2008 @ 6:44 pm

    hi there sorry to post again,

    i tried your demo and it works fine but i need to use scripting languange such as ASP/PHP, what i need is post data using ajax to the page itself and catch form variable(s) and set it to variable in scripting language

    i heard it can be done using SubmitForm (xhr submit) but i didn’t have actual .asp/.php file for learn, here are the example:
    here
    and
    here

  5. no imageMr.GoodStuff (Who am I?) said

    am August 13 2008 @ 7:35 pm

    Ok, my reedit my demo files again, download it again. There’s a php file for your reference. The prev version is for pure client side used for ppl coding applications for Adobe Air.

  6. no imageDels (Who am I?) said

    am August 14 2008 @ 10:04 am

    very much thanks for the sample :D now i can understand how it works now, i think i can’t post to self page using scripting environment :D, or is there a way to do that? i mean something likes :

    function triggerSubmit(){
    …
    var url =”";
    …
    }

    say i rename mysample.html into mysample.php and add processing to beginning of file for compactness

    …

  7. no imageDels (Who am I?) said

    am August 14 2008 @ 10:06 am

    sorry forgot that i can’t post html or php code there :D
    function triggerSubmit(){
    …
    var url =”mysample.php”;
    …
    }

  8. no imageMr.GoodStuff (Who am I?) said

    am August 14 2008 @ 10:45 am

    email me your some sample of what you are doing code some comments on it. Send it to admin(at)isgoodstuff(dot)com

Comment RSS · TrackBack URI

Leave a comment

Name: (Required)

eMail: (Required)

Website:

Comment: