How do I use javascript in Acrobat? - javascript

I am creating an Acrobat file with multiple pages. Each page has a map and a list of names down the side. Each name is a button and I have JavaScript entered for each, so that when you hover the mouse over the button, the corresponding name shows up at it's location on the map (via a text field), and then when you move your cursor away from the button, the text field disappears.
Here is the code I have for MouseEnter:
this.getField("Kyle Deal").display = display.visible;
Here is the code I have for MouseExit:
this.getField("Kyle Deal").display = display.hidden;
It works great if you stay on one page, but my problem is, is that when you hover the mouse over the button and the name appears and you move to a new page, and then come back, the text field is still there because the MouseExit never actually triggered when you were on the page the first time, no matter where your cursor is now. This happens way more often than it sounds like it might, pretty much every time someone uses this document at all.
Does anyone have an idea of how I can go about resolving this issue whether it be by a bit of JavaScript that clears all functions when you move to a new page, or maybe I can edit the MouseEnter function to go away after a certain period of time, or some other method inside Acrobat's settings?

One approach would need some field renaming (to make things easier). You would set all relevant fields to hidden when leaving the page.
Now with hierarchical field names, where the fields on page 2, for example, would have a name "p2.xxx", your command in the pageOut event would be
this.getField("p2").display = display.hidden ;
and that would do it.
Otherwise, you would have to hide field by field in the pageOut event.

Related

Using client side scripting to control an SAPUI5 app

So, we have an existing app, which I think is built on sapui5 if I am not mistaken. It's pretty much a simple search function app. I reviewed the DOM and noted that the search box form has the ID of #__xmlview0--searchField-F, and the search box container including all is under #__xmlview0--searchField and the actual text entry area is under #__xmlview0--searchField-I. Essentially, it looks something like this - highly simplified:
<div id = "__xmlview0--searchField">
<form id = "__xmlview0--searchField-F">
<input type = "search" id = "__xmlview0--searchField-I" />
<div id = "__xmlview0--searchField-search"></div>
</form>
</div>
There are two pages that I am interested in, one is the original start page for searching, and the other is the search page with results displayed, which also contains the same search box so that users can quickly perform another search. Lets call these start page and results page.
Since the app doesn't seem to take any QS for search strings, I was wanting to create a nested page where I can simply pass on the elements of searching into the app generated page, and display search results with one click, instead of having the users need to do them manually and transcribe things from one place to the search function.
I have attempted initially to simply change the value of the search box and then submit the search:
$("#__xmlview0--searchField-I").val("SOMETHING");
$("#__xmlview0--searchField-F").submit();
Such approach did not work. It appears that the submit will execute for the start page, but will not for the results page. But even with the start page where submit executed, the search text of "SOMETHING" has been lost for sure somehow. So I tried typing in text manually and only doing:
$("#__xmlview0--searchField-F").submit();
Which seems to show the submit button working (also only for start page, not for results page), though it appears that "SOMETHING" is still lost somehow even though I manually entered the text when executed in start page. Thinking something may be wrong with clicking the submit mechanism programatically, I tried only doing:
$("#__xmlview0--searchField-I").val("SOMETHING");
and then manually click the search execution icon (also tried pressing "enter"). But to my dismay, despite the DOM display the changes for the input search field properly, the search did not execute though the button blinked so I am sure I properly clicked it at least.
So I thought, maybe I need to trigger some kind of event before I start making changes to the search field to prompt proper event execution behind the scenes so that the input text will be recognized properly when changed:
$("#__xmlview0--searchField-I").focus();
$("#__xmlview0--searchField-I").val("SOMETHING");
$("#__xmlview0--searchField-I").focus();
$("#__xmlview0--searchField-F").submit();
But that did not work either. I am pulling my hairs out trying to figure out what may be going on. Can someone who knows the SAPUI5 stuff give me some insight? Am I doing something that is simply not possible under this environment?

Adding text into a PDF button with 1 click using Javascript

