[jQuery] .ajax() calls will not always work
Hi,
I am really new to jQuery and javascript, too. So my question might be
stupid but I couldn't find an answer to my problem in documentation.
I have created a simple web page to display random photograph from my
Flickr gallery. So there is php file that does the job via flickr API
and returns a link to an image. Here is the script that does it:
http://www.bolotnov.info/flickr/getimg.php
and so there is this HTML/JS code that I have put together for this,
please see below.
So the problem is that this won't work with google chrome displaying
timeout error all the time, will not work with Opera displaying ether
"Error: name: Error message: Security violation" or timeout error and
will always work with IE smoothly.
I must be doing something totally wrong here, could someone please
advise on documentation or knowledge I am missing.
Sorry for mad formatting of the code below. can someone suggest a good
JS editor that will support this kind of syntax, btw?
All your advises will be greatly appreciated. Many thanks!
<html>
<head>
<title>sample</title>
<script type="text/javascript" src="code/js/jquery.js"></script>
<script type="text/javascript">
$(function()
{
$(".refr").click(function()
{
//alert('hello');
$.ajax({
type: "GET",
dataType: "text",
url: "http://www.bolotnov.info/flickr/getimg.php",
timeout: 10000,
cache: false,
success: function(res){
$('#MyPicture').html("<img src='"+res+"' />");
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$('#MyPicture').html(errorThrown+"<br />"+textStatus);
}
});
});
});
</script>
</head>
<body>
<div id="MyPicture">...</div>
<a class="refr" href="#">refresh</a>
</body>
</html>
<div id="MyPicture">...</div>
<a class="refr" href="#">refresh</a>
</body>
</html>