CODEWITHSUNDEEP
javascriptjqueryhtml
Steve
Steve

Reputation: 13

Inline edit a hyperlink using jquery

Here is my code:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    $(function(){
        $('.edit_button').click(function(){
            console.log($(this).siblings().text());
            modifications($(this));
        });            
    });

    function modifications(cell){
        var form = '<form> <input type="text" id = "newText" size = "30" value='+cell.siblings().text()+'></form>';

        cell.parent('td').append(form).focus();
        cell.parent().children('.link').toggle();
        $('#newText').keypress(function (e) {

            if (e.which == 13) {
                console.log("form submitted");
                e.preventDefault();

                var new_text = cell.parent('td').children('#newText').val();
                //Show hyperlink with new value
                cell.parent().children('.link').toggle();
                cell.parent().children('.link').text(new_text);
                //Hide text box
                cell.parent().children('.newText').hide();
            }
        });   
    }

    </script>

    </head>
        <body>
          <table>
            <tr>
                <th>Name</th>
                <th>Company</th>
                <th>E-Mail</th>
            </tr>
            <tr>
                <td>Sergey brin</td>
                <td>Google</td>
                <td class="email"> 
                    <a class = "link" href= "www.gmail.com" > [email protected] </a> 
                    <button class = "edit_button" type="button" style = "float:right" >Edit !</button>
                </td>
            </tr>
            <tr>
                <td>Elon Musk</td>
                <td> Amazon </td>
                <td class="email"> 
                    <a class = "link" href = "www.spacex.com">[email protected] </a>
                    <button class= "edit_button" type="button" style = "float:right">Edit !</button>
                </td>
            </tr>
            <tr>
                <td> Bill Gates </td>
                <td> Microsoft </td>
                <td class="email"> 
                    <a class = "link" href = "www.microsoft.com"> [email protected] </a>
                    <button class="edit_button" type="button" style = "float:right">Edit !</button>               
                </td>
            </tr>

        </table>    
    </body>          

</html>

Problem Statement : I want a textbox to appear when edit button is clicked, and after editing when enter is pressed the contents of the textbox should change to hyperlink, else if Escape is pressed original contents of the hyperlink should be restored.

What am I missing here? I am not even able to fetch value from the textbox. Can somebody brainstorm with me?

Upvotes: 1

Views: 363

Answers (2)

nikhil
nikhil

Reputation: 411

Here is your solution.

$(function(){
    $('table').delegate('.edit_button', 'click', function (e) {
        var target = $(this);
        var link = target.siblings('.link');
        var input;
        
        if (target.siblings('.newText').length === 0) {
            target.before('<input type="text" class="newText" size="30" value='+link.text()+'>');
            link.toggle();
          
            input = target.siblings('.newText');
            input.focus();
            input.keypress(function (e) {
                if (e.which === 13) {
                    e.preventDefault();
                    link.text(input.val()).toggle();
                    input.remove();
                } else if (e.which === 0) {
                    e.preventDefault();
                    link.toggle();
                    input.remove();
                }
            });
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <th>Name</th>
        <th>Company</th>
        <th>E-Mail</th>
    </tr>
    <tr>
        <td>Sergey brin</td>
        <td>Google</td>
        <td class="email"> 
            <a class="link" href="www.gmail.com" > [email protected] </a> 
            <button class="edit_button" type="button" style="float:right" >Edit !</button>
        </td>
    </tr>
    <tr>
        <td>Elon Musk</td>
        <td> Amazon </td>
        <td class="email"> 
            <a class="link" href="www.spacex.com">[email protected] </a>
            <button class="edit_button" type="button" style="float:right">Edit !</button>
        </td>
    </tr>
    <tr>
        <td> Bill Gates </td>
        <td> Microsoft </td>
        <td class="email"> 
            <a class = "link" href = "www.microsoft.com"> [email protected] </a>
            <button class="edit_button" type="button" style = "float:right">Edit !</button>   
        </td>
    </tr>    
</table>

Upvotes: 1

Mehdi Dehghani
Mehdi Dehghani

Reputation: 11611

You made something invalid, even the HTML part! the valid structure of an HTML file is:

<!DOCTYPE html>
<html>
    <head>
        <!-- you may load some css and/or js files here -->
    </head>
    <body>
        <!-- here you can add your html elements, such as `table`, `div`, and so on -->
    </body>
</html>

So, you need first fix this, as first job !

Also try .prev(), instead of siblings(), as below:

cell.prev().text();

And make below changes:

$('table').delegate('#newText', 'keypress', function (e) {
    // rest of code
}

Upvotes: 0

Related Questions