How to append the next div after onclick?

Question

I'm trying to append the next div after the chatUserSend() function, but when I put the new append after the said function, the div displayed already even the chatUserSend() has not yet been clicked

How to fix this?

Please see the updated JS script.

var custLoanAccountNum = '<span id="custLoanAccountNum" class="chat_msg_item chat_msg_item_admin"><p>What is your Loan Account Number?</p></span>';
var custName = '<span id="custConcern" class="chat_msg_item chat_msg_item_admin"><p>Type your concern or message to Customer Support</p></span>';

$("#concernType").on('click', 'li', function(){
        var concernType = $(this).html();
        $('.chat_converse').append("<span class='chat_msg_item chat_msg_item_user'><p>" + concernType + "</p></span>");

        if($(this).attr('id')){
            switch ($(this).attr('id')){
                case 'concernTypeCol':
                    $('.chat_converse').append("<span id='custTypelabel' class='chat_msg_item chat_msg_item_admin'><p>Are you a new or existing customer?</p></span><span id='custType' class='custTypelist chat_msg_item'><ul id='custType'><li id='newCustType'>New Customer</li><li id='existingCustType'>Existing Customer</li></ul></span>");
                    $("#custType").on('click', 'li', function(){
                        var custType = $(this).html();
                        $('.chat_converse').append("<span class='chat_msg_item chat_msg_item_user'>" + custType + "</span>");

                        if($(this).attr('id') == 'newCustType'){
                            $('.chat_converse').append(custName);
                            chatUserSend();
                        } else if ($(this).attr('id') == 'existingCustType'){
                            $('.chat_converse').append(custLoanAccountNum);
                            chatUserSend();
                            $('.chat_converse').append(custName);
                        }
                    });
                break;
            }
        }
    });

