The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Forced to edit link instead of going to link in editable table cell
anonkun
post Jan 12 2019, 03:50 AM
Post #1





Group: Members
Posts: 1
Joined: 12-January 19
Member No.: 26,794



I have the following code which allows me to edit a cell, but the problem is that when I want to click on the link, it forces me to edit instead. I want to be able to edit only when I click on the pen icon, but I can't seem to figure out how to do it.

HTML

CODE

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<table border="1" style="width:100px" style="height:99px" style="margin:0
auto">
<tbody>
<tr>
<td ><div class="row_data" edit_type="click" col_name="datamapname"><i
class="fa fa-pencil"></i><a id="dm" href="https://www.google.com/"
target="_blank">Sample</a></div></td>

</tr>

</tbody>
</table>


Jquery

CODE
    $(document).on('click', '.row_data', function(event)
{
    //Remove pencil icon.
    $(this).find('i.fa-pencil').remove();

    //Remove link
    $("#dm").removeAttr('href');

    event.preventDefault();
    if($(this).attr('edit_type') == 'button')
    {
        return false;
    }
    //make div editable
    $(this).closest('div').attr('contenteditable', 'true');
    //add bg css
    $(this).addClass('bg-warning').css('padding','5px');
    $(this).focus();
    $(this).attr('original_entry', $(this).html());
})  
    //--->make div editable > end

  // --> save single field data > start
    $(document).on('focusout', '.row_data', function(event)
    {
        event.preventDefault();

        if($(this).attr('edit_type') == 'button')
        {
            return false;
        }

    //Add pencil icon back
        $(this).append('<i class="fa fa-pencil"></i>');

    //Add link back
    $("#dm").attr('href','https://www.google.com/');

    })  


JSFiddle: https://jsfiddle.net/89zgd1ry/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 12 2019, 05:06 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,206
Joined: 10-August 06
Member No.: 7



I don't do jQuery, but this part looks like it makes the link editable when you click anywhere in .row_data (including on the link?):

CODE
$(document).on('click', '.row_data', function(event)

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd August 2019 - 11:30 PM