locked
How does the prompt display from the signalr demo? RRS feed

  • Question

  • User569238728 posted

    How does the line  $('#displayname').val(prompt('Enter your name:', '')); work? It is from a SignalR demo.  Hear is the code. 

    <!DOCTYPE html>
    <html>
    <head>
        <title>SignalR Simple Chat</title>
        <style type="text/css">
            .container {
                background-color: #99CCFF;
                border: thick solid #808080;
                padding: 20px;
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <input type="text" id="message" />
            <input type="button" id="sendmessage" value="Send" />
            <input type="hidden" id="displayname" />
            <ul id="discussion"></ul>
        </div>
        <!--Script references. -->
        <!--Reference the jQuery library. -->
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <!--Reference the SignalR library. -->
        <script src="Scripts/jquery.signalR-2.2.2.min.js"></script>
        <!--Reference the autogenerated SignalR hub script. -->
        <script src="signalr/hubs"></script>
        <!--Add script to update the page and send messages.-->
        <script type="text/javascript">
            $(function () {
                // Declare a proxy to reference the hub.
                var chat = $.connection.chatHub;
                // Create a function that the hub can call to broadcast messages.
                chat.client.broadcastMessage = function (name, message) {
                    // Html encode display name and message.
                    var encodedName = $('<div />').text(name).html();
                    var encodedMsg = $('<div />').text(message).html();
                    // Add the message to the page.
                    $('#discussion').append('<li><strong>' + encodedName
                        + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
                };
                // Get the user name and store it to prepend to messages.
                $('#displayname').val(prompt('Enter your name:', ''));
                
               // Set initial focus to message input box.
                $('#message').focus();
                // Start the connection.
                $.connection.hub.start().done(function () {
                    $('#sendmessage').click(function () {
                        // Call the Send method on the hub.
                        chat.server.send($('#displayname').val(), $('#message').val());
                        // Clear text box and reset focus for next comment.
                        $('#message').val('').focus();
                    });
                });
            });
        </script>
    </body>
    </html>

    How does it display only when the web page is first logged onto?

    Thank you,

    Joshua

    Saturday, September 28, 2019 11:33 PM

Answers

  • User475983607 posted

    Well, it seems to be in the middle of a function, how is it run only that one time?

    The prompt line of code is between two event handlers.  One listens for message from the hub and the other sends messages when a button is clicked.  

    I recommend using the browser dev tools to rung the code through the debugger.  Then you'll see how the code flows.

    https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 29, 2019 11:01 AM

All replies

  • User475983607 posted

    The code shown runs when the page initially loads in the browser.

        <script type="text/javascript">
            $(function () {

    This line in question simply takes whatever the user types into the prompt and uses it to set the value of the displayname element.  That's the element with the id=displayname.

    Sunday, September 29, 2019 1:36 AM
  • User569238728 posted

    Well, it seems to be in the middle of a function, how is it run only that one time?

    Josh

    Sunday, September 29, 2019 1:42 AM
  • User475983607 posted

    Well, it seems to be in the middle of a function, how is it run only that one time?

    The prompt line of code is between two event handlers.  One listens for message from the hub and the other sends messages when a button is clicked.  

    I recommend using the browser dev tools to rung the code through the debugger.  Then you'll see how the code flows.

    https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 29, 2019 11:01 AM