Display Image in Bootstrap Modal Popup based on Table row selection using jQuery in ASP.Net

Last Reply one year ago By jovceka

Posted one year ago

Display selected dynamic Table data in Bootstrap Modal Popup using jQuery in ASP.Net

here i want to display image also along with other data in modal popup.

    <script type="text/javascript">
        $(function () {
            GetProduct();
        });
  
        function Getproductname(ele) {
            debugger;
            $(ele).html($(ele).closest('div').find('.sproductname').html());
            $(".modal-body #lblName").html("Id is :" + $(ele).data('id') + " Name is : " + $(ele).closest('div').find('.sproductname').html());
            $(".modal-body [id*=imgstrmdl]").attr($(ele).closest('div').find('.pdtimg').html());///image to be displayed here
            $(".modal-body #lblName").css("color", "red");
        }
        function GetProduct() {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "WebService.asmx/GetData",
                data: {},
                dataType: "json",
                success: function (data) {
                    var table = $('#tblgrid');
                    var rows = "";
                    for (var i = 0; i < data.d.length; i++) {
                        rows += "<div class=trclass>" +
                            "<tr><td class=tdcolumn>" +
                            "<div class=tablediv>" +
                            "<div class=Productid>" + data.d[i].ProductId + "</div>" +
                            "<div class=sproductname>" + data.d[i].ProductName + "</div><br />" +
                            "<div class=sproductname>" + data.d[i].ProductQty + "</div><br />" +
                            + ' <img class=pdtimg src="images/loader.gif" data-echo="data:image/jpg;base64,' + data.d[i].Pimage + '" />'                
                            "<div class=sproductname>" + data.d[i].ProductType + "</div><br />" +
                            "</div></td></tr></div>"
                    }
                    table.append(rows);
                },
                failure: function (response) { alert(response.d); },
                error: function (response) { alert(response.d); }
            });
        }
    </script>

 

    <table id="tblgrid">
    </table>
    <div>
        <div class="modal fade" id="DesPopUp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body" id="listOfNotes">
 		 <img src="#" id="imgstrmdl" />
                        <p>
                            Some text in the modal.</p>
                        <asp:Label ID="lblName" runat="server" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

 

Posted one year ago

hi...

i got the answer

it is as follows

         function Getproductname(ele) {
            $(ele).html($(ele).closest('div').find('.sproductname').html());
            $(".modal-body #lblName").html("Id is :" + $(ele).data('id') + " Name is : " + $(ele).closest('div').find('.sproductname').html());
   
            $(".modal-body #lblName").css("color", "red");
            $('#img1').attr('src', $(ele).closest('div').find('.strcimg').attr('src'));//code for image display
        }