I've heard that Opera Mobile is supporting AJAX.
So I've tied to wrote a simple page that uses ...
Can anyone tell me what is wrong with this page?
<html>
<head>
<script language="javascript">
<!--
var fname = "nav_test.html";
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
function mkDoc()
{
if (xmlhttp.readyState == 4)
{
document.open();
document.writeln(fname);
document.writeln(xmlhttp.responseText);
document.close();
}
}
xmlhttp.onreadystatechange= mkDoc;
xmlhttp.open("GET", fname, true);
xmlhttp.send(null);
-->
</script>
</head>
<body />
</html>
In nav_test.html, which is in the same directory as the file shown above, there is only one line:
<p>test</p>
After loading it with Opera Mobile 11 it displays only
"nav_test.html".
I've checked and this page works with Nokia N900 default browser. But it doesn't with Midori browser. I have also tested it with Firefox browser on my PC and it works there as well.
I wish to be able to run this page under Opera since Opera ca be installed on most of modern mobile phones.
Of course it supports AJAX. Just run any AJAX framework's showcase on it (such as Ext's showcase).
As for your code, at best download any working example and modify it, if you start learning JavaScript. Don't also write your own AJAX invocation support for various browsers, there's no need for it, because it was already written a thousend times. At best use prototype or jQuery - you can find tons of examples.
Related
i'm experiencing problems with testing my web application on firefox and internet explorer, the problem seem to be in the ajax calls made by my application to the server i realized this when i debugged my application using FIDDLER WEB DEBUGGER and i noticed that i don't get any response when im using IE or firefox.
I tried to change my request type from "GET" to "POST" and add a cache buster without any success.
Please peep my CODE:
this is where i create my ajax object:
function createXmlHttpRequestObject()
{
var xmlHttp;
if(window.ActiveXObject){
try{alert(0);
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
xmlHttp = false;
}
}
else{
try{
xmlHttp = new XMLHttpRequest();
}
catch(e){
xmlHttp = false;
}
}
if(!xmlHttp){
alert("Can't create object!!!");
}
else{
return xmlHttp;
}
}
and this is where i send the request:
function process(){
var params = "word="+word;
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
xmlHttp.open("POST","/gwizz/scripts/definition.php",true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length",params.length);
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(params);
}else{
setTimeout('process()',1000);
}
}
Any piece of help will be much appreciated.
#Moor
I can't answer exactly what is wrong but here are some pointers that may help you.
XMLHttpRequest - Perhaps this is a bit of topic but think its useful for more browser independent code.
I suggest using to create Ajax request and use ActiveXObject only in case you can't find XMLHttpRequest. Most browsers including IE8+ support this object so you have less code dependent on browsers. e.g. below copied from http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Use Developer tools Firefox and IE modern versions come with very useful developer tools. Check the network sections and then perform clicks on your web application that are expected to invoke the ajax call. The full details of the http request actually fired are available in the network section. It will show you how the browser sees the request.
use console.log This question talks about some logging support which is available in IE. The same is also available in firefox. You should be able to pin point where your code execution fails. Does IE9 support console.log, and is it a real function?
If I were to take a guess, I would say the URL that is used to connect to the server may be resulting in 404.
Alright StackOverflow, I've got a weird one today. I am working on adding pasting of images to a website. It works for Firefox and Chrome but fails for IE. When I turn on the debugger it gives an error on:
var items = event.clipboardData.items;
saying that event.clipboardData.items is undefined. What is the way to do this in IE?
Here is the code which actually comes from the WebKit layout tests:
<!DOCTYPE html>
<html>
<head>
<script>
function paste(event){
var items = event.clipboardData.items;
console.log(items.length);
for (var i = 0; i < items.length; ++i) {
if (items[i].kind == 'file' && items[i].type == 'image/png') {
var blob = items[i].getAsFile();
var url = window.URL.createObjectURL(blob);
document.getElementById('dest').src = url;
}
}
}
window.onload = function (e) {
document.body.onpaste = paste;
}
</script>
</head>
<body contenteditable="true">
<img id="dest">
</body>
</html>
The specific workflow I'm trying to allow is for a user to use the Snipping Tool to take a snapshot and to then paste that image into IE. Normally I would tell the user to use Chrome or Firefox but this is for work and we are restricted to IE. Thanks for the help!
My testing Environment:
Windows 8 64bit
IE 10
This is a really old issue, but copying an image from snipping tool to IE10 is simply not possible. The functionality is added in Edge. IE10 does not have the tools to paste images from clipboard.
I have an existing jQueryMobile site that's working well. I now need to modify one of the HTML forms to use AJAX to update the page with some content that will be retrieved via a PHP script.
I've done this in the past with non jQueryMobile sites and would typically add a Javascript to the head section and add this attribute to the form element (an input text field in this particular case):
onchange="updateFormContent(this.value)"
The actual script would be like this:
function updateFormContent(str)
{
if (str=="")
{
document.getElementById("Name").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("Name").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","nameSearch.php?name="+str,true);
xmlhttp.send();
}
I'm trying to do the same thing with my HTML Form on my jQueryMobile site and getting stuck. Here's a simple example of my HTML form:
http://jsfiddle.net/4zjSx/
When the user enters something in the Name field I would like to trigger the "nameSearch.php?name=" php page which searches the database for any matching names and displays the results on the same page, updating a DIV in the process.
Appreciate any tips to point me in the right direction or any working examples of a jQueryMobile form page that does something similar.
http://www.w3schools.com/ajax/ajax_aspphp.asp
Think you are looking for this.
I have protocol (like http) with scheme managed with 3rd party App registered in Mac OS X.
I.e, x-someapp://someaction or something like that.
How can I open this URL with Google Chrome?
By default, Chrome starts searching in Google engine instead launching App and passing URL handling to it...
Safari launches some registered App. And it is right thing.
Firefox and Opera asks what to do... and I can launch App also.
But Chrome... Doesn't ask.
I even tried to write some HTML page with JavaScript inside to send XHttpRequest:
function _httpExecuteCallback()
{
if (httpRequestCallbackFunction != null) {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
httpRequestCallbackFunction();
httpRequestCallbackFunction = null;
}
}
}
}
function _httpGet(url, callbackFunction)
{
httpRequest = false;
httpRequestCallbackFunction = callbackFunction;
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = _httpExecuteCallback;
httpRequest.open('GET', url, true);
httpRequest.send(null);
}
_httpGet('x-someapp://test',function(){})
No results also...
The current accepted solution has a problem with Chrome for SSL https. Watching the console log, Chrome blocks the request because it thinks the custom url protocol is not secure:
[blocked] The page at reports blah blah ran insecure content from customproto//blah blah
Here is a solution (this took me a few days to research):
<input type='button' value='Test Custom Url' onclick='exec()'>
<script>
function submitRequest(buttonId) {
var d = (window.parent)?window.parent.document:window.document
if (d.getElementById(buttonId) == null || d.getElementById(buttonId) == undefined) return;
if (d.getElementById(buttonId).dispatchEvent) {
var e = d.createEvent("MouseEvents");
e.initEvent("click", true, true);
d.getElementById(buttonId).dispatchEvent(e);
}
else {
d.getElementById(buttonId).click();
}
}
function exec(){
var d = (window.parent)?window.parent.document:window.document
var f = d.getElementById('customUrlLink')
if (f ) {f.parentNode.removeChild(f);}
var a = d.createElement('a');
a.href = 'mycustomproto://arg1';
a.innerHTML = "Link"
a.setAttribute('id', 'customUrlLink');
a.setAttribute("style", "display:none; ");
d.body.appendChild(a);
submitRequest("customUrlLink");
}
</script>
This code will not work for IE. I've found using this technique IE limits the argument of the custom protocol to less than 1000 where as using the iFrame technique IE will allow 2083 chars.
The only way to overcome the url limit in javascript is chuck the data and call multiple times. If anyone wants to take a stab at that, please let me know how it goes. I would like to use it.
To handle long urls in the executing app, pass a token into the app and have it go get the data from a url GET.
So for right now I am using one function for Chrome/FF and another function for IE.
These links helped me develop this solution:
https://superuser.com/questions/655405/custom-protocol-handler-not-working-in-chrome-on-ssl-page
Simulating a click in jQuery/JavaScript on a link
(wish I had known this a few days ago....hope this helps someone)
==================================================
Update: (8hr later)
==================================================
Jake posted a great solution for chrome: https://superuser.com/questions/655405/custom-protocol-handler-not-working-in-chrome-on-ssl-page
This works in chrome only:
window.location.assign("customprotocol://");
It will fail in an iframe so this is working:
var w = (window.parent)?window.parent:window
w.location.assign(service + '://' + data)
==================================================
Update: (weeks later)
==================================================
All of the examples of opening the custom protocol, including my own, have a "://" in the url. And this is what is causing the SSL warnings.
Turns out the solution is to change "://" to ":"
so do this:
src="x-myproto:query" .....
and the SSL warnings will go away.
==================================================
Follow: (after months of production use)
==================================================
This has been working well for chorme. Detect the browser and if chrome do this:
var w = (window.parent)?window.parent:window
w.location.assign('myproto://xyzabcdefetc')
For IE and other browsers I do something slightly different.
Note that browsers do impose a limit on how much data you can put in custom url protocol. As long as your string is under 800 chars this seems to be the magic number for which works in all browsers.
It looks like it's Google's locationbar parsing which is getting in the way.
The browser, however, does seem to handle custom URL schemes properly. Try this in your locationbar:
javascript:document.location = 'myscheme://whatever'
Any link on your page that uses the custom scheme should also do the right thing.
I found the solution that works with Chrome.
I use the IFRAME-way.
Example (with JQuery):
$("body").append('<span id="__protoProxy"></span>');
function queryWord(aWord)
{
var protoProxy = document.getElementById('__protoProxy');
if (protoProxy)
{
var word = aWord.replace('"','\"');
protoProxy.innerHTML = '<div style="display:none;"><iframe src="x-myproto://query?' + word + '"></iframe></div>';
}
}
queryWord('hello');
Here's a solution that also includes a redirect to the App Store / Play Store if the user doesn't have the app. It uses a setTimeout for this. It also makes use of an iframe to support more browsers. So this works on Chrome, and any other mobile browser. We use this as my company, Branch. Just modify the two links below to correspond to your URI and App Store link.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
window.onload = function() {
// Deep link to your app goes here
document.getElementById("l").src = "my_app://somepath";
setTimeout(function() {
// Link to the App Store should go here -- only fires if deep link fails
window.location = "https://itunes.apple.com/us/app/myapp/id123456789?ls=1&mt=8";
}, 500);
};
</script>
<iframe id="l" width="1" height="1" style="visibility:hidden"></iframe>
</body>
</html>
Again, this should work on any browser, thanks to the iframe.
If Chrome does not recognize the URL scheme, it defaults to a search.
This is what I see in Safari:
alt text http://img62.imageshack.us/img62/6792/clipboard02oh.jpg
and in Firefox:
alt text http://img138.imageshack.us/img138/9986/clipboard04xk.jpg
I believe the reason why Chrome defaults to search is that there are special google searches that use the colon.
E.g:
define: dictionary
filetype:pdf google chromium
This is one of the annoyances I have with Firefox, I have to jump to the "search box" rather than the address bar to execute these types of searches. Since Chrome does not have a separate search box like Firefox, IE and Safari have, this functionality is required.
Ajax requests won't get you around this.
Some weeks later ....
Looks like window.location.replace('myscheme://whatever') has full cross-browser support , works with chrome,firefox,safari,edge,opera see https://developer.mozilla.org/en-US/docs/Web/API/Location/replace
My ajax script only works in Firefox and not ie why??
========================================
<html>
<head>
<script language=Javascript>
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
alert("XMLHttpRequest not supported");
return null;
};
function dochange(src) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById(src).innerHTML=req.responseText; //retuen value
setTimeout("dochange('showResult')",5000);
}
if (!req.responseXML.documentElement && req.responseStream)
req.responseXML.load(req.responseStream);
}
};
req.open("GET", "ajax.php"); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8"); // set Header
req.send(null); //send value
}
window.onLoad=dochange('showResult');
</script>
</head>
<body>
<div id="showResult"></div> <!–page result will be displayed here–>
</body>
</html>
Luke, use the Source! Better yet, use a proven JS library, e.g. jQuery. They deal with all of this cr*p and they do it better than you would ever have the time to do yourself.
Update:
Alex -- all kidding aside. The reason we are all telling you to use jQuery (or one of the other major Javascript libraries) is because getting this stuff to work on all (or even close to all) browsers is genuinely hard. As mangled as MS's handling of HTML and CSS is (and believe me, it sucks) their various implementations of JavaScript run the gamut from crap to huge-steaming-pile-of-crap. The various JS libraries give you standard, cross-browser ways of doing things -- stuff that it has taken real pros years to get right. You really, really don't want to waste your time on this stuff.
So, use a good library, get it working in Firefox using Firebug as your debugger, and you have a pretty good chance it will work in IE.