php - Getting trouble in fetching individulal src of a dynamically appended images using JQUERY -
my problem is:
when click on each button next image, gives me single image src time.
what want is:
when click on button next image, give src of particular image. here code, appending images:
<section id="searchtutor"> <div class="row"> </div> </section> now , here jquery codes appending images div
$(document).ready(function() { $.ajax({ url:'../php/alltutors.php', type:'get', success:function(data) { var result = $.parsejson(data); $.each(result, function(key, value){ $.each(value, function(k, v){ var div_image = $('<div class="col-md-6 images"></div>'); var div_data = $('<div class="col-md-6 data"></div>'); if (k == 'image_path') { var div = $(div_image).html("<br><img id='tutorimg' src="+v+" style='width:200px; height:250px; border:5px solid #f5f7fa; border-radius:15px;'/><br><br><br>"); $('#searchtutor .row').append(div); } if (k == 'name') { var name = $(div_data).html("<h4>"+v+"</h4><span'><button id='viewtutor' class='btn btn-success'><i class='fa fa-user'></i> view profile</button> <button class='btn btn-danger'><i class='fa fa-times'></i> delete</button></span><hr>"); $('#searchtutor .row').append(name); $('#searchtutor .row >.data:last').on('click', '#viewtutor', function(){ var imgpath=$(this).closest(".row").find('img',this).attr('src'); alert(imgpath); // $.ajax({ // url:'../php/imgpath.php', // type:'post', // data:{'imgpath':imgpath}, // success:function(data){ // if (data === "ok") { // window.location.replace('tutors-profile.html'); // } // } // }) }); } if (k == 'about') { var = $(div_data).html("<label class='label label-info'>about</label> <label>"+ v +"</label>"); $('#searchtutor .row >.col-md-6:last').append(about); } if (k == 'contact_number') { var number = $(div_data).html("<label class='label label-info'>contact</label> <label>"+ v +"</label>"); $('#searchtutor .row >.col-md-6:last').append(number); } if (k == 'qualification') { var qualification = $(div_data).html("<label class='label label-info'>qualification</label> <label>"+v+"</label>"); $('#searchtutor .row >.col-md-6:last').append(qualification); } if (k == 'location') { var location = $(div_data).html("<label class='label label-info'>location</label> <label>"+ v +"</label>"); $('#searchtutor .row >.col-md-6:last').append(location); } if (k == 'board') { var board = $(div_data).html("<label class='label label-info'>board</label> <label>"+ v +"</label>"); $('#searchtutor .row >.col-md-6:last').append(board); } if (k == 'class') { var classes = $(div_data).html("<label class='label label-info'>class</label> <label>"+ v +"</label>"); $('#searchtutor .row >.col-md-6:last').append(classes); } }); }); } }) }); here php code fetching data database
<?php require_once 'database.php'; $data = array(); $stmt = $db->query("select * tutors"); $row = $stmt->fetchall(pdo::fetch_assoc); foreach($row $key => $value) { $data[$key] = $value; } $result = json_encode($data); echo $result;
i finding img in div_data using find(img).. after finding same thing in div_image , got answer. here correct code..
$(document).ready(function() { $.ajax({ url:'../php/alltutors.php', type:'get', success:function(data) { var result = $.parsejson(data); $.each(result, function(key, value){ $.each(value, function(k, v){ var div_image = $('<div class="col-md-6 images"></div>'); var div_data = $('<div class="col-md-6 data"></div>'); if (k == 'image_path') { var div = $(div_image).html("<br><img id='tutorimg' src="+v+" style='width:200px; height:250px; border:5px solid #f5f7fa; border-radius:15px;'/><button id='imgbtn' class='btn btn-success'><i class='fa fa-user'></i> view profile</button><button id='imgbtn' class='btn btn-danger'><i class='fa fa-times'></i> delete</button><br><br><br>"); $('#searchtutor .row').append(div); $('#searchtutor .row >.images:last').on('click', '#imgbtn', function(){ var imgpath=$(this).parent().find('img').attr('src'); alert(imgpath); }); } if (k == 'name') { var name = $(div_data).html("<h4>"+v+"</h4><span'><button id='viewtutor' class='btn btn-success'><i class='fa fa-user'></i> view profile</button> <button class='btn btn-danger'><i class='fa fa-times'></i> delete</button></span><hr>"); $('#searchtutor .row').append(name); } if (k == 'about') { var = $(div_data).html("<label class='label label-info'>about</label> <label>"+ v +"</label>"); $('#searchtutor .row >.col-md-6:last').append(about); } if (k == 'contact_number') { var number = $(div_data).html("<label class='label label-info'>contact</label> <label>"+ v +"</label>"); $('#searchtutor .row >.col-md-6:last').append(number); } if (k == 'qualification') { var qualification = $(div_data).html("<label class='label label-info'>qualification</label> <label>"+v+"</label>"); $('#searchtutor .row >.col-md-6:last').append(qualification); } if (k == 'location') { var location = $(div_data).html("<label class='label label-info'>location</label> <label>"+ v +"</label>"); $('#searchtutor .row >.col-md-6:last').append(location); } if (k == 'board') { var board = $(div_data).html("<label class='label label-info'>board</label> <label>"+ v +"</label>"); $('#searchtutor .row >.col-md-6:last').append(board); } if (k == 'class') { var classes = $(div_data).html("<label class='label label-info'>class</label> <label>"+ v +"</label>"); $('#searchtutor .row >.col-md-6:last').append(classes); } }); }); } }) });
Comments
Post a Comment