I used the jQuery UI plugin Dialog to ask a user for "name" and to show it in a subsequent dialog.
Is there the better way to add a function to the option "buttons" to get the data and to go to a new dialog?
$("#message").dialog({autoOpen: false});
$("#form").dialog({
autoOpen: false,
modal: true,
title: "What is your name?",
buttons:{
"Submit": function(){
$( this ).dialog( "close" );
$("#message").dialog("open");
var str = $("input").val();
$("span").text(str);
}
}
});
$("#btn").click(function(){
$("#form").dialog("open");
});
<body>
<button id="btn">Click me</button>
<form id="form">
<input type="text" name="">
</form>
<div id="message">Hello, <span></span>!</div>
</body>
1 Answer 1
Your Question
Is there the better way to add a function to the option "buttons" to get the data and to go to a new dialog?
I don't believe there is a "better" way, though instead of using an object for the buttons option, an array could be utilized, which would allow more customization of the buttons. For example, the submit button could have a custom icon added to it and more custom event handlers, like mouseenter. See the code snippet at the end of this post for an example.
Feedback
Elements without ids
Your example contains only one form input (i.e. <input type="text" name="">), though it is typically rare to only have one form input. As soon as other text/radio/checkbox inputs are added, the way that is referenced in JavaScript will need to change. I would advise you to always add an id attribute to the elements and use those when referencing them in the JavaScript. So that text input could have an id attribute like id="username". Then the JavaScript can reference it using that attribute: $('#username').val().
The same is true for the <span> element that gets set with the text entered by the user. It would be wise to also give that element an id attribute and use it in the JavaScript code. This actually would prevent the title of the message dialog from getting updated with the name (see screenshot below).
That happens because $('span') matches multiple elements, including the header of the message dialog and the element that follows "Hello, ", and then .text() updates all of those matching elements.
jQuery DOM ready callback
It is best to wrap the jQuery code in a function called when the DOM is ready. Traditionally that was done with $.ready() but in the latest versions that is deprecated, in favor of the $(function() {...}); syntax. That way, all variables will have limited scope instead of being global variables (i.e. on window).
jQuery references
It is wise to store DOM look-ups (e.g. $('#message')) in a variable (or actually, a constant would be semantically better, though browser support can be an issue there...), since those can be expensive.
So for example:
$("input").val()
could be replaced with
usernameInput.val();
if a line like the following is added at the beginning of the script:
const usernameInput = $('#username');
For more tips like these, I suggest reading this article. I know it is 3 years old and bashes jQuery in the beginning but there are some really useful tips there.
$(function() { //DOM ready callback
//store references in DOM
const usernameInput = $('#username');
const usernameDisplay = $('#username_display');
//store a reference to the message dialog
const messageDialog = $("#message").dialog({autoOpen: false});
const formDialog = $("#form").dialog({
autoOpen: false,
modal: true,
title: "What is your name?",
buttons: [{
text: "submit",
icon: "ui-icon-contact",
mouseenter: function() { //when user starts to hover over button
$(this).effect('shake', 'swing', 100);
},
click: function() {
$( this ).dialog( "close" );
messageDialog.dialog("open");
var str = usernameInput.val();
usernameDisplay.text(str);
}
}]
});
$("#btn").click(function(){
formDialog.dialog("open");
});
})
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id="btn">Click me</button>
<form id="form">
<input type="text" name="" id="username">
</form>
<div id="message">Hello, <span id="username_display"></span>!</div>Explore related questions
See similar questions with these tags.