I'm creating a staff document which requires only 2 things to be unlocked.
1. A placeholder for an image, I've implemented that just fine by creating a button with "Icon only" and using a javascript code as follows:
// Mouse Up script to import a button icon
event.target.buttonImportIcon();
It works perfectly!
However I also need a text field which can be clicked once, and have text filled in and saved, because quite frankly the people that will be using the document, couldn't edit a PDF if the human race depended on it haha
Any help would be appreciated greatly!!! Thanks!
Create a text field (which I'm assuming you will want to start off as empty) and then add the following command to activate on Mouse Down:
(this.getField("TextFieldName")).value = "The text that you want to add...";
Where TextFieldName is the reference to the text field that you want to auto fill.
This will make the text appear when the text field is clicked. You could add a clear button using similar code so that erroneous clicks can be undone. Also, you could set the field to be read only to prevent unwanted changes to the auto filled text.

Getting field values from another form to perform validation on the web in lotus notes

I have a radio button field on a lotus notes form (say main form). If it is selected as "Yes", a link gets unhidden. On click of this link, another form opens up. If in the radio button, "Yes" is selected in the main form, the contents in the second form must be filled. So I need to write a validation if the radio button field is "yes" and the field inside the second form is not filled, then it should show a popup asking to fill the field in the second form. How do I get the value of the field in the second form on the main form for me to perform the validation?
You literally cannot do what you've described you want to do. The second (pop-up) form and its content no longer exist in the client (browser) context when you want to do validation on the first form's data. There are three possible ways to tackle the problem but only two of them are actually practical.
Let's dispense with the impractical method first. That would have the pop-up form write something back to its parent/opener, either as a JavaScript variable or as DOM content (a field outside of the Domino form or hidden element or some such) or, perhaps as a cookie value. Setting up the opener relationship reliably can be a problem cross-browser, but it is doable. The problem is that no matter how you do this, you have no guarantee that the value will be there when you need it (or expect it) except when the parent form is initially filled out. If the document is ever edited, you have no way of knowing whether or not the user has filled in the data on the pop-up. Anything you may have written to JS variables or the DOM during the initial session with the form only exist during the initial session. Cookies aren't permanent; they can be cleared by the user even if you try to give them eternal life via the expires value. No matter how you do it, you'd be telling anybody who has previously filled out the data you want that they need to fill it out again.
The second method would be to make a call back to the server to see if the pop-up form has been submitted and turned into a Notes document. That doesn't scale at all; even if everything is happening on a single server, there's no way to guarantee that the document you are looking for will have been written and indexed by the time you need it, and there is a time factor involved. If the user has already seen the validation nagging once, does what you tell them to do, and then gets the nag again, you're not making any friends.
The third method is to do everything you need to do on one form. (You can use CSS to do the pop-up if you're married to the pop-up idea.) And, you know, it really doesn't matter at all whether or not you would prefer to do it another way, it's the only way that will be reliable and make happy users. Yes, it will mean a little bit of extra work on your part. You're a developer - that's what you do for a living. You can even keep the structure of the existing application intact; WQO and WQS agents mean that you can glue documents together before sending them to your user, and pull them apart again before you save them. This is the only method that is guaranteed to be fast enough and reliable enough to be usable on the web.

How to scroll an HTML select box to an option without directly selecting that option?

My issue is that when the page is refreshed, I want the 'select' to be scrolled all the way to the top. However, if the user has scrolled the select box down to view the options (without necessarily even clicking on any of them) prior to the refresh, the 'select' box doesn't return to the top.
I've seen answers where people say to simply use selectedIndex to select the first option in the list, and thus it will automatically scroll to the top, but this is NOT an option. When the page is refreshed, nothing must be selected and thus, the only code I have at the moment is:
document.form1.componentselect.selectedIndex = -1;
Which is effective at clearing out any selections in the 'componentselect', but does not reset the scroll position.
FYI, I am using straight HTML and JS, no JQuery or anything like that. Thanks.
All you need to do is first select the top item (as you said you don't want to do), but then set it to -1!
document.form1.foo.selectedIndex=0;
document.form1.foo.selectedIndex=-1;
While I was looking at this, I also figured out how to have it remember what was selected, in case that becomes an issue:
http://jsfiddle.net/ryleyb/qPJ4S/
I think it's impossible to change the scroll position in traditional selects (select from the tag, no box generated by javascript plugins) because this box is controlled directly by the user's browser and theme, without direct interference by javascript.
I believe the only way to "reset" the display is to force the user to click on the field again, hiding and redisplaying the select tag. But you will need to click to open the box again and it hinders more than helps the user.

Advice about using Tabindex and javascript/jquery to make "tabbing" easier

I'm making a large and complex application and I need to set tabindexes to help user navigate through the pages. This is a private application so I don't have restriction about (ab)using javascript (jquery).
I currently have these questions.
1) How do you force with javascript (jquery) the browser to move the cursor inside a specific textbox as soon as a page has loaded? I noticed that often browsers don't automatically put the cursor inside the first tabindexed input. I want a surefire way that forces it there no matter what.
2) Some fields that activate ui enanchement (namely jquery ui datepicker) have problems with tabbing (like having to push tab two time to go away from it), is there any way to avoid this?
3) How do you read and set tabindex with jquery? I have some fields that get hidden/shown based on user action and they should be able to "give" their tabindex to other fields if they get hidden, is this a problem, does the browser still consider a tabindex after the page has loaded?
Thank you very muchh
To put focus on a specific textbox, do this (assuming textbox id is #firstBox): $('#firstBox').focus(); See more examples here: How do you automatically set the focus...
Not particularly because the DatePicker is also its own UI, so it has various objects within it that can be focused on (which is what tabbing picks up on).
Actually, now that I've thought about it, if you hide a field (AKA, "hidden") it will not have a tabindex and the other tabs will fall in line with what is defined for the browser (typically top to bottom, left to right order). You shouldn't have to worry about setting the tabindex manually.

Categories