JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="questions">
<li>
<div id="modem_offline">CLICK ME</div>
</li>
</ul>
<textarea id="textarea"></textarea>
<div id="dialog"></div>
</div>
CSS
#modem_offline {
background: yellow;
text-align: center;
width: 120px;
}
#textarea {
margin-top: 10px;
width: 400px;
height: 200px;
padding-left: 15px;
padding-top: 10px;
}
JavaScript
$(document).ready(function () {
// Make an empty array
var textAreaOldValue = [];
// clear function
function clear_all() {
$('#textarea').val('');
textAreaOldValue = [];
}
var txt = $("textarea");
$('#modem_offline').click(function () {
clear_all();
modem_offline();
})
/* Dialog Template
function E_N_T_E_R__FUNCTION_N_A_M_E() {
var content = " E N T E R C O N T E N T H E R E ";
var title = "E N T E R T I T L E H E R E";
$('#dialog').text(content).dialog({ buttons:
{ 'YES': function() {
$(this).dialog('close');
// enter dialog here or function
}, 'No': function() {
$(this).dialog('close');
// enter dialog here or function
}, 'Back': function() {
$(this).dialog('close');
// enter dialog here or function
} },
// dialog settings
show: 'fade',
modal: true,
title: title
});
}
*/
// first
function modem_offline() {
var content = "Modem offline troubleshooting.";
var title = "Modem Offline";
$('#dialog').text(content).dialog({
buttons: {
'Continue': function () { // Button 'Ok'
$(this).dialog('close');
mo_ons_ver();
textAreaOldValue.push(txt.val()); txt.val(txt.val() + 'Modem offline troubleshooting\n');
}
},
title: title,
show: 'fade',
modal: true
}); // position of dialog
}
// second
function mo_ons_ver() {
var content = "Check ONS. Is the customer in an area where there is an outage?";
var title = "ONS outage verification";
$('#dialog').text(content).dialog({
buttons: {
'YES': function () {
$(this).dialog('close');
textAreaOldValue.push(txt.val()); txt.val(txt.val() + 'Outage in ONS with TRB# ->...