on() event handler for multiple objects [closed]
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
3
down vote
favorite
1
I'm using three instances of ace editor in a form. I initialize them like so:
var before = ace.edit("beforeSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
),
execute = ace.edit("executeSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
),
after = ace.edit("afterSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
);
I then put a listener on each one to make sure there's content in each field before the user can click the submit button:
before.session.on('change', () =>
toggleSubmit();
);
execute.session.on('change', () =>
toggleSubmit();
);
after.session.on('change', () =>
toggleSubmit();
);
The toggleSubmit() function enables the submit button when each editor stores a value.
Both sections of code feel redundant, but the second section is what really concerns me. Anyone know a clever way to whittle this down? For example is there a way I could do the following:
[before.session, execute.session, after.session].on('change', () =>
toggleSubmit();
);
javascript jquery event-handling
edited May 22 at 1:34
Jamal♦
30.1k11114225
asked May 21 at 19:26
invot
1216
closed as off-topic by Mast, Sam Onela, Stephen Rauch, Hosch250, hjpotter92 May 22 at 0:40
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Lacks concrete context: Code Review requires concrete code from a project, with sufficient context for reviewers to understand how that code is used. Pseudocode, stub code, hypothetical code, obfuscated code, and generic best practices are outside the scope of this site." – Mast, Sam Onela, Stephen Rauch, Hosch250, hjpotter92
add a comment |Â
up vote
3
down vote
favorite
1
I'm using three instances of ace editor in a form. I initialize them like so:
var before = ace.edit("beforeSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
),
execute = ace.edit("executeSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
),
after = ace.edit("afterSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
);
I then put a listener on each one to make sure there's content in each field before the user can click the submit button:
before.session.on('change', () =>
toggleSubmit();
);
execute.session.on('change', () =>
toggleSubmit();
);
after.session.on('change', () =>
toggleSubmit();
);
The toggleSubmit() function enables the submit button when each editor stores a value.
Both sections of code feel redundant, but the second section is what really concerns me. Anyone know a clever way to whittle this down? For example is there a way I could do the following:
[before.session, execute.session, after.session].on('change', () =>
toggleSubmit();
);
javascript jquery event-handling
edited May 22 at 1:34
Jamal♦
30.1k11114225
asked May 21 at 19:26
invot
1216
closed as off-topic by Mast, Sam Onela, Stephen Rauch, Hosch250, hjpotter92 May 22 at 0:40
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Lacks concrete context: Code Review requires concrete code from a project, with sufficient context for reviewers to understand how that code is used. Pseudocode, stub code, hypothetical code, obfuscated code, and generic best practices are outside the scope of this site." – Mast, Sam Onela, Stephen Rauch, Hosch250, hjpotter92
3
Welcome to Code Review! Would you be able to edit your post to include the HTML, and perhaps more of the code around the sample JS above? That will give reviewers more context and hopefully the ability to give a better review.
– Sam Onela
May 21 at 19:29
Well, the code I'm writing doesn't really interact with the DOM directly. Each item is tied to an element like the following:<div class="ace-editor"></div>
– invot
May 21 at 19:39
What additional content do I need to provide? Would a jsfiddle work? I'm asking about syntax, not functionality.
– invot
May 22 at 14:21
You should add all the code necessary to the post... if you can get a jsfiddle running, then you should be able to put the code in a runnable code snippet - there is a keyboard shortcut: CTRL + M
– Sam Onela
May 24 at 18:47
add a comment |Â
up vote
3
down vote
favorite
1
up vote
3
down vote
favorite
1
1
I'm using three instances of ace editor in a form. I initialize them like so:
var before = ace.edit("beforeSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
),
execute = ace.edit("executeSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
),
after = ace.edit("afterSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
);
I then put a listener on each one to make sure there's content in each field before the user can click the submit button:
before.session.on('change', () =>
toggleSubmit();
);
execute.session.on('change', () =>
toggleSubmit();
);
after.session.on('change', () =>
toggleSubmit();
);
The toggleSubmit() function enables the submit button when each editor stores a value.
Both sections of code feel redundant, but the second section is what really concerns me. Anyone know a clever way to whittle this down? For example is there a way I could do the following:
[before.session, execute.session, after.session].on('change', () =>
toggleSubmit();
);
javascript jquery event-handling
edited May 22 at 1:34
Jamal♦
30.1k11114225
asked May 21 at 19:26
invot
1216
I'm using three instances of ace editor in a form. I initialize them like so:
var before = ace.edit("beforeSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
),
execute = ace.edit("executeSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
),
after = ace.edit("afterSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
);
I then put a listener on each one to make sure there's content in each field before the user can click the submit button:
before.session.on('change', () =>
toggleSubmit();
);
execute.session.on('change', () =>
toggleSubmit();
);
after.session.on('change', () =>
toggleSubmit();
);
The toggleSubmit() function enables the submit button when each editor stores a value.
Both sections of code feel redundant, but the second section is what really concerns me. Anyone know a clever way to whittle this down? For example is there a way I could do the following:
[before.session, execute.session, after.session].on('change', () =>
toggleSubmit();
);
javascript jquery event-handling
edited May 22 at 1:34
Jamal♦
30.1k11114225
asked May 21 at 19:26
invot
1216
edited May 22 at 1:34
Jamal♦
30.1k11114225
edited May 22 at 1:34
Jamal♦
30.1k11114225
edited May 22 at 1:34
Jamal♦
30.1k11114225
30.1k11114225
asked May 21 at 19:26
invot
1216
asked May 21 at 19:26
invot
1216
asked May 21 at 19:26
invot
1216
1216
closed as off-topic by Mast, Sam Onela, Stephen Rauch, Hosch250, hjpotter92 May 22 at 0:40
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Lacks concrete context: Code Review requires concrete code from a project, with sufficient context for reviewers to understand how that code is used. Pseudocode, stub code, hypothetical code, obfuscated code, and generic best practices are outside the scope of this site." – Mast, Sam Onela, Stephen Rauch, Hosch250, hjpotter92
closed as off-topic by Mast, Sam Onela, Stephen Rauch, Hosch250, hjpotter92 May 22 at 0:40
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Lacks concrete context: Code Review requires concrete code from a project, with sufficient context for reviewers to understand how that code is used. Pseudocode, stub code, hypothetical code, obfuscated code, and generic best practices are outside the scope of this site." – Mast, Sam Onela, Stephen Rauch, Hosch250, hjpotter92
3
Welcome to Code Review! Would you be able to edit your post to include the HTML, and perhaps more of the code around the sample JS above? That will give reviewers more context and hopefully the ability to give a better review.
– Sam Onela
May 21 at 19:29
Well, the code I'm writing doesn't really interact with the DOM directly. Each item is tied to an element like the following:<div class="ace-editor"></div>
– invot
May 21 at 19:39
What additional content do I need to provide? Would a jsfiddle work? I'm asking about syntax, not functionality.
– invot
May 22 at 14:21
You should add all the code necessary to the post... if you can get a jsfiddle running, then you should be able to put the code in a runnable code snippet - there is a keyboard shortcut: CTRL + M
– Sam Onela
May 24 at 18:47
add a comment |Â
3
Welcome to Code Review! Would you be able to edit your post to include the HTML, and perhaps more of the code around the sample JS above? That will give reviewers more context and hopefully the ability to give a better review.
– Sam Onela
May 21 at 19:29
Well, the code I'm writing doesn't really interact with the DOM directly. Each item is tied to an element like the following:<div class="ace-editor"></div>
– invot
May 21 at 19:39
What additional content do I need to provide? Would a jsfiddle work? I'm asking about syntax, not functionality.
– invot
May 22 at 14:21
You should add all the code necessary to the post... if you can get a jsfiddle running, then you should be able to put the code in a runnable code snippet - there is a keyboard shortcut: CTRL + M
– Sam Onela
May 24 at 18:47
3
3
Welcome to Code Review! Would you be able to edit your post to include the HTML, and perhaps more of the code around the sample JS above? That will give reviewers more context and hopefully the ability to give a better review.
– Sam Onela
May 21 at 19:29
Welcome to Code Review! Would you be able to edit your post to include the HTML, and perhaps more of the code around the sample JS above? That will give reviewers more context and hopefully the ability to give a better review.
– Sam Onela
May 21 at 19:29
Well, the code I'm writing doesn't really interact with the DOM directly. Each item is tied to an element like the following:
<div class="ace-editor"></div>– invot
May 21 at 19:39
Well, the code I'm writing doesn't really interact with the DOM directly. Each item is tied to an element like the following:
<div class="ace-editor"></div>– invot
May 21 at 19:39
What additional content do I need to provide? Would a jsfiddle work? I'm asking about syntax, not functionality.
– invot
May 22 at 14:21
What additional content do I need to provide? Would a jsfiddle work? I'm asking about syntax, not functionality.
– invot
May 22 at 14:21
You should add all the code necessary to the post... if you can get a jsfiddle running, then you should be able to put the code in a runnable code snippet - there is a keyboard shortcut: CTRL + M
– Sam Onela
May 24 at 18:47
You should add all the code necessary to the post... if you can get a jsfiddle running, then you should be able to put the code in a runnable code snippet - there is a keyboard shortcut: CTRL + M
– Sam Onela
May 24 at 18:47
add a comment |Â
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
var before = ace.edit("beforeSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
),
execute = ace.edit("executeSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
),
after = ace.edit("afterSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
);
There's a lot of repetition here in terms of the options you're using. You could avoid repeating yourself by creating an object to hold defaults. For example:
const defaults =
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
var before = ace.edit("beforeSQL", ...defaults)
var execute = ace.edit("executeSQL", ...defaults)
var after = ace.edit("afterSQL", ...defaults)
To avoid repeating yourself when adding an event listener you could do something like this:
[before, execute, after].forEach(obj =>
obj.session.on('change', toggleSubmit);
)
answered May 21 at 22:58
aidanharris
734
Correct me if I am wrong, but the calls to.edit()can be called without using the spread operator for the defaults into an extra JSON object:var before = ace.edit("beforeSQL", defaults)
– Sam Onela
May 22 at 15:18
or was there a reason to destructure those defaults into a separate copy for each editor?
– Sam Onela
May 22 at 16:04
add a comment |Â
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
var before = ace.edit("beforeSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
),
execute = ace.edit("executeSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
),
after = ace.edit("afterSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
);
There's a lot of repetition here in terms of the options you're using. You could avoid repeating yourself by creating an object to hold defaults. For example:
const defaults =
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
var before = ace.edit("beforeSQL", ...defaults)
var execute = ace.edit("executeSQL", ...defaults)
var after = ace.edit("afterSQL", ...defaults)
To avoid repeating yourself when adding an event listener you could do something like this:
[before, execute, after].forEach(obj =>
obj.session.on('change', toggleSubmit);
)
answered May 21 at 22:58
aidanharris
734
Correct me if I am wrong, but the calls to.edit()can be called without using the spread operator for the defaults into an extra JSON object:var before = ace.edit("beforeSQL", defaults)
– Sam Onela
May 22 at 15:18
or was there a reason to destructure those defaults into a separate copy for each editor?
– Sam Onela
May 22 at 16:04
add a comment |Â
up vote
2
down vote
accepted
var before = ace.edit("beforeSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
),
execute = ace.edit("executeSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
),
after = ace.edit("afterSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
);
There's a lot of repetition here in terms of the options you're using. You could avoid repeating yourself by creating an object to hold defaults. For example:
const defaults =
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
var before = ace.edit("beforeSQL", ...defaults)
var execute = ace.edit("executeSQL", ...defaults)
var after = ace.edit("afterSQL", ...defaults)
To avoid repeating yourself when adding an event listener you could do something like this:
[before, execute, after].forEach(obj =>
obj.session.on('change', toggleSubmit);
)
answered May 21 at 22:58
aidanharris
734
Correct me if I am wrong, but the calls to.edit()can be called without using the spread operator for the defaults into an extra JSON object:var before = ace.edit("beforeSQL", defaults)
– Sam Onela
May 22 at 15:18
or was there a reason to destructure those defaults into a separate copy for each editor?
– Sam Onela
May 22 at 16:04
add a comment |Â
up vote
2
down vote
accepted
up vote
2
down vote
accepted
var before = ace.edit("beforeSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
),
execute = ace.edit("executeSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
),
after = ace.edit("afterSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
);
There's a lot of repetition here in terms of the options you're using. You could avoid repeating yourself by creating an object to hold defaults. For example:
const defaults =
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
var before = ace.edit("beforeSQL", ...defaults)
var execute = ace.edit("executeSQL", ...defaults)
var after = ace.edit("afterSQL", ...defaults)
To avoid repeating yourself when adding an event listener you could do something like this:
[before, execute, after].forEach(obj =>
obj.session.on('change', toggleSubmit);
)
answered May 21 at 22:58
aidanharris
734
var before = ace.edit("beforeSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
),
execute = ace.edit("executeSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
),
after = ace.edit("afterSQL",
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
);
There's a lot of repetition here in terms of the options you're using. You could avoid repeating yourself by creating an object to hold defaults. For example:
const defaults =
showPrintMargin: false,
fontSize: '14px',
theme: "ace/theme/sqlserver",
mode: "ace/mode/sql"
var before = ace.edit("beforeSQL", ...defaults)
var execute = ace.edit("executeSQL", ...defaults)
var after = ace.edit("afterSQL", ...defaults)
To avoid repeating yourself when adding an event listener you could do something like this:
[before, execute, after].forEach(obj =>
obj.session.on('change', toggleSubmit);
)
answered May 21 at 22:58
aidanharris
734
edited May 21 at 23:08
answered May 21 at 22:58
aidanharris
734
answered May 21 at 22:58
aidanharris
734
answered May 21 at 22:58
aidanharris
734
734
Correct me if I am wrong, but the calls to.edit()can be called without using the spread operator for the defaults into an extra JSON object:var before = ace.edit("beforeSQL", defaults)
– Sam Onela
May 22 at 15:18
or was there a reason to destructure those defaults into a separate copy for each editor?
– Sam Onela
May 22 at 16:04
add a comment |Â
Correct me if I am wrong, but the calls to.edit()can be called without using the spread operator for the defaults into an extra JSON object:var before = ace.edit("beforeSQL", defaults)
– Sam Onela
May 22 at 15:18
or was there a reason to destructure those defaults into a separate copy for each editor?
– Sam Onela
May 22 at 16:04
Correct me if I am wrong, but the calls to
.edit() can be called without using the spread operator for the defaults into an extra JSON object: var before = ace.edit("beforeSQL", defaults)– Sam Onela
May 22 at 15:18
Correct me if I am wrong, but the calls to
.edit() can be called without using the spread operator for the defaults into an extra JSON object: var before = ace.edit("beforeSQL", defaults)– Sam Onela
May 22 at 15:18
or was there a reason to destructure those defaults into a separate copy for each editor?
– Sam Onela
May 22 at 16:04
or was there a reason to destructure those defaults into a separate copy for each editor?
– Sam Onela
May 22 at 16:04
add a comment |Â
3
Welcome to Code Review! Would you be able to edit your post to include the HTML, and perhaps more of the code around the sample JS above? That will give reviewers more context and hopefully the ability to give a better review.
– Sam Onela
May 21 at 19:29
Well, the code I'm writing doesn't really interact with the DOM directly. Each item is tied to an element like the following:
<div class="ace-editor"></div>– invot
May 21 at 19:39
What additional content do I need to provide? Would a jsfiddle work? I'm asking about syntax, not functionality.
– invot
May 22 at 14:21
You should add all the code necessary to the post... if you can get a jsfiddle running, then you should be able to put the code in a runnable code snippet - there is a keyboard shortcut: CTRL + M
– Sam Onela
May 24 at 18:47