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>: ' + 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?
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.
Member
4 Points
19 Posts
How does the prompt display from the signalr demo?
Sep 28, 2019 11:33 PM|ASP_User_qwert|LINK
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>: ' + 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
All-Star
43841 Points
18769 Posts
Re: How does the prompt display from the signalr demo?
Sep 29, 2019 01:36 AM|mgebhard|LINK
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.
Member
4 Points
19 Posts
Re: How does the prompt display from the signalr demo?
Sep 29, 2019 01:42 AM|ASP_User_qwert|LINK
Well, it seems to be in the middle of a function, how is it run only that one time?
Josh
All-Star
43841 Points
18769 Posts
Re: How does the prompt display from the signalr demo?
Sep 29, 2019 11:01 AM|mgebhard|LINK
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