Images in place of Edit & Delete

Question

User-797751191 posted

Hi

  In below code i want to display images instead of Edit & Delete button

function loadData() {
    $.ajax({
        url: "/Home/List",
        type: "GET",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (result) {
            var html = '';
            $.each(result, function (key, item) {
                html += '<tr>';
                html += '<td>' + item.UserName + '</td>';
                html += '<td>' + item.Password + '</td>';
                html += '<td>' + item.FirstName + '</td>';
                html += '<td>' + item.LastName + '</td>';
                html += '<td><a href="#" onclick="return getbyName(\'' + item.UserName + '\')">Edit</a> | <a href="#" onclick="Delete(\'' + item.UserName + '\')">Delete</a></td>';
                html += '</tr>';
            });
            $('.tbody').html(html);
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
}

Thanks

Answer 1

User288213138 posted

Hi jsshivalik,

In below code i want to display images instead of Edit & Delete button

You just need to replace the <a> tag with the <img> tag. Or set herf="you image url" in <a> tag.

The code:

 html += '<td><a href="#" onclick="return getbyName(\'' + item.UserName + '\')">Edit</a> | <a href="#" onclick="Delete(\'' + item.UserName + '\')">Delete</a></td>';

html += '<td><img src="your image url" /></td>';

html += '<td><a href="your image url"></a></td>';

Best regards,

Sam

Answer 2

User-797751191 posted

Hi Samwu

 Thanks. How i can add tooltip that it is is edit or delete . Secondly how we can show hand when cursor is over Edit or Delete similarly it works in case of anchor tag

Thanks

Answer 3

User475983607 posted

Just add an atl="edit"attribute to the image.  

https://www.w3schools.com/tags/att_img_alt.asp

Reading the documentation related to the elements you are trying to use really helps.

Answer 4

User-474980206 posted

Just replace the text with an image.

Answer 5

User-797751191 posted

Hi

   I am trying below code but it is not working. I am trying to display image as Link

html += '<td><a href="#" <img src="/Images/edit.gif"> onclick="return getbyName(\'' + item.UserName + '\')">Edit</a> | <a href="#" <img src="/Images/delete.gif"> onclick="Delete(\'' + item.UserName + '\')">Delete</a></td>';

Thanks

Answer 6

User475983607 posted

Hi

   I am trying below code but it is not working. I am trying to display image as Link

html += '<td><a href="#" <img src="/Images/edit.gif"> onclick="return getbyName(\'' + item.UserName + '\')">Edit</a> | <a href="#" <img src="/Images/delete.gif"> onclick="Delete(\'' + item.UserName + '\')">Delete</a></td>';

Thanks

The HTML is invalid and honestly makes little sense.  You want the text edit and an edit image?   IMHO, this is a very easy bug to spot if you take just a few moments to review the code the browser's Dev Tools (F12).  Another approach is writing the HTML in editor since it will correct your syntax and you can verify the UI presentation is correct.

Is the HTML below what you are trying to achieve?  Is so, you should be able to take the HTML and use it to build the HTML string JavaScript.

<table>
    <tr>
        <td>
            <a href="#" onclick="return getbyName('name');"> 
                <img src="/Images/edit.gif" alt="edit" />
            </a> | 
            <a href="#" onclick="Delete('name');"> 
                <img src="/Images/delete.gif" alt="delete" /> 
            </a>
        </td>
    </tr>
</table>

Answer 7

User-797751191 posted

Hi

  IN below code Edit & Delete button are not getting properly displayed.

function loadData() {
    $.ajax({
        url: "/Home/List",
        type: "GET",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (result) {
            var html = '';
            $.each(result, function (key, item) {
                html += '<tr>';
                html += '<td>' + item.UserName +  '</td>';
                html += '<td>' + item.Password +  '</td>';
                html += '<td>' + item.FirstName + '</td>';
                html += '<td>' + item.LastName +  '</td>';
                html += '<td><a href="#" onclick="return getbyName(\'' + item.UserName + '\')" <i class="glyphicon glyphicon-edit"></i></a> | <a href="#" onclick="return getbyName(\'' + item.UserName + '\')" <i class="glyphicon glyphicon-thrash"></i></a></td>';
                html += '</tr>';
            });
            $('.tbody').html(html);
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
}

Thanks

Answer 8

User288213138 posted

Hi jsshivalik,

  html += '<td><a href="#" onclick="return getbyName(\'' + item.UserName + '\')" <i class="glyphicon glyphicon-edit"></i></a> | <a href="#" onclick="return getbyName(\'' + item.UserName + '\')" <i class="glyphicon glyphicon-thrash"></i></a></td>'

There is a problem with your tag. please try this:

  html += '<td><a href="#" onclick="return getbyName(\'' + item.UserName + '\')"> <i class="glyphicon glyphicon-edit"></i></a> | <a href="#" onclick="return getbyName(\'' + item.UserName + '\')"> <i class="glyphicon glyphicon-thrash"></i></a></td>'

Best regards,

Sam

Answer 9

User-797751191 posted

Hi Samwu

   Written below code but still not working. Do we need to include and css files

html += '<td><a href="#" onclick="return getbyName(\'' + item.UserName + '\')"> <i class="glyphicon glyphicon-edit"></i></a> | <a href="#" onclick="return getbyName(\'' + item.UserName + '\')"> <i class="glyphicon glyphicon-thrash"></i></a></td>'

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="~/Scripts/User.js"></script>

Thanks

Answer 10

User475983607 posted

jsshivalik

IN below code Edit & Delete button are not getting properly displayed.

You did not fix the invalid HTML. Why?  

Please take a few seconds to compare your code to the valid mark up I posted above.  The first step is coming up with a UI design then you can build a JavaScript string from the verified HTML.  This is not a very difficult task and should take just a few moments.