CODEWITHSUNDEEP
jqueryhtmlajax
Grammin
Grammin

Reputation: 12205

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

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.

Upvotes: 0

Views: 1388

Answers (4)

sirmagid
sirmagid

Reputation: 1130

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>

Upvotes: 0

Maktouch
Maktouch

Reputation: 3247

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.

Upvotes: 0

nate_weldon
nate_weldon

Reputation: 2349

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 -->

Upvotes: 0

rickyduck
rickyduck

Reputation: 4084

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

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

Upvotes: 1

Related Questions