[Yann]

Edited (Wayne): moved from How-To/Tutorials formum

hi every one
somebody can explain me how i can retreive data from remote web server and display it on my webapps?
i made a index page with a listitem slide left animation linked to an actu.mobi page.
i would like display result of this page http://www.tahizea.com/mobile/test.asp on my actu.mobi via xmlhttp request.
could you say me what component i need put on my actu.mobi page to display the result?
if you have an example of jquery you will save me
Thanks a lot

[Yann]

i tried this code
$(“m1-actu-resultactu”).load(“http://www.tahizea.com/mobile/test.asp”);
the content of text field “resultactu” disappears but the remote page does not appear
i don’t understand.
can you help me?
thanks

[support-michael]

@Yann
Yes, it is possible. Will post an example shortly.

[Yann]

Thanks a lot

[Yann]

up ?
nobody can help me?
thanks

[Yann]

I tried to put this line on my asp remote page
Response.AddHeader(“Access-Control-Allow-Origin”,”*”)
but i’ve the same error :
XMLHttpRequest cannot load http://*****.***/mobile/test.asp. Origin null is not allowed by Access-Control-Allow-Origin.

🙁

[Yann]

i found a solution whith the script bellow but i would like specify dinamycly the div target
if i change “updatePage; ” by updatePage(target); i need to reload 2 time the page…
see my test.htm bellow
any idea?

Thanks
Yann

<script type=”text/javascript”>
var invocation = new XMLHttpRequest();

function callOtherDomain(url,target)
{
invocation.onreadystatechange = updatePage;
invocation.open(‘GET’, url, true);
invocation.send(cible);
}

function updatePage(target)
{
if (invocation.readyState == 4)
{
if (invocation.status == 200)
{
document.getElementById(“m1-promo-text2″).innerHTML = invocation.responseText;
}
}
}

</script>

<form id=”controlsToInvoke” action=””>
<p>
<input type=”button” value=”Click to Invoke Another Site” onclick=”callOtherDomain(‘http://www.tahizea.com/mobile/test.asp&#8217;,’m1-promo-text2′)” />
</p>
</form>

<div id=”m1-promo-text2″>

</div>

[support-michael]

@Yann
I apologize for the delay in providing an example. Below is a quick outline of an example I made with the src code attached at the end.

I created this simple UI that consists of a panel for displaying remote content and 2 buttons for loading remote content into the panel and clearing the content. The panel’s vertical scrollbar property is enabled and the content area height was expanded to about 775 but really should be much larger to hold all the content. The Get Data button is linked to a custom javascript function “getRemoteData()” that will load remote content. A Clear button is wired to the “clearData()” function to remove all content from the panel.
See attachment remote-data-data.png
I modified the generated HTML by adding a DIV element with id “remote-data”. This div is the root element (i.e., container) for the custom content when it is fetched.
See attachment remote-data-html.png
I linked the Get Data and Clear buttons to the custom javascript functions that I created in the remote-data_custom.js file.
See attachment remote-data-js.png

I encountered the same cross-domain security problem as you so I copied the test content into the same same directory as my mobione webapp. There is a way to get around this problem but it will take more time to describe than is available atm.

Lastly I noticed that the content did not display very well. For example, the line height was too tall and the text did not wrap. So I added a CSS class remote-data to the remote-data.css file and referenced it in the html #remote-data element.
See attachment remote-data-css.png

A final note, this example has some issue where you can only perform 2 iterations of fetching and clearing data. I’ll figure this out later.

Following is a zip containing the design and source files used in this example.
See attachment remote-data.zip

Attachments:

You must be logged in to view attached files.

[support-michael]

The example should be easily modified to load content into a different div your design accounts for that. I might be able to assist more if you can provide more details about how you plan to dynamically update multiple content areas.

[Yann]

Thanks a lot for your example
i found a solution about cross domain problem.
function callOtherDomain(url,target)
{
// native XMLHttpRequest object
document.getElementById(target).innerHTML = ‘sending…’;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ajaxDone(target);};
req.open(“GET”, url, true);
req.send(null);
// IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject(“Microsoft.XMLHTTP”);
if (req) {
req.onreadystatechange = function() {ajaxDone(target);};
req.open(“GET”, url, true);
req.send();
}
}
setTimeout(“ajax(page,’scriptoutput’)”, 10000);
}
function ajaxDone(target) {
// only if req is “loaded”
if (req.readyState == 4) {
// only if “OK”
if (req.status == 200 || req.status == 304) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML=”ajax error:\n” +
req.statusText;
}
}
}​
now i can get remote asp page from html and display it in my dynamic div.
i also add a specific css for this custom page.
thanks again
Yann

[aurontidus]

Yann,

could you please tell me how do you use your function, because i have to make my website works with a web service, and i don’t know how to do it.

Thanks in advance

[Yann]

Hi aurontidus
i post an example in attachment.
i made an remote asp page and i added a:

Response.AddHeader"Access-Control-Allow-Origin","*" 

i put in this ASP page my div and add a custom css called by this function

$("head").append(
       $("<link rel='stylesheet' href='promo_custom.css' type='text/css'/>"));

(not in my attached example)

so i call from my local HTML page a remote ASP page. i made this because i want to try compile my html pages
i hope i could help you
Yann

Attachments:

You must be logged in to view attached files.

[support-michael]

@Yann

I started to mention the technique you describe for loading a custom css file. Here is a similar example of how I load my custom css after the UI is loaded and ready. This phoneui.documentReadyHandler() function is stubbed out in you custom.js file for your UI project.

phoneui.documentReadyHandler = function() {
     $("head").append(
                 $("<link rel='stylesheet' href='mobibike-news_custom.css' type='text/css'/>"));
         
    loadArticles();
}

[Yann]

Yes I took your model to do this, but I think that aurontidus is interested to display the remote ASP page from local HTML. If I understood correctly?
😉
Yann

[aurontidus]

Actully, i have to display the result of a web service call.

For example, i have to type a zipcode in a textfield, and it will display the result, via this web service :

http://www.webservicemart.com/uszip.asmx?op=ValidateZip

Anyone knows how to do this ?

[Author]

Posts