How can I get text from textarea or textbox.
function myClickHandler() {
var app = UiApp.getActiveApplication();
var textbox = app.getElementById("TextBox1");
var text = textbox.text;
textbox.setText(text + "1");
return app;
}
After run of this function is in my textarea: "undefined1".
On googledevelopers help page https://developers.google.com/apps-script/class_textbox
is not getText method.
How can I get text from textbox?
It's not textbox.text. It should be textbox.value.
function myClickHandler() {
var app = UiApp.getActiveApplication();
var textbox = app.getElementById("TextBox1");
var text = textbox.value;
textbox.setText(text + "1");
return app;
}
Try this -
var text = textbox.value;
In order to pass a widget's value to a callback handler you must do two things:
Assign a name to the widget when you create it.
texbox.setName('foo');
Add the widget as a callback element to the server handler you create.
clickHandler.addCallbackElement(textbox);
If you've done that, then the value of the textbox will be passed in the event parameter of your callback function.
function myClickHandler(event) {
var textboxValue = event.parameters['foo'];
...
}
Related
Issue : I am using Cognex MX-1000 to scan barcodes. I have three textboxes and I am trying to scan barcodes and change the focus to next textbox. But after I scan the third textbox the value is always entered in third textbox even when the focus is on first textbox.
Cause : My code is not able to exit the innermost Setresultcallback function. Below is my method does anyone know how to exit the innermost callback function?
me.scanner.setResultCallback(function (result) { //First callback
var barcode = result.readString;
var txt1 = barcode;
document.getElementById("TextBox1").value = txt1;
document.getElementById("TextBox2").focus();
me.scanner.setResultCallback(function (result) { //Second callback
var barcode = result.readString;
var txt2 = barcode;
document.getElementById("TextBox2").value = txt2;
document.getElementById("TextBox3").focus();
me.scanner.setResultCallback(function (result) { //Third Callback & stuck here!!! I want to exit this function
var barcode = result.readString;
var txt3 = barcode;
document.getElementById("TextBox3").value = txt3;
document.getElementById("TextBox1").focus();
return;
});
return;
});
return;
});
That's because you leave the callback for the third field in the last callback. The following should fix the problem.
me.scanner.setResultCallback(/* Change here -> */ function firstFieldCallback(result) { //First callback
var barcode = result.readString;
var txt1 = barcode;
document.getElementById("TextRec1").value = txt1;
document.getElementById("TextRec2").focus();
me.scanner.setResultCallback(function (result) { //Second callback
var barcode = result.readString;
var txt2 = barcode;
document.getElementById("TextRec2").value = txt2;
document.getElementById("TextRec3").focus();
me.scanner.setResultCallback(function (result) { //Third Callback & stuck here!!! I want to exit this function
var barcode = result.readString;
var txt3 = barcode;
document.getElementById("TextRec3").value = txt3;
document.getElementById("TextRec1").focus();
/* Change here -> */ me.scanner.setResultCallback(firstFieldCallback);
return;
});
return;
});
return;
});
The problem is that you don't rebind to your first callback. Since you always do the same things into your callbacks :
Get the value
Write the value to the current input
Focus the next input
It can be simplified to something like this :
var me = {
scanner: {
setResultCallback: function(callback) {
setTimeout(function() {
callback({
readString: Math.floor(Math.random() * 100) + 1
})
}, 1000);
}
}
},
textboxes = ['TextRec1', 'TextRec2', 'TextRec3'],
index = 0;
function readValue(result) {
var barcode = result.readString;
document.getElementById(textboxes[index++]).value = barcode;
index = index === textboxes.length ? 0 : index;
document.getElementById(textboxes[index]).focus();
me.scanner.setResultCallback(readValue);
}
me.scanner.setResultCallback(readValue);
<input type="text" id="TextRec1" />
<input type="text" id="TextRec2" />
<input type="text" id="TextRec3" />
Don't mind var me = { ... I wanted something to simulate the behavior you're describing.
I've made a snippet to demonstrate how this can be done. Each function sets the callback to an existing function rather than creating a new one to set it to. I got it working with setInterval so you can see what's happening better; you can see that each new scan scan overwrites the next box, proving that the focus wraps around.
//Code to make this work in a snippet
var me = {};
me.scanner={};
me.scanner.setResultCallback = function(newcallback){scancallback=newcallback;};
//Set the callback to the first function; each function sets it to the next
me.scanner.setResultCallback(scan1);
//Simulate scanning stuff by manually calling the callback with time intervals; just pretend each time the function is called, it's called naturally by scanning with the scanner
setInterval(function(){
scancallback({randomField:"this is a scan result I guess",readString:Math.floor(Math.random()*10000)});
},1000);
function scan1(scanresult){
//Don't even need the variables, if you need them somehow you can add them back
document.getElementById("TextRec1").value =
scanresult.readString;
document.getElementById("TextRec2").focus();
me.scanner.setResultCallback(scan2);
}
function scan2(scanresult){
//Don't even need the variables, if you need them somehow you can add them back
document.getElementById("TextRec2").value =
scanresult.readString;
document.getElementById("TextRec3").focus();
me.scanner.setResultCallback(scan3);
}
function scan3(scanresult){
//Don't even need the variables, if you need them somehow you can add them back
document.getElementById("TextRec3").value =
scanresult.readString;
document.getElementById("TextRec1").focus();
me.scanner.setResultCallback(scan1);
}
<input type="text" id="TextRec1"/>
<input type="text" id="TextRec2"/>
<input type="text" id="TextRec3"/>
I'm trying to modify a URL based on the user either (or both) clicking one of 3 text links and/or entering a keyword into a text input. Currently, I have it working, but doing both overwrites the other. For example, if I click on "Scholarships," it looks good. If I enter a word into the text input, it works but overwrites my previous selection. Please be kind, as I'm new to JS.
A CodePen:
https://codepen.io/admrbsn/pen/QOQmMN
My JS:
$(document).ready(function () {
var select = $('.custom-option');
var input = document.querySelector("#search-input");
select.click(function(e) {
var type = e.target.getAttribute('data-value');
var link = "/search/" + type + "/?searchterm=";
document.querySelector('#searchLink').href = link;
});
input.addEventListener("change", function() {
var keyword = this.value;
var link = "/search/?searchterm=" + keyword;
document.querySelector('#searchLink').href = link;
});
});
Try to reuse code, for example create a function that updates the link from both actions.
example:
function updateLink() {
var href = '';
if (link)
href = "/search/" + link + "/?searchterm=" + text;
else
href = "/search/?searchterm=" + text;
document.querySelector('#searchLink').href = href;
}
complete example:
https://codepen.io/anon/pen/ooEywW
Well yes, the change event is firing and is running the second block of code (input.addEventListener("change", function() {) that sets it without the type. I'd recommend setting variables outside of those events, and then changing the HREF with a separate code block:
$(document).ready(function () {
var select = $('.custom-option');
var input = document.querySelector("#search-input");
var type = '';
var searchterm = '';
var updateLink = function () {
var link = "/search/" + type + "?searchterm=" + searchterm;
document.querySelector('#searchLink').href = link;
}
select.click(function(e) {
type = e.target.getAttribute('data-value');
updateLink();
});
input.addEventListener("change", function() {
searchterm = this.value;
updateLink();
});
});
Also I'm not sure why you're using document.querySelector when you're already using jQuery. Why not just do $("#search-input")?
Structure Concept:-
Basically, i am trying to create the modal window containing input and that modal window currently fires when the input on index page get focused for that I have used data attribute to make a link between them by assigning them same attribute value.
Javascript Concept:-
for the modal window, I have created the modal object. and model object contains a bindModal method which takes one argument and that argument is data attribute value. after taking that value bindModal method will search dom elements containing that particular value and after the search, I iterate over them using each loop.
Problem
So basically I want whenever user starts typing on the model input it should get written automatically in input on the index page.
I will appreciate you all if guys help me out to make my code more optimized and well structured and most important thing is that let me know what mistake I have done in overall work Thanks
JavaScript Code
var modal = function () {
this.toggleModal = function () {
$('#modal').toggleClass('content--inActive').promise().done(function () {
$('#modal__close').on('click',function(){
$('#modal').addClass('content--inActive');
});
});
}
this.bindModal = function (bindVal) {
var bindValue = $(document).find('[data-modal-bind = ' + bindVal + ']');
$.each(bindValue, function (index) {
var bind1 = $(this);
if(index === 1) {
var bind2 = $(this);
$(bind1).change(function (){
$(bind2).val(bind1.val());
});
}
});
}
}
var open = new modal();
$('#input_search').on('click',function(){
open.toggleModal();
open.bindModal('input');
});
Here is one way to do what you want:
var modal = function() {
this.bindModal = function(bindVal) {
var bindValue = $('[data-modal-bind = ' + bindVal + ']');
bindValue.each(function(index) {
$(this).keyup(function() {
var value = $(this).val();
bindValue.each(function(i, e) {
$(this).val(value);
});
});
});
}
}
$('#input_search').on('click', function() {
var open = new modal();
open.bindModal('input');
});
Changes done:
I cached the inputs with same binding values in bindValue variable, and then bound the the keyup event for each of them. On keyup, the value of the current input is get in value, which is then assigned to each input using the inner loop.
This makes the inputs to be in sync while typing. Hope that solves your issue.
I understand that onclick() in html with parenthesis calls automatically. But in my situation, I want to pass a parameter into the onclick function(specifically, the element clicked). So how do I manage this without having onclick fired when the page loads? In addition, the onclick method does not fire after its automatically firing upon loading. My code is below:
for (i = 0; i < returnPostPhotoSrcs().length; i++) {
// var photosArray=returnPhotoNames()
// var imgName=photosArray[i]
var imgSrcArray=returnPostPhotoSrcs();
var imgSrc=imgSrcArray[i]
var postNamesArray=returnPostNamesArray();
var postName=returnPostNamesArray[i]
var img=img_create(imgSrc,postName,'')
img.style.width=returnPostHeight();
img.style.height=returnPostWidth();
img.className="postImage";
img.onmousedown=playShout(img);
var postNamesArray=returnPostNames();
var innerSpan = document.createElement('span');
innerSpan.onmousedown=playShout(innerSpan); //problem line
var text = postNamesArray[i];
innerSpan.innerHTML = text; // clear existing, dont actually know what this does
var outerSpan = document.createElement('span');
outerSpan.className="text-content";
outerSpan.onmousedown=playShout(outerSpan); //another problem line, also doesnt call onclick
var li = document.createElement('li');
var imgSpacer=img_create('spacerSource',"spacer",'')
imgSpacer.style.width="25px";
imgSpacer.style.height=returnPostWidth();
li.appendChild(img)
outerSpan.appendChild(innerSpan)
li.appendChild(imgSpacer)
imgSpacer.style.opacity="0"
// if (i>0 && i<returnPostPhotoSrcs().length-1) {
// hackey
var imgSpacer=img_create('spacerSource',"spacer",'')
imgSpacer.style.width="25px";
imgSpacer.style.height=returnPostWidth();
li.appendChild(imgSpacer)
li.appendChild(outerSpan)
imgSpacer.style.opacity="0"
// }
var outerDiv = document.getElementById("postDivOuter");
outerDiv.appendChild(li)
}
Adding onto this you could also do:
img.onmousedown= function(e) { playShout(e) };
//for playshout
playshout = function(e) {
var element = e.target; //this contains the element that was clicked
};
The function fires because you are calling it. You need to use a closure
img.onmousedown= function() { playShout(img) };
As others have shown, you can create an anonymous function, or another option is to use .bind():
innerSpan.onmousedown = playShout.bind(null, innerSpan);
I have a Google Apps Script that dynamically generates buttons and assigns for each a ClickHandler which in turn calls a function.
My problem is that because every button calls the same function I can't find a way to indentify which of them actually made the call. Here is a code sample:
var handler = app.createServerHandler("buttonAction");
for (i=1,...) {
app.createButton(...).setId(i).addClickHandler(handler);
}
function buttonAction() {
//How do I know what button made the call?
}
Another option is to use the e.parameter.source value to determine the ID of the element that triggered the serverHandler to be called.
Here's an example:
function doGet(e) {
var app = UiApp.createApplication();
var handler = app.createServerHandler("buttonAction");
for (var i = 0; i < 4; i++) {
app.add(app.createButton('button'+i).setId(i).addClickHandler(handler));
}
return app;
}
function buttonAction(e) {
var app = UiApp.getActiveApplication();
Logger.log(e.parameter.source);
}
e.parameter.source will contain the ID of the element, which you could then use to call app.getElementById(e.parameter.source) ...
You could create multiple handlers, each for one button:
for (i=1,...) {
var handler = app.createServerHandler("buttonAction" + i);
app.createButton(...).setId(i).addClickHandler(handler);
}
function buttonAction1() {
// code to handle button 1
}
function buttonAction2() {
// code to handle button 2
}
function buttonAction...
I wouldn't recommend of having these sort of "anonymous" action handlers though, as you might be having troubles later in remembering which actionX does what.
(e.g. have a different approach, w/o a loop, or prepare a dictionary-like/array object of meaningful handler names before that loop.)
OTOH, you could use event object argument provided to your callback function:
function buttonAction(event) {
// use event object here to identify where this event came from
}
The thing is the above event object properties depends on where your callback is being called from. For instance, if it were a submit button where you had a Form, then you could access parameters submitted by that from like so: event.parameter.myParamName. See code sample here.
So, if you have a variable number of buttons, you could use a hidden element + the button:
for (i=1,...) {
var hiddenAction = app.createHidden("action", "action"+i);
var handler = app.createServerHandler("buttonAction");
handler.addCallbackElement(hiddenAction);
var btn = app.createButton("Button text", handler);
// you'll need to add both btn and hidden field
// to the UI
app.add(hiddenAction);
app.add(btn);
}
Then, your buttonAction might look like this:
function buttonAction(e) {
var action = e.parameter.action;
// do something based on action value here
// which will be one of "action1", "action2", ...
}
The above is a copy & paste from Hidden class sample.
The above might not work out of the box, but you get the idea: create a hidden element that holds the info you need in your callback, and attach that hidden to your server handler. You could even create multiple hidden elements or a Form panel.
I have the same issue. It works using Tag.
EG
SETUP
var button = addButton(app
,panel
,"buttonActiveTrelloProjects_" + i.toString()
,appVars.buttonWidth() + "px"
,appVars.level2ButtonHeight().toString() + "px"
,false
,false
,"Trello"
,"buttonActiveTrelloProjectsHandler"
,(appVars.buttonLhsGap() * buttonCntr) + (appVars.buttonWidth() * (buttonCntr - 1 ) + 9)
,(appVars.level2ButtonTopGap() * 34)
,3
,"button");
button.setTag(projectName );
USE
function buttonActiveProjectsChartHandler_1(button){
...
buttonTag = getButtonTag(button);
chartType = buttonTag.split(";")[1];
activeProject = buttonTag.split(";")[0];
...
}
function getButtonTag(button){
var jsonButton = JSON.stringify(button);
var source = button.parameter.source;
var tagPtr = source + "_tag";
return button.parameter[tagPtr];
}