CODEWITHSUNDEEP
jqueryhtml
Itz Raghu
Itz Raghu

Reputation: 457

How to get the image src which is dynamically created

I am making gallery application.In which i am displaying some images from a folder to index.html page by fetching image path from database and appending this path into a div Dynamically. my image folder name is tutor_images

Here is the index.html code where i am appending the images

<div id="allTutors" class="slider filtering scrollpoint sp-effect5" >
<div class="lists">
</div>
</div>

Now this js code is appending the imaged path to div.its working perfectly

 $(document).ready(function(){
    $.ajax({
        url:'php/all-tutors.php',
        type: 'GET',
        success:function(data){
            var result = $.parseJSON(data);
            $.each(result, function(key, value){
                $.each(value, function(k,v){
                    if (k === 'image_path') {
                        var gh = $("<img id='tutorImg' src="+v.slice(3)+">");
                        $('#allTutors .lists:first')
                        .clone()
                        .append("<img id='tutorImg' src="+v.slice(3)+"><button id='viewTutor' class='btn btn-primary'>View Profile</button>")
                        .appendTo($('#allTutors')); 
                    }
                    if (k === 'name') {
                        $('#allTutors .lists:first')
                        .clone()
                        .append("<h4 id='tutorList'>"+v+"</h4><br/>")
                        .appendTo($('#allTutors'));
                    }

                });
            });
        }
    })

    });
});

Now , My problem is:

i want that when i click the specific button next to the image than i get the src of that images .

please help me .!

Upvotes: 1

Views: 3333

Answers (3)

M&#225;rio Garrido
M&#225;rio Garrido

Reputation: 1

You can solve the problem by replacing the src attribute (i dont advise that):

<img id="yourImageId" src="assets/img/image01.jpg" alt="..." />
<button id="yourButtonId">NEXT</button>

<script src="jquery.js></script>
<script>
$( "#yourButtonId" ).click(function() {
   #( "#yourImageId" ).attr("src").replace("image01.jpg", "image02.jpg");
});
<script>

or you can code in html a list of images all of them with "display: none;" and every time you click next, you change the actual pic to display none and the next one to display block.

Upvotes: 0

Ulad Kasach
Ulad Kasach

Reputation: 12808

Another way to solve it that i generally apply is when generating each div, give it's id an index.

For example

 <div id="allTutors">
   <img id = 'tutorImage1' src="image/src.jpg" alt="image" />
   <button onclick = 'getTheSrcForThisOne(1)'>get src</button>
 </div>

 <script>
      function getTheSrcForThisOne(which){
         console.log(getElementById("tutorImage"+which).src);
      }

 </script>

Just add the id to the element at the same time you're adding the src. Then add the id to the button aswell. Simple and lets you interact with each one and know which one is being acted on.

Edit

Better yet, make the image a button itself.

 <div id="allTutors">
   <img src="image/src.jpg" alt="image" onclick = 'getMySRC(this)'/>
 </div>

 <script>
      function getMySRC(forWho){
         console.log(forWho.src);
      }
 </script>

Upvotes: 0

Pepo_rasta
Pepo_rasta

Reputation: 2900

you need to listen to #allTutors due to dynamic content

$('#allTutors').on('click','button',function(){
  img = $(this).prev('img');
  if(img.length > 0){
    alert(img.attr('src'));
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="allTutors">
  <img src="image/src.jpg" alt="image" />
  <button>get src</button>
</div>

Upvotes: 2

Related Questions