Problem displaying global variable in index.html


#1

Hi - I’m very new working with Electron.

Is it possible to insert a global variable list into my html select input? Where would I create the variable? How do I reference it?

Here is my main.js and index.html.

var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
  // Create the browser window.

    mainWindow = new BrowserWindow({
    width: 275,
    height: 738,x:2000,y:0,
    title: "Sunshine",
    alwaysOnTop: "true"
  });

  // and load the index.html of the app.
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
});

<!DOCTYPE html>
<html>
<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>


<script type="text/javascript" src="jquery.js"></script>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Sunlight</title>

    <link rel="stylesheet" href="./css/jquery.flipster.min.css">
    <link rel="stylesheet" href="./css/styles.css">
  <!-- Basic Page Needs
  ================================================== -->
    <meta charset="utf-8">
    <!-- SEO Meta
  ================================================== -->
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="distribution" content="global">
    <meta name="revisit-after" content="2 Days">
    <meta name="robots" content="ALL">
    <meta name="rating" content="8 YEARS">
    <meta name="Language" content="en-us">
    <meta http-equiv="reply-to" content="">
    <meta name="GOOGLEBOT" content="NOARCHIVE">
    <!-- Mobile Specific Metas
  ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- CSS
  ================================================== -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap-tagsinput.css">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
    <!-- Favicons
	================================================== -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
    <!--[if gte IE 9]>
      <style type="text/css">
        .gradient {
           filter: none;
        }
      </style>
    <![endif]-->
    <!-- JS
	================================================== -->
</head>
<body>



<script>
		$(document).keydown(function(e) {
    // ESCAPE key pressed
    if (e.keyCode == 27) {
        window.close();
    }
});
</script>
    <!-- HEADER START -->
    <header>
        <div class="header">
        </div>
    </header>
    <!-- HEADER END -->
    <!-- CONTAINER START -->
    <section>
        <div class="section">
	        <div class="spacing"></div>
	        <div class="getem"><p ID="getemtext">get &nbsp;em</p></div>
	        <div class="lightning"></div>
            <div class="container">

	            <!-- form start -->
	            <form id="form"">

                <div class="top_circle_content">
                    <div class="top_circle_content_img">
                      <div class="top_circle_content_box_icon"> <span></span></div></div>
                    <div class="calendar_top">
                        <label class="date_label">
                            <input type="text" value="SET REMINDER" placeholder="SET REMINDER" id="datepicker" name="dateVar" tabindex = "-1"><label>
                        <!-- <span id="datepicker">May.06/02/2016 30, 2016</span> -->
                    </div>
                    <div class="header_content_titel">
                        <h1>
                            NEW TASK</h1>
                        <div class="header_content_form">
                            <div class="header_content_form1">
                                <label>
                                    Title:</label>
                                <input placeholder="What are you thinking about?" name="Description" id="description" autofocus onkeypress="return searchKeyPress(event);" />
                            </div>
                            <div class="header_content_form2_width">
                                <div class="header_content_form2">
                                    <label>
                                        Impact:</label>
                                    <input placeholder="Will things change?" name="Impact" onkeypress="return searchKeyPress(event);" />
                                </div>
                                <div class="header_content_form2">
                                    <label>
                                        Effort:</label>
                                    <input placeholder="How many hours?" name="Effort" onkeypress="return searchKeyPress(event);" />
                                </div>
                            </div>
                            <div class="header_content_form1">
                                <label>
                                    Notebook:</label>

<!-- START SELECT -->
					<span class="custom-dropdown custom-dropdown--white">
						<select  id="nname" name="clientVar" form="categoryform" class="custom-dropdown__select custom-dropdown__select--white" onkeypress="return searchKeyPress(event);">


							<script>
								var testVar=window.KeyboardMaestro.GetVariable( 'notebookList' )
							</script>


						</select>


<!-- END SELECT -->


                            </div>
                        </div>
                    </div>
                </div>
                <div class="add_details_content">
                    <a href="#" class="add_details_content_button">Add Details:</a>
                    <div class="context_div_bg">
                        <div class="context_content_form1">
                            <label>
                                Context:</label>
                            <input placeholder="Anything else you'd like to add?" name="Context" onkeypress="return searchKeyPress(event);" />
                        </div>
                        <div class="context_content_form2">
                            <label>
                                # Tags:</label>
                            <input type="text" value="" data-role="tagsinput" name="tagsVar" />
                        </div>
                    </div>
                </div>
                <div class="content_div_button">
                    <a id="prioritize" class="content_div_button_bottom" href="#" onclick="window.KeyboardMaestro.Submit('quick')">PRIORITIZE</a>
                    <p><a href="#" onclick="window.KeyboardMaestro.Submit('open')">
                        & open your note</a></p>


                </div>
            </div>
</form>
        </div>
    </section>
    <!-- CONTAINER END -->
    <!-- FOOTER START -->
    <footer>
        <div class="footer">
        </div>
    </footer>
    <!-- FOOTER END -->

<br>
<br>
<br>

<div class="fixedbell"></div>
<div class="fixedline"></div>
<div class="dropdown_arrow"></div>
<div class="apostrophe"></div>
<div class="bottombar"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap-tagsinput.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
    $(document).ready(function () {
        $(function () {
            $("#datepicker").datepicker();
            $(".top_circle_content").append($("#ui-datepicker-div"));
        });

        var settings = $('.add_details_content_button'),
menu = $('.context_div_bg');
        settings.on('click', function () {
            menu.fadeToggle('fast');
            return false;
        });
    });

    $('.add_details_content_button').click(function () {
        $(this).toggleClass('active');
        $('.container').toggleClass('nobgimage');
        return false;
    });

</script>

<script type="text/javascript">
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");

$(".dropdown dt a").click(function() {
	$(".dropdown dd ul").toggle();
	 return false;
});

$(".dropdown dd ul li a").click(function() {
	var text = $(this).html();
	$(".dropdown dt a span").html(text);
	$(".dropdown dd ul").hide();
	$("#result").html("Selected value is: " + getSelectedValue("sample"));
});

function getSelectedValue(id) {
	return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function(e) {
	var $clicked = $(e.target);
	if (! $clicked.parents().hasClass("dropdown"))
		$(".dropdown dd ul").hide();
});


$("#flagSwitcher").click(function() {
	$(".dropdown img.flag").toggleClass("flagvisibility");
});

});
    </script>

  <!-- BUTTON LISTENER -->

    <script>
function searchKeyPress(e)
{
 // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('prioritize').click();
        return false;
    }
    return true;
}
</script>

</html>