How can I change an image on a page with a button click using jquery and ajax?

Question

I have a button on my html page that when I click it I would like it to asynchronously change a specific image on my page. So I have something like:

<a href="/test/page"> button </a>

And I would like that to change my image here:

<div id="container" style="display: none">
  <img src="/test/image.png" />
</div>

I think I'm suppose to use ajax here but I am very new to web development and I'm not sure, and suggestions would be appreciated.

Note: I would like this to happen without loading a new page, just reloading the image.

What do you want to change it to? If a server doesn't tell you what you need to change it to, you don't need Ajax. — Ry-
– Ry- ♦, Commented Apr 17, 2012 at 13:49
It gets changed by the specific button that they click, so maybe i don't need ajax? — Grammin
– Grammin, Commented Apr 17, 2012 at 13:51

rickyduck · Accepted Answer · 2012-04-17 13:50:13Z

1

$('a').click(function(e){
    e.preventDefault();

    $('img').attr("src","newURL");
});

answered Apr 17, 2012 at 13:50

rickyduck

4,08414 gold badges62 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ry- Over a year ago

e.preventDefault; won't do anything.

Nick Bork Over a year ago

it prevents the A from actually clicking and navigating away from the page

user57508 Over a year ago

@minitech you should be more clear and give the guy a hint :) eg "probably you've meant e.preventDefault();" ...

nate_weldon · Accepted Answer · 2012-04-17 14:01:20Z

I would start with looking at the jquery and jquery-ui api documentation

http://api.jquery.com/jQuery.ajax/

http://jqueryui.com/demos/button/

what you want is a submit button that will make an ajax call and re-load a specific div.

The question about ajax is where are you getting the image from. If its from a back-end server you should use a ajax call. But if its all on the client you can just a make a normal java script call.

rough example of a button with an ajax call to some back end server

<script>
$(function() {
    $( "input:submit", ".demo" ).button();
    $( "a", ".demo" ).click(function() {
           $.ajax({
               url: "some url call to get image",
               data: " any data you want passed",
               success: function(html) {
                       $("#demo").html(html); // html you want reloaded for the div. 
              }
    });
});
</script>



<div class="demo">


<input type="submit" value="A submit button">



</div><!-- End demo -->

Maktouch · Accepted Answer · 2012-04-18 07:05:49Z

0

How about we don't use AJAX on this one?

HTML:

<a href="#" class="imageChanger" data-imgsrc="/link/new/image.jpg"> Press me </a>
<a href="#" class="imageChanger" data-imgsrc="/link/new/image23.jpg"> Press me too! </a>
<div id="container">
   <img src="lalala.jpg">
</div>

JS:

$(function() {
  $(document).on("click", ".imageChanger", function(e) {
    e.preventDefault();

    newSrc = $(this).data("imgsrc");

    $("#container").empty().append( '<img src=" ' + newSrc + ' ">' );

  });
});

This is typed from head so it might not work. I'll check it in the morning.

answered Apr 18, 2012 at 7:05

Maktouch

3,24723 silver badges21 bronze badges

Comments

sirmagid · Accepted Answer · 2015-09-29 19:58:12Z

0

var counter = 1;
$(function() {
var imgArray = 
new Array("slide/1.jpg","slide/2.jpg","slide/3.jpg","slide/4.jpg");
$(document).on("click", "#btnSubmit", function(e) {
 e.preventDefault();
 if(counter>=imgArray.length)
 {
 counter=0;
 }
 newSrc = imgArray[counter++];//   $(this).data("imgsrc");
 $("#container").empty().append( '<img src=" ' + newSrc + ' " class="image-1-1"  width="100%" height="400">' );

});
});

html

<div id="container" class="coffee-span-8 column-1">
<img src="/slide/1.jpg" class="image-1-1"  width="100%" height="400" ></img>
 </div>
 <div class="coffee-span-6"><form METHOD="LINK" ACTION="index.html">    <button id="btnSubmit" type="submit">next</button></FORM>
 </div>

edited Sep 29, 2015 at 19:58

answered Sep 29, 2015 at 19:07

sirmagid

1,1301 gold badge16 silver badges23 bronze badges

1 Comment

Shotgun Ninja Over a year ago

Why is Flash being used here? Where was this in the original question?

Collectives™ on Stack Overflow

How can I change an image on a page with a button click using jquery and ajax?

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related