Input text html widget example not working


#1

Hi, im trying to figure out a way to make users edit a text box, in order to put information about the product, (so other users with access to that widget can see the info (there’s no problem if anyone can edit it).

What im thinking of (probably not the best idea) is to create a device that will be just a local device so i wont connect it to any hardware, inside that device create a variable in which i will store that info, then use the HTML canvas to create an input box and send that to the variable and then display it with a metric.

so my first try was just to send a number so i just used the input text html example seen in this link:


but i cant make it work,

i copied all html,css,js code and selected my token and variable id and it doesnt register any changes.

so first of all:
Is there any better ways to use text input,output in ubidots?

and is there a problem with that example, am i doing something wrong?


#2

Greetings, the example works properly and has been tested several times in the past for many users, please make sure that you are filling properly with your TOKEN and VARIABLE_ID the JS code and that you are adding the third party JQuery library: https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

Please keep in mind that the HTML canvas is intended for developers with JS Knowledge, if you have not developed using it you can also simulate data without hardware as suggested in this article.

All the best


#3

When using your example HTML canvass widget to enter a numerical value into a variable, does the “JS Library URI” field need to contain something?

I’m using your example as is, entered my token and variable ID in the JS section, connected it to the correct variable, but the widget does not update the variable. So I’m wondering if the “JS Library URI” field can remain empty if I use your example, or do I need to put something in there?


#4

The examples from the help center remains mainly in the Jquery library, you have to add it to the third party libraries.

Regards


#5

Ok, so for the other non-JS programmers out there who may not know how to do this, you can paste this URL into the “add 3rd party library”:

https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Next question - in order to use this widget to send a short text message instead of numbers, could you tell me what I need to change to the code? In the HTML section I changed the input type to text : <input type=“text”, but the widget still only accepts numbers.

Thanks,
Hein


#6

Greetings,

please keep in mind that the HTML is intended for users with HTML and JS knowledge, if you are not familiarized with these concepts we strongly advise you to learn their basics before of trying to use it. Now, about your question, the input type of the text box in the HTML code is set as ‘number’, you should change the type if you wish to input text.

All the best


#7

If you read my previous post you will noticed that what you suggested, I already did. But the input does not accept text, only numbers. Could you humour me by telling me what else needs to be changed?

Thanks,
Hein


#8

Anyone in this community who can give a tip here, or do I really have to study JS first to get a simple widget working?


#9

Greetings @agrisense,

this piece of html code allows me at my side to accept text:

<div class="notification--container" id="notification">
  <p>Value sent successfully</p>
</div>

<div class="send-value--container">
  <input type="text" placeholder="Enter text" class="send-value--input" id="value" />
  <button type="button" class="send-value--button" id="send-value">Send value</button>
</div>

In this link: https://industrial.ubidots.com/ubi/getchart/page/otSVTcntkU-QQscJoIVb8MrSoRA you can find the widget with that code that allows you to enter text inside the input tag.

All the best.


#10

Like I already mentioned twice above, simply changing the input type in the html to “text” does not work. It still only accepts numbers.

Your widget that does work, what does the JS look like? Because in the example the JS has this line: value: parseInt($value.val(), 10)

I know nothing about JS but when putting parseInt into google I find that it parses an Int value - so this example cannot work with this JS.

Or am I wrong? Like I said, I don’t know JS, but I would like to get this widget working.

Thanks
Hein


#11

I did not modify nothing in the JS code, btw, the code from the example will not work for you if you intend to send data to Ubidots because of the reasons below:

  1. The code is intended to send values, that is why this line value: parseInt($value.val(), 10)is presented, the JS parseInt() is intended to parse a string with only numbers value as a base10 number.
  2. Tha value for a variable must be numerical, strings or char arrays are not allowed.

If you plan to send strings, you will have to use the variable’s context to store them. In these articles you can find some examples of how to use the variable’s context:

You will have to edit the actual JS code to send data inside the context if your goal is to store strings instead of values.

All the best


#12

<< btw, the code from the example will not work for you if you intend to send data to Ubidots because of the reasons below:

It would have been helpful if you told me this from the start instead of sending me on a goose chase.

Cheers


#13

Hello, it´s possible to add a button for increment/decrement the value of the variable?

Example:
The user defines the value of variable = 10;
And i want to create buttons for incremente ++1 and decremente --1 values;

Many thks for attention!