I would like to know how to add new elements to a dropdown menu without refreshing the html page. For example, if I have the drop down menu below:
<select>
<option>existing item 1<option>
<option>existing item 2<option>
<option>existing item 3<option>
<option>add new item<option>
</select>
Any time the user selects "add new item", a text box would pop-up asking the user for input. Then whatever string the user types in the text box, I want that to be saved to the drop down menu without refreshing the page. Of course, the "add new item" option will remain unchanged, so the user can repeat this process as many times as he/she wants.
Thanks for your help in advance.
you can do it using jquery..
$("select").append("<option>Another option</option>")
A non JQuery way is to use the standard JavaScript dom api like so:
This piece uses a prompt as a text popout input. If you want to make it pretty you will have to consider an UI framework.
JavaScript :
var select = document.getElementById('select');
var addNewOption = document.getElementById('addNew');
select.onclick= function(){
if (select.value === 'addNew'){
var text = prompt('New Value');
if (text){
var label = text;
var value = text;
var newOption = document.createElement('option');
newOption.innerHTML = label;
newOption.value = value;
select.insertBefore(newOption, addNewOption);
select.value = value;
}
}
};
Demo here:
http://jsbin.com/sufug/2/edit
Related
I have asked kind of a similar question before : how to toggle using multiple buttons and pass info to the output JQuery
It was answered well, but this time I am using a different approach in the code thus a new question.
I am trying to toggle info and append a div using three different buttons.
Here is The code https://jsfiddle.net/YulePale/nruew82j/40/
JavaScript
document.getElementById("brazil").addEventListener('click', function(e){
if(e.currentTarget.dataset.triggered) return;
e.currentTarget.dataset.triggered = true;
AppendFunction();
function AppendFunction() {
var para = document.createElement("p");
var homeTeam = document.getElementById("brazil").value
para.innerHTML = 'This is the national team of ' + `${homeTeam}` + ':'
<br> <input type="text" value="${homeTeam}" id="myInput"><button
onclick="myFunction()">Copy text</button>';
var element = document.getElementById("gugu");
element.appendChild(para)
}
})
document.getElementById("draw").addEventListener('click', function(e){
if(e.currentTarget.dataset.triggered) return;
e.currentTarget.dataset.triggered = true;
AppendFunction();
function AppendFunction() {
var para = document.createElement("p");
var homeTeam = document.getElementById("draw").value
para.innerHTML = 'This two teams have played each other 4 times ' +
`${homeTeam}` + ':' <br> <input type="text" value="${homeTeam}" id="myInput">
<button onclick="myFunction()">Copy text</button>';
var element = document.getElementById("gugu");
element.appendChild(para)
}
})
document.getElementById("russia").addEventListener('click', function(e){
if(e.currentTarget.dataset.triggered) return;
e.currentTarget.dataset.triggered = true;
AppendFunction();
function AppendFunction() {
var para = document.createElement("p");
var homeTeam = document.getElementById("russia").value
para.innerHTML = 'This is the national team of ' + `${homeTeam}` + ':'
<br> <input type="text" value="${homeTeam}" id="myInput"><button
onclick="myFunction()">Copy text</button>';
var element = document.getElementById("gugu");
element.appendChild(para)
}
})
PS: I don't know why the javascript code is not working in fiddle yet it is working on my computer.
If you look at the code I am basically trying to toggle a div with info on various teams. If it is Brazil the div comes with info on Brazil if Russia, info on Russia.
The problem with my current code is that it keep on appending the divs instead of
toggling them. How can I toggle them? like this: https://jsfiddle.net/YulePale/7jkuoc93/
Instead of having them append another div each time I click a different button?
............................................................................................
PS: EDIT & UPDATE:
#Twisty, I forked the code from your fiddle and tried to implement it when working with more than one row of buttons. The code works well but I was unable to append a different and separate element for each row each time I click on a button on that row.
I tried putting the appended element as a class:
Here is the code: https://jsfiddle.net/YulePale/a9L1nqvm/34/
Also tried putting it as an id:
Here is the code: https://jsfiddle.net/YulePale/a9L1nqvm/38/
How can I put it in a way that each row appends it's own separate element and I would also like users to be able to copy using the copy button without the element disappearing. How do I make it in such a way that the element only disappears only when I click outside the respective:
<div class="col.buttonCol " id="buttons-div">
and also disappears when I click another row of buttons?
Also in your answer you said you would have used text boxes instead of appending this way. I checked the modals out and they all appear on the browser like alerts can you please point me to a resource that show how you can use a modal that works like an appending element instead of one that acts as an alert? Thank you.
Here is the link to the modals I saw: https://getbootstrap.com/docs/4.0/components/modal/
I converted all your JavaScript to jQuery since you posted this in the jquery-ui, I am assuming you want to work with jQuery.
I will often organize my functions first and then the interactive actions.
JavaScript
$(function() {
function myFunction() {
//Do Stuff
}
function AppendFunction(id) {
var para = $("<p>");
var home = $("#" + id).val();
para.append("This is the national team of " + home + ":", $("<br>"), $("<input>", {
type: "text",
value: home,
id: "myInput"
}), $("<button>").html("Copy Text").click(myFunction));
$("#gugu").html(para);
}
function emptyOnDocumentClick(event) {
var action = $(".triggered").length;
$(".triggered").removeClass("triggered");
return !action;
}
$("#brazil, #russia").on('click', function(e) {
if ($(this).hasClass("triggered")) {
return;
}
$(this).addClass("triggered");
var myId = $(this).attr("id");
AppendFunction(myId);
});
$(document).on("click", function(e) {
if (emptyOnDocumentClick(e)) {
$("#gugu").html("");
}
});
});
Working Example: https://jsfiddle.net/Twisty/nruew82j/91/
The basic concept here is a dialog and if it were me, I would use a dialog box either from BootStrap or jQuery UI. You're not doing that, so we're create the content and append it to a specific <div>. Then, like in your previous question, you just detect a click on the document and decide what that will do. In this case, I emptied the content of the <div> that we'd previously appended content to.
Hope that helps.
Is it possible to change the text of a page of a tabPanel and/or to setVisible() in a UiApp using GAS?
EDIT-1
To clarify my question :
function doGet()
{
var app = UiApp.createApplication();
var tabPanel = app.createTabPanel().setId('AAA');
var horPanel = app.createHorizontalPanel().setId('XXX').setSize(500, 400);
tabPanel.add(horPanel, 'YYY');
app.add(tabPanel);
return app;
}
I want to change change the text 'YYY' into something else at any time after the user sees the panels.
The individual panels are not available as separate objects, you can't change their properties neither hide them individually so I'm afraid what you are trying won't be possible.
The only thing you can do is select one of them, that's about all.
To get the same functionality I use vertical panels and handlers like in this example... it is entirely composed of "normal" panels and I can do what I want with it...
EDIT : handlers to switch panels :
//Panel Handlers
var pHandler1 = app.createClientHandler()
.forEventSource().setStyleAttribute('color','blue')
.forTargets(mainPanel[0]).setVisible(true)
.forTargets(mainPanel[1],mainPanel[2],mainPanel[3]).setVisible(false)
.forTargets(button[1],button[2],button[3]).setStyleAttribute('color','white')
button[0].addClickHandler(pHandler1)
var pHandler2 = app.createClientHandler()
.forEventSource().setStyleAttribute('color','blue')
.forTargets(mainPanel[1]).setVisible(true)
.forTargets(mainPanel[0],mainPanel[2],mainPanel[3]).setVisible(false)
.forTargets(button[0],button[2],button[3]).setStyleAttribute('color','white')
button[1].addClickHandler(pHandler2)
var pHandler3 = app.createClientHandler()
.forEventSource().setStyleAttribute('color','blue')
.forTargets(mainPanel[2]).setVisible(true)
.forTargets(mainPanel[0],mainPanel[1],mainPanel[3]).setVisible(false)
.forTargets(button[0],button[1],button[3]).setStyleAttribute('color','white')
button[2].addClickHandler(pHandler3)
var pHandler4 = app.createClientHandler()
.forEventSource().setStyleAttribute('color','blue')
.forTargets(mainPanel[3]).setVisible(true)
.forTargets(mainPanel[0],mainPanel[1],mainPanel[2]).setVisible(false)
.forTargets(button[0],button[1],button[2]).setStyleAttribute('color','white')
button[3].addClickHandler(pHandler4)
image of another app using this feature :
I accomplished this not by adding strings to the tab, but used a Label instead. I could use the id of the label later to tweak the content.
var horPanel = app.createHorizontalPanel().setId('XXX').setSize(500, 400);
var horLabel = app.createLabel('YYY').setStyleAttributes({fontWeight: 'bold', color: 'red'}).setId('xxxLabel');
tabPanel.add(horPanel, horLabel);
In the call back:
var callBackHorLabel = app.getElementById('xxxLabel');
callBackHorLabel.setText('ZZZ').setStyleAttributes({color: 'inherit'});
There may be better ways to deal with the CSS of created label to make it match the default label, but I was too lazy to research it. Hence, the fontWeight.
that is we have opened many tabs.In that tabs i want to search specific tab. Please tell if any ext or option or add-on in chrome or firefox.
Firefox has this functionality built in. If you just start typing in the URL bar and the first character you type is % followed by a space, the rest of what you type will be treated as a search on the titles and urls of open tabs in all Firefox windows.
I'm not sure if this is the site to be asking for help finding extensions that do end user tasks such as this so I'll answer your question explicitly as well as explain how to do it programatically.
The short answer is, yes one extension that will allow you to do this can be found here:
Tab Title Search
The long answer is, in order to find all tabs with a certain name, you need to use the chrome tabs API
I whipped up a short piece of javascript to demonstrate how to have an extension that will create a popup with a search box that you type the desired tab title into. If the tab is found, it will be listed below the search box. If you click on the listing, you will switch to the tab.
// Function to search for tabs
function searchtabs() {
chrome.tabs.query({
title: ""
},
// Callback to process results
function(results) {
// Place holder for the tab to process
var foundTab = null;
// Text to match against
var queryText = document.getElementById("textToSearchInput").value;
// Div to place divs of matched title in
var queryAnswerDiv = document.getElementById("foundTabsDiv");
// Clear the current children
while (queryAnswerDiv.hasChildNodes()) {
queryAnswerDiv.removeChild(queryAnswerDiv.lastChild);
}
// Iterate over all the results
for (var i = 0; i < results.length; i++) {
// Keep track of the tab that is currently being processed
foundTab = results[i];
// If we have a title containing our string...
if (foundTab.title.indexOf(queryText) > -1) {
// Create a new div
var tabDiv = document.createElement("div");
// Set its content to the tabs title
tabDiv.innerHTML = foundTab.title;
// Let it know what the tabs id is
tabDiv.tabToSwitchTo = results[i].id;
// Allow for users to click on the representing div to switch to it
tabDiv.onclick = function() {
// Make the tab selected
chrome.tabs.update(this.tabToSwitchTo, {
selected: true
});
};
// Append the created div to our answer div
queryAnswerDiv.appendChild(tabDiv);
}
}
});
}
document.addEventListener('DOMContentLoaded', function() {
var inputField = document.getElementById("textToSearchInput");
inputField.focus();
inputField.onkeydown = searchtabs;
});
Also, if this is more what you are looking for rather than the extension that I linked, let me know and I can pack this extension.
Edit:
Fixed an error in using the wrong ID to get the input field as well as not getting the first letter of the title (use indexOf() > -1)
An extension that does this is Tab Hero for Chrome ($0.99 Chrome extension). It searches through all of the open tabs (across multiple windows) and offers to switch to the filtered tab. Try and see if it works for you.
I want to know if an anchor link is clicked.
I add anchor links dynamically and set ids with their name file but i dont know how amoutn the number of the cell "clicked" in my Spreadshett.
For ex: the id of file "test.pdf" --> test;
in spreadsheet:
ex:
ColumA <namefile>: test.pdf
ColumB <linkfile>: https://docs.google.com/document/d/1PiMj.....jramcs
ColumC <cliked>: 1
I'm specting that if i clicked my anchor my function could know which anchor is cliked and amount " 1 " in colum C in the ppropriate row.
var html = app.createAnchor(nf, hf).setId(nf);
I am trying to make something like:
var html = app.createAnchor(nf, hf).setId(nf).addClickHandler(app.createServerHandler("sumDoc").addCallbackElement(flexTableDoc));
¿But how i know which anchor is cliked in the function sumDoc?
I think you can get that using client handlers and a textbox (this last one can be visible or not).
var clickedItem = app.createTextBox().setName('clickedItem')
On each anchor you add a clickHandler like this
var handler = app.createClientHandler().forTargets(clickedItem).setText(Anchorname);
anchor.addClickHandler(handler)
and in the server handler you will get the textBoxValue with
var clickedItem = e.parameter.clickedItem;
if you want a more accurate code you should provide the code you use to create the UI with the anchors
This is also possible and easy, format your anchor like you said.
var html = app.createAnchor(nf, hf).setId(nf).addClickHandler(app.createServerHandler("sumDoc").addCallbackElement(flexTableDoc));
Now your return function:
function sumDoc(e){
//this will return the value of the ID of the element thats clicked so in this case its test.pdf
var linkId = e.parameter.source;
}
I hope this is useful
Using HTML
I want to use 2 checkbox, when i click the check box 1 then it will redirect to another page, when i click the check box 2 then it will redirect to another page.
How to make a code in HTML
Need Code Help
First of all checkboxes are not supposed to be used for redirection purpose, however if you really want to do that, you can go about something like this:
var el = document.getElementById('checkbox1_id');
el.onclick = function(){
document.location.href = 'somepage.html';
};
var el2 = document.getElementById('checkbox2_id');
el2.onclick = function(){
document.location.href = 'somepage2.html';
};