Changing src on img tag, can't make it work-Collection of common programming errors

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

    $.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');
                });
    });

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:

    $.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');
                });
    });

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

Originally posted 2013-11-15 04:22:46.