Develop Reference

Fire HTML input-event only once when more than one character is typed

I'm creating an input field where some data should be fetched (by AJAX) and displayed every time the user enters data into that field. However, if the user types several characters, say he types "test" to get all records who contain the string "test", it would not be necessary to do 4 queries after every character pressed, but one query after he stopped typing. I can think of several solutions with a global variable where I check if the same event has been fired again, but is there a really elegant way to do this? Maybe check if there is something in the keyboard buffer and only proceed if it is empty? Or is there an event that is only fired once the keyboard buffer is empty and all characters are in the input field?

The elegant way is to use a timeout, and to keep clearing the previous timeout with each key press
var tID;
function keyUp (e) {
if (tID) clearTimeout(tID);
tID = setTimeout(function() {
... // make web call
}, 2000);
}
This will ensure that the web call is only called after the last key is pressed (you may want to adjust the timeout value)

There are ways to achieve this that I can think of:
Use timeout, from the last keyup event. This is not always the best and not that precise with users that have low typing speed.
Use space character do regconize if the user has finished typing a word. Based on changes in length and total word count, you can decide if you would want to send AJAX or not.
Depends on the type of input you are working with, you may choose the most suitable method for you. The first one is somewhat quite rigid. The second method requires user to press space every time he finishs typing. A little bit of both could be a sweet spot perhaps. In modern day, I don't think sending request every keyup will cause huge performance effect though.

How do I dynamically add one or more text boxes to a region in Oracle Apex 5.1?

I am using Oracle Apex 5.1 to create a sample application. I am trying to create new text boxes based on a number entered into a field. So far, the actors in this play are:
P11_TESTBOX: The text box that contains the amount of necessary new boxes
TEST: The button that, when pressed, fires the necessary dynamic action(s)
Procedure TEST_THIS: PL/SQL procedure that, when triggered by the button, will run and create the necessary boxes
The procedure, as written presently (just trying to test to see if I can get it to work before implementing fully):
CREATE OR REPLACE PROCEDURE TEST_THIS (
HOW_MANY IN NUMBER)
IS
BEGIN
FOR I IN 1..HOW_MANY LOOP
HTP.P('<input class="dynamicBoxes" id="P11_BOX_' || I || '" type="text" value="" />');
HTP.P('<br/>');
END LOOP;
END;
Like normally, I set a dynamic action on TEST: Event is set to 'Click', Selection Type is 'Button', Button is 'TEST', Event Scope is 'Static'. The True action is 'Execute PL/SQL Code', which is a simple call to the procedure HOW_MANY, passing :P11_TESTBOX as the number. I kept getting the error
Ajax call returned server error ORA-06502: PL/SQL: numeric or value
error for Execute PL/SQL Code
Thinking I was going crazy (which, let's be honest, isn't that far from the truth at this point), I added an 'Execute JavaScript Code' function:
alert(document.getElementById('P11_TESTBOX').value);
Not surprisingly, the number entered into the box was returned. Sadly, the error still appeared.
In an effort to ensure I tried everything, I changed the syntax of the PL/SQL procedure:
CREATE OR REPLACE PROCEDURE TEST_THIS (
HOW_MANY IN NUMBER)
IS
BEGIN
FOR I IN 1..HOW_MANY LOOP
HTP.P(
apex_item.text(
p_idx => 'P11_NEWBOX_0' || I,
p_Value => ''
)
);
END LOOP;
END;
Result: The alert still gives me the number; the error still follows.
The idea to try both versions came from this website.
Just to preempt myself, once I am able to sort this issue out, I will need to grab whatever values are entered into the created text boxes and insert them into the database. I'm hoping that's as simple as using whatever the IDs are that get created, but I'm not optimistic after this issue. Any help would be greatly appreciated.

You dont need to write a PL/SQL Procedure. Just hide the boxes on Page Load an when triggered the button the dynamic action shows them ? So you go to Server Side Action and Item = Value and also set this in the DA

Testing equality for numbers using javascript

newbie with Javascript. I have a javascript function that is checking user input. The html document has two forms. I call validateForm(document.forms[0]) with the first form as an argument. Then in my function I rename the argument to TheForm. (e.g. validateForm(theForm).) The fields contain integers. In validateForm I simply want to check equality for two form fields like this:
if(theForm.Field1.value == theForm.Field2.value)
{
//do something
}
Pretty simple eh? I have tried
theForm.Field[x].value.toString, theForm.Field[x].toString.Trim, theForm.Field[x].
Also tried to assign vars for both fields and test. Viewing the contents in Visual Studio I can see where the fields are exactly the same, and hence, the boolean check should fire.

jQuery validation, NOT the normal plugin

I've been looking at the jQuery Validation Plugin and it seems like overkill (my site's script requirements are ballooning), and also not quite what I want.
Let me define some terminology: an <input type="text"> field's status is VALID if it matches both RegEx 1 and RegEx 2, PARTIAL if it matches RegEx 1 but not RegEx 2, and INVALID if it doesn't match RegEx 1.
For example, RegEx 1 could be /^[A-Z_]*$/ and RegEx 2 could be /^[A-Z]+(_[A-Z]+)*$/.
The requirements are:
any key press which would lead to an INVALID status is ignored, without interfering with focus or the caret position, and without the value ever being seen to change,
otherwise the status is updated after every key press to be either VALID or PARTIAL, and
whenever an input's status changes, a callback is invoked.
Seems pretty straightforward. This is basically the QStringValidator model.
I have jQuery core but I'm new to it. How can I implement this? Thanks.
P.S. if the best solution lies outside of jQuery, IE support is not required.

if (this.value.match(this.getAttribute('data-regex1')) {
if (this.value.match(this.getAttribute('data-regex2')) {
do_whatever_for_full();
} else {
do_whatever_for_partial();
}
} else {
do_whatever_for_invalid();
}
Put your regexes into the element as custom attributes (data-regex1, data-regex2) then check the data as it changes (not sure how many events you want to check but you probably have to check with onkeydown ignoring enter and tab, or you could create a timer onfocus and just check every half second or so).

Passing HTML input form contents for calculation

I am trying to make a graph of a simple function y=k*x+b.
A user enters a function into the input field, for example:
1/3*x+3
and when he/she clicks the submit button, a JavaScript function is supposed to take this input value as an actual calculation sequence and assign a variable to it (I only need to get certain y values here, so the x variable has its limits):
for (x=1;x<=40;x++)
{
result = window.document.menu.inputFunction.value;
}
The above code doesn't work. No wonder why - I am just a beginner at this. However, is this really harder than it looks, or am I missing out something? I considered trying regular expressions for this at one point, but my head hurts by even thinking about using them.
Any ideas?

You could eval it:
result = eval(window.document.menu.inputFunction.value);
There are obviously some limitations to this approach:
The user must enter a valid javascript expression
The user must use x as variable name because that's what you are using in the loop
The code is vulnerable because the user can enter and execute any javascript expression he likes
For a more robust solution you might consider using a javascript mathematical expression evaluator.