CODEWITHSUNDEEP
javascriptjqueryhtmljson
Icaro
Icaro

Reputation: 14845

Changing src on img tag, can't make it work

I have been trying to change a image in a webpage using jquery and httprequest, without any luck... after research a lot I decide to ask for help. The code is pasted bellow and I first try to ask for the json (what works fine) and then update the scr on the image... didn't work. For a final test I use a mouseover and mouse out function and didn't work as well, funny thing is that other property like, show and hide works fine, the only problem is with the attr('scr','').

Thanks

<!DOCTYPE html>
<html>
<head>
<script src="..\js\jQuery.js"></script>
<script>
  $.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php", 
  {plantSelected:"ARGYRANTHEMUM-POLLY"},
  function(data){
    $('#a1').attr('scr','data:image/jpg;base64,'+data.plantDetail.Image);
  });
  $(document).ready(function() {
    $('#a1').mouseover(function(e) {
      $('#a1'.attr('scr','http://www.containernurseries.co.nz/images/services.gif');
    }).mouseout(function(e) {
      $('#a1').attr('scr','http://www.containernurseries.co.nz/images/services.gif');
    });
  });
</script>
</head>

<body>
<img id="a1" src="http://www.containernurseries.co.nz/images/contacticon.gif" width="18" height="37"/>


</body>
</html>

Upvotes: 1

Views: 1250

Answers (2)

Xitalogy
Xitalogy

Reputation: 1612

There are several problems I found and wrestled with, but finally got some working code:

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<img id="a1" src="http://www.containernurseries.co.nz/images/contacticon.gif" width="18" height="37"/>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
    $.getJSON("http://ip.jsontest.com", null,
            function (data) {
                console.log(data)
            });
    $(document).ready(function () {
        ($('#a1')).mouseover(function (e) {
            ($('#a1').attr('src', 'http://www.containernurseries.co.nz/images/services.gif'));
        }).mouseout(function (e) {
                    ($('#a1')).attr('src', 'http://www.containernurseries.co.nz/images/contacticon.gif');
                });
    });
</script>
</body>
</html>

You can see it work here:

http://www.sanbarcomputing.com/flat/forumPosts/imgSrcType/imgSrcTypeNoComments.html

This code uses a service called "JSONTest" to get properly formatted JSON code. This returns an object (data) of key/value {ip: "xxx.xxx.xxx.xxx"} which shows your ip address. Here is the services website that I use to get the JSON response:

http://teamaqua.github.com/JSONTest/

To see the console log output, just open a console in your browser (hit the F12 key, for instance, or open the FireBug plugin for FireFox. Drill down into the object to see the key/value pair properly formatted in the console.

I fixed your code with the scr->src typo fix and some other things needing fixing:

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<img id="a1" src="http://www.containernurseries.co.nz/images/contacticon.gif" width="18" height="37"/>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
    $.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php",
            {plantSelected:"ARGYRANTHEMUM-POLLY"},
            function (data) {
                ($('#a1')).attr('src', 'data:image/jpg;base64,' + data.plantDetail.Image);
            });
    $(document).ready(function () {
        ($('#a1')).mouseover(function (e) {
            ($('#a1').attr('src', 'http://www.containernurseries.co.nz/images/services.gif'));
        }).mouseout(function (e) {
                    ($('#a1')).attr('src', 'http://www.containernurseries.co.nz/images/contacticon.gif');
                });
    });
</script>
</body>
</html>

You can see it (possibly) fail here:

http://www.sanbarcomputing.com/flat/forumPosts/imgSrcType/imgSrcType.html

I get a cross-domain error in Chrome, and it seems to fail silently in IE and FireFox:

XMLHttpRequest cannot load http://www.containernurseries.co.nz/json/jsonPlantDetails.php?plantSelected=ARGYRANTHEMUM-POLLY. Origin http://www.sanbarcomputing.com is not allowed by Access-Control-Allow-Origin.

Here is a good post that talks about one way to fix this (changing it to JSONP), but since your server returns JSON, not JSONP, it does not work either (I tried):

stackoverflow: access-control-allow-origin-not-allowed-by

You would need to return the result in the form of a JSONP JavaScript executable function from the server, I believe. To get a JSONP request sent, you would change this line:

$.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php",

To this:

$.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php?callback=?",

jQuery then would automatically produce a JSONP request for you. It works, but since the result is not executable JavaScript, you get the following error in Chrome:

Uncaught SyntaxError: Unexpected token :

Since I think Chrome is trying to execute the JSON as a function, which it is not.

Changes need to be made to the server, I believe, to get this working cross-domain, if you need that.

Here is a good article on cross-domain issues:

https://developer.mozilla.org/en-US/docs/HTTP_access_control

Upvotes: 1

Trevor
Trevor

Reputation: 6689

Looks like a typo, scr should be src when assigning the attribute for a1

Upvotes: 6

Related Questions