1
nicht sicher, wie genau meiner Frage im Titel zu beschreiben, aber ...Senden von Text (von Google Visualization Query) in ein Eingabefeld auf Klick mit Javascript
Was ich bin versucht, eine zu tun ist, drücken Die ID oder der Text eines Menüeintrags in einem Eingabefeld <input id="assignment"/>, wenn darauf geklickt wird. Das Menü wird jedes Mal dynamisch gefüllt, wenn die Seite mit Daten geladen wird, die von diesem spreadsheet stammen. Die Menüpunkte <a></a> werden geladen, nachdem das folgende "send script" initialisiert wurde.
// Send to Input Script //
$('#byAssignment a').click(function() {
var id = $(this).text();
var input = $('#assignment');
input.val(id);});
// End Send to Input Script //
Offensichtlich wird dies nicht funktionieren. Wie kann ich das umgehen? Jede Hilfe würde sehr geschätzt werden. Vielen Dank.
Hier ist der vollständige Code:
// Google Visualization Query Script //
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(querymenu);
function querymenu() {
var queryMENU = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=1HpHMfoEnPgESb2XPVCgb7XyGwRAvrq3EoQj4WHj4vhA&sheet=QUERY2');
queryMENU.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in Query: Please Refresh Page ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
\t
\t var datatable = response.getDataTable();
\t
\t
\t for (var i = 1; i < datatable.getNumberOfColumns(); i++) {
var ddItemValue = datatable.getValue(0, i);
\t
\t var ddMenuItem = document.getElementById('byAssignment').appendChild(document.createElement('A'));
\t
ddMenuItem.href = '#';
\t ddMenuItem.id = ddItemValue;
ddMenuItem.innerHTML = ddItemValue;
}
}
// END Google Visualization Query Script //
// Menu Script //
function AssignmentMenu() {
document.getElementById('byAssignment').classList.toggle('show');
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName('dropdown-content');
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
// END Menu Script //
// Send to Input Script //
$('#byAssignment a').click(function() {
\t var id = $(this).text();
var input = $('#assignment');
input.val(id);
});
// END Send to Input Script //.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
cursor: pointer;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="dropdown">
<button onclick="AssignmentMenu()" class="dropbtn">Assignment</button>
<div id="byAssignment" class="dropdown-content">
<a>this works</a>
</div>
</div>
<input id="assignment"/>
können Sie nicht einfach Ihr erstes Bit Code aufrufen, nachdem das "send snippet" aufgerufen wurde? have 'handleQueryResponse' rufen Sie es auf, nachdem es fertig ist. – Polyov
danke für den Vorschlag Polyov – firenemus