Flatten the nested ajax requests

Question

I intend to write a "edit" link as stackoverflow's under its bottom of questions and answers:

I write a edit glyphicon and have a commend.id

<div class="post-menu pull-left">
    <a class="editCommentLink" href="#">
        <span id="{{ comment.id }}"  class="glyphicon glyphicon-edit" aria-hidden="true">edit </span>
    </a> &nbsp
    <a class="delCommentLink" id="{{ comment.id }}" href="#">
        <span id="{{ comment.id }}" class="glyphicon glyphicon-trash" aria-hidden="true">delete</span>
    </a>
</div>

In javascript, when the edit icon is click, an ajax get request issued to url and display a pre-formulated form after success; within the success scope,
I write another ajax to send the updated comment, it's rough structure much like:

<script>
$(document).ready(function () {
    $(".editCommentLink").on("click", function (e) {
        e.preventDefault();
        //trigger to show the form template
        $.ajax({
            type: "GET",
            url: `/article/comment/edit/${comment_id}`,
            success: function (data) {
                var commentEditForm = `
            <form action="#" method="post"> {% csrf_token %}
            <textarea></textarea>
            <button class="btn btn-primary" id="editCommentBtn">Save Edits</button >          
            </form >`;
                $commentNew.html(commentEditForm);

                //submit data from the newly emerged form, 
                $("#editCommentBtn").on("click", function (e) {
                    e.preventDefault();
                    $.ajax({
                        type: "POST",
                        url: `/article/comment/edit/${comment_id}`,
                        data: param,
                        success: function (data) {
                            ret = JSON.parse(data);
                            alert(ret['status']);
                            viewedComment = simplemde.options.previewRender(comment);
                            updatedComment = '<p>' + viewedComment + '</p>';
                            alert(comment)
                            $commentNew.html(updatedComment);
                            $additionalInfo.show();
                        },
                    });//post-ajax
                });//submit click event
            },//success
        });//ajax.get
    }); //edit click event
</script>

The codes achieved my intending,
However,there's too many nesting,
Is it possible to solve the problem with flat code?

Answer 1

Delegate your second click event, move it outside the ajax event

<script>
$(document).ready(function () {
    $(".editCommentLink").on("click", function (e) {
        e.preventDefault();
        //trigger to show the form template
        $.ajax({
            type: "GET",
            url: `/article/comment/edit/${comment_id}`,
            success: function (data) {
                var commentEditForm = `
            <form action="#" method="post"> {% csrf_token %}
            <textarea></textarea>
            <button class="btn btn-primary" id="editCommentBtn">Save Edits</button >          
            </form >`;
                $commentNew.html(commentEditForm);
            },//success
        });//ajax.get
        //submit data from the newly emerged form, 
    $("body").on("click","#editCommentBtn", function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: `/article/comment/edit/${comment_id}`,
            data: param,
            success: function (data) {
                ret = JSON.parse(data);
                alert(ret['status']);
                viewedComment = simplemde.options.previewRender(comment);
                updatedComment = '<p>' + viewedComment + '</p>';
                alert(comment)
                $commentNew.html(updatedComment);
                $additionalInfo.show();
            },
        });//post-ajax
    });//submit click event
    }); //edit click event
</script>