function chatUserSend(){
   $('#fab_send').click(function(event){
    var thought = $('#chatSend').val();
    $('.chat_converse').append("<span class='chat_msg_item chat_msg_item_user'>" + thought + "</span>");
    //sendMessage();

    $('#chatSend').val('');

    return false;
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chat_converse" class="chat_conversion chat_converse">
        <span id="concernTypelabel" class="chat_msg_item chat_msg_item_admin">
            <p>Hello, how can we help you? Please select one?</p></span>
            <span id="concernType" class="chat_msg_item ">
              
            <ul id="concernType">
                <li id="concernTypeCol">I need assistance in paying my loan. (Collections)</li>
                <li id="concernTypeCS">I want to talk to a customer service representative. (Customer Service)</li>
                <li id="concernTypeHR">I want to explore job opportunities. (Human Resource)</li>
            </ul>
          </span>
    </div>

    <div class="fab_field">
        <a id="fab_send" class="fab">Send</a>
        <textarea id="chatSend" name="chat_message" placeholder="Send a message" class="chat_field chat_message"></textarea>
    </div>

Sample expected output

It's not clear where/how/when your first section of code is run. There's no `.append` in the click event handler. You probably also want to assign your event handler just once. — freedomn-m, May 03 '19 at 11:00
Just to clarify, the code *inside* the click event handler `$(..).click(function() { ... });` only runs when the user *clicks* on that element. `custLoadAccountNum` won't be set when `chatUserSend()` is called because it needs to wait for the click event. Looks like you don't want that click event there at all. — freedomn-m, May 03 '19 at 11:01
Makes more sense. But you're still assigning multiple click event handlers to `#fab_send` each time you call `chatUserSend` — freedomn-m, May 03 '19 at 11:18
What if you remove the chatUserSend call `chatUserSend();` - does it work then? `chatUserSend` isn't actually doing anything that would affect the calling code (as it's just setting an event handler - what happens inside the event handler has no impact) — freedomn-m, May 03 '19 at 11:20
@freedomn-m how to fix it? Please help me. I need to get the value of the `thought` variable in the `chatUserSend` every time the append display — OleDevL, May 03 '19 at 11:22
@freedomn-m but if I remove the `chatUserSend` how I will pass the value of the text area? because in every append, there's only 1 textarea that where the user input the answer in each append. The flow should be 1 append then textarea and it will onclick, then the next append will appear after the textarea onclick — OleDevL, May 03 '19 at 11:26
`chatUserSend` *only* sets up an event handler. It doesn't do anything else. When you click your `li` the code inside `chatUserSend` does nothing. My point to remove it was that you have `$('.chat_converse').append(custLoanAccountNum);$('.chat_converse').append(custName);` which would work without chatUserSend because chatUserSend does nothing. You're now saying you need the `thought` value - which doesn't appear anywhere else in your code. But that variable is in the click event handler - which, as stated, occurs when the user *clicks* - *not* when you call `chatUserSend`. — freedomn-m, May 03 '19 at 11:29
Have a read of [mcve] and if you can re-create your issue here in a snippet, then it might be possible to determine what you're trying to do and advise how to fix it. As it stands, you've not provided enough code (eg "must use `thought` variable, but it's only in one place in your code) and apparently expecting event handlers to run instantly instead of when the event occurs. — freedomn-m, May 03 '19 at 11:31
@freedomn-m I've updated the post now with html, please check it — OleDevL, May 03 '19 at 11:35
@OleDevL read again what `freedomn-m` says. **Use the snippet tool please**. If you don't put effort in your question we are not going to put effort to answer it. — Jorge Fuentes González, May 03 '19 at 12:04
DOn't really understand what do you want to happen @OleDevL. Can you explain a bit more? — Jorge Fuentes González, May 03 '19 at 12:16
@JorgeFuentesGonzález, if the user click the list with this `existingCustType` there's a new text will append and the user need to answer that append via text area. After the user click the textarea to display the answer. There's another append will be display that the user will answer it again. But currently happening in the snippet is before the user answer the append the next append is displayed already — OleDevL, May 03 '19 at 12:19
Well that makes more sense and matches the code - it is however **the complete opposite** of what your original put *"put the new append after onclick, the new div did not display"* — freedomn-m, May 03 '19 at 12:23
Here's what happens: 1 append 2 setup event handler *to happen when user clicks*, return to previous code 3 2nd append. The event handler is asynchronous in that it returns immediately then the inner code runs when the user clicks. Try with some simple alert() or console.log() as you're not understanding this basic concept of how event handlers work (as references in my 2nd comment above) — freedomn-m, May 03 '19 at 12:26
@freedomn-m yes I just updated the issue now. The new issue is the currently I've encountered — OleDevL, May 03 '19 at 12:26
@freedomn-m it's working if only 1 append, but if there's new append after click it's not working. Can you please help me with this? — OleDevL, May 03 '19 at 12:31
Your knowledge is missing some basic concepts on how javascript and events work. I've tried to explain briefly above, but you're either ignoring or not getting it from my admittedly brief info. Maybe this will help with the concepts (it *is* relevant though may not appear to be directly related to your issue): https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/14220323 — freedomn-m, May 03 '19 at 13:49

Alok Mali · Answer 1 · 2019-05-05T15:45:17.413

Can you please try this code. Let me know if you are wanting this.

          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <div id="chat_converse" class="chat_conversion chat_converse">
            <span id="concernTypelabel" class="chat_msg_item chat_msg_item_admin">
                <p>Hello, how can we help you? Please select one?</p></span
            >
            <span id="concernType" class="chat_msg_item ">
                <ul id="concernType">
                <li id="concernTypeCol">
                    I need assistance in paying my loan. (Collections)
                </li>
                <li id="concernTypeCS">
                    I want to talk to a customer service representative. (Customer Service)
                </li>
                <li id="concernTypeHR">
                    I want to explore job opportunities. (Human Resource)
                </li>
                </ul>
            </span>

            <div id="chat_nodes"></div>
            <div id="chat_loan_acc"></div>
            </div>

            <div class="fab_field" style="display:none;">
            <a id="fab_send" class="fab">Send</a>
            <textarea
                id="chatSend"
                name="chat_message"
                placeholder="Send a message"
                class="chat_field chat_message"
            ></textarea>
            </div>

            <script>
            var custLoanAccountNum =
                '<span id="custLoanAccountNum" class="chat_msg_item chat_msg_item_admin"><p>What is your Loan Account Number?</p></span>';
            var custName =
                '<span id="custConcern" class="chat_msg_item chat_msg_item_admin"><p>Type your concern or message to Customer Support</p></span>';

            $("#concernType").on("click", "li", function() {
                var concernType = $(this).html();
                $("#chat_nodes").html(
                "<span class='chat_msg_item chat_msg_item_user'><p>" +
                    concernType +
                    "</p></span>"
                );
                $("#chat_loan_acc").html("");
                if ($(this).attr("id")) {
                switch ($(this).attr("id")) {
                    case "concernTypeCol":
                    $("#chat_nodes").append(
                        "<span id='custTypelabel' class='chat_msg_item chat_msg_item_admin'><p>Are you a new or existing customer?</p></span><span id='custType-span' class='custTypelist chat_msg_item'><ul id='custType'><li id='newCustType'>New Customer</li><li id='existingCustType'>Existing Customer</li></ul></span>"
                    );
                    $(".fab_field").hide();
                    break;
                    default:
                    $(".fab_field").show();
                    break;
                }
                }
            });

            $(document).on("click", "#custType li", function() {
                var custType = $(this).html();
                $("#chat_loan_acc").html(
                "<span class='chat_msg_item chat_msg_item_user'>" + custType + "</span>"
                );
                $(".fab_field").show();
                if ($(this).attr("id") == "newCustType") {
                $("#chat_loan_acc").append(custName);
                //chatUserSend();
                } else if ($(this).attr("id") == "existingCustType") {
                $("#chat_loan_acc").append(custLoanAccountNum);
                //chatUserSend();
                $("#chat_loan_acc").append(custName);
                }
            });

            $("#fab_send").click(function(event) {
                chatUserSend();
            });

            function chatUserSend() {
                var thought = $("#chatSend").val();
                //sendMessage();

                $("#chatSend").val("");

                return false;
            }
            </script>

yes that's what I need. But the all html append and the answers displayed one at a time even the user didnt type anything in the textarea — OleDevL, May 05 '19 at 13:32
@OleDevL , I have edited my answer, please check it once and tell me if it is what you want. I am not so clear about your requirement but as I see your code, I think it is near about to your requirements. — Alok Mali, May 05 '19 at 15:49

How to append the next div after onclick?

1 Answers1