CODEWITHSUNDEEP
javascriptjqueryajaxhtml
ONE_FE
ONE_FE

Reputation: 996

change an image using ajax request in jquery

I want to use $.ajax to get any picture from a URL and show it on the page. It should happen when button is clicked. 

$(document).ready( function() {
   $("button").click(function(){
      $.ajax({url: "index.html", success: function(result){
         $("#image").attr("src","test.png");
      }});
   });
});

HTML Code: 

<button type = "button">Click Me</button>
<div>
   <img id = "image" src = ""/>
</div>

Edit: The errors is, enter image description here

Upvotes: 0

Views: 1732

Answers (2)

ONE_FE
ONE_FE

Reputation: 996

This works fine. But still I need to use a localserver to run this without the console error mentioned in edit. 

$(document).ready( function() {
            $("button").click(function(){
                var url = 'test.png';
                $.ajax({ 
                    url : url, 
                    cache: true,
                    processData : false,
                }).always(function(){
                    $("#image").attr("src", url);
                }); 
            });
        });

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

Use a server and serve your file over the http protocol

Upvotes: 1

Related Questions