Option buttons in plugin Dialog
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
2
down vote
favorite
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>
javascript beginner jquery plugin jquery-ui
edited Feb 25 at 7:01
Sam Onela
5,85461544
asked Feb 24 at 12:17
Kate Herasimenak
3016
add a comment |Â
up vote
2
down vote
favorite
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>
javascript beginner jquery plugin jquery-ui
edited Feb 25 at 7:01
Sam Onela
5,85461544
asked Feb 24 at 12:17
Kate Herasimenak
3016
add a comment |Â
up vote
2
down vote
favorite
up vote
2
down vote
favorite
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>
javascript beginner jquery plugin jquery-ui
edited Feb 25 at 7:01
Sam Onela
5,85461544
asked Feb 24 at 12:17
Kate Herasimenak
3016
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>
javascript beginner jquery plugin jquery-ui
edited Feb 25 at 7:01
Sam Onela
5,85461544
asked Feb 24 at 12:17
Kate Herasimenak
3016
edited Feb 25 at 7:01
Sam Onela
5,85461544
edited Feb 25 at 7:01
Sam Onela
5,85461544
edited Feb 25 at 7:01
Sam Onela
5,85461544
5,85461544
asked Feb 24 at 12:17
Kate Herasimenak
3016
asked Feb 24 at 12:17
Kate Herasimenak
3016
asked Feb 24 at 12:17
Kate Herasimenak
3016
3016
add a comment |Â
add a comment |Â
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
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>answered Feb 25 at 7:00
Sam Onela
5,85461544
add a comment |Â
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
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>answered Feb 25 at 7:00
Sam Onela
5,85461544
add a comment |Â
up vote
1
down vote
accepted
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>answered Feb 25 at 7:00
Sam Onela
5,85461544
add a comment |Â
up vote
1
down vote
accepted
up vote
1
down vote
accepted
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>answered Feb 25 at 7:00
Sam Onela
5,85461544
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>$(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>$(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>answered Feb 25 at 7:00
Sam Onela
5,85461544
answered Feb 25 at 7:00
Sam Onela
5,85461544
answered Feb 25 at 7:00
Sam Onela
5,85461544
answered Feb 25 at 7:00
Sam Onela
5,85461544
5,85461544
add a comment |Â
add a comment |Â
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f188269%2foption-buttons-in-plugin-dialog%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password