calling validation on tab click ( jQuery-Validation-Engine ) - jquery-validation-engine

I have set up the jQuery-Validation-Engine addon (https://github.com/posabsolute/jQuery-Validation-Engine) and it works great on the submit button.
However, since i invoked a tab-based interface, it doesn't really bring the user back to the proper tab with the error fields.
As a work around, i've decided its better to validate each tab when leaving to the next one (as it is a step-wise tab) so that the button click at the end will only 'really' need to correct any errors on the currently displayed tab.
I'm using a simple anchor to call some div swaps (using negative margins for content off-page).
I'd like to invoke the validation method to this as well.
Documentation says it can only be attached to a form element.
Any ideas?
Update- i ditched the tab idea and am now using one big form so this no longer really applies.

No support led to going after a different approach. No longer needed.

Related

Click <span>? element or button without name or get submit to work

I've been poking around the internet at large cobbling together some VBA code to try to interact with some web pages (and eventually scrape).
I have some decent knowledge of VB and programming, but the internet end of things is pretty new to me, especially the syntax of commands, so I'm leveraging things from the internet.
I have one that's working,
http://snowload.atcouncil.org/
This I can fill in and get to submit with a
doc.getelementsbyId("coordinate_address").value = range("City").value _
& ", " & range("State").value
doc.getelementsbyId("btn-submit").click
then wait it out until readystate =4 , etc.
The one I can't get to work is here.
http://windspeed.atcouncil.org/
This one seems to use a object that I can't figure out how to click. It doesn't seem to have a name, and Id, etc.
If I use conventional 'submit' on the windspeed page, (loosely using that term), the page loads, but it comes out blank. Like I'm not using the syntax correctly, or not passing a variable/searchform somehow.
ie.document.all.item("submit").click
This 'works' but it produces a blank page with the east coast of africa and no data.
In the immediate/console of the browser, after I click, say, the Hawaii button, it works with document.searchform.submit()
If I try that in code, it doesn't work. (The Immediate window in the VBA editor thows me a "expected: =" error,
The object I am trying to click is in the web site code.....
<span>
<input type="submit" value="Get Windspeed" onclick="valbutton(searchform); return false;">
<span>
I've tried a lot of techniques poached from the internet, but no success yet. (looping over elements using getelementsbyclassname "span", but it either doesn't find the one with value ="Get Windspeed", or it doesn't find it at all.
somehow triggering the valbutton (that's a subroutine/function on the page) seems like a workaround... but VBA seems to want different syntax than the console on the web page and it's doing the same kind of "expected: =" syntax error when I try that approach.
I suspect normal submit would work, but I'm somehow not passing the filled out page and am sending a blank to the submit/get?
I also notice that if you are on the page, type in an address, and hit enter, it runs that "find" button I can't figure out (same thing, no name or ID obvious, it's a button....), and if you hit enter after it reloads, then it somehow by default hits that 'get windspeed' button, which suggests to me they are both submit buttons in a way.
Thanks for reading, I appreciate any thoughts on the matter. I am trying to get this to get all the data input and get the results without adding anything beyond VBA (i.e. jscript or vbscript or other things,)
-Brian
You should be able to simply submit the form after setting the .Value of the inputs.
doc.getelementsbyId("searchform").submit
I was able to adapt this (despite the claim this doesn't work in IE11..., maybe I'm not using 11...Is eleven Miscrosoft Edge?)
https://www.mrexcel.com/forum/excel-questions/344297-need-visual-basic-applications-code-execute-javascript.html
IE.Document.parentWindow.execScript "CheckAndSubmit(document.frmViewMyAcct);"
that allowed me to mimic hitting the button or hitting submit and somehow got around the 'no information / resulting page is blank' issue. The onclick event has a javascript routine attached to it, so I just copied that syntax.
Thanks for the help, it got me started on the solution.
Regards,
Brian

Have to push button twice to get partial refresh to work

Background: Xpage with multiple data sources. Each row of tabbed table contains an edit panel bound to a different data source than the main page. Each page contains a table to enter new documents. These documents are children of the main document. There is a view control that shows the user created documents immediately. The button in the table saves the document in addition to adding some control fields. It does a partial refresh of the editPanel.
Recently I added validation to the fields in the entry table. I use a function, and prevent updating from anything but the button. I am using Tommy Valand's method from this blog post: http://dontpanic82.blogspot.com/2010/03/xpages-making-validation-behave.html. If I don't use Tommy's method, then the validators fire when switching tabs, and are useless.
All of this works sort of, but I am experiencing the following issues.
1) I have to push the button twice to get the partial refresh to fire. Not only that, but the validation messages to not fire until the button is pushed twice. The first part was still an issue prior to adding the validation.
2) The table values do not clear after the refresh does happen. This used to work prior to adding the validation. The only way to get the values to clear now, is to do a full refresh (F5).
I really just need partial refresh to behave like it should. Any help is greatly appreciated.
I am answering my own question because I think that I might have found out why the partial refresh was acting so flaky. Here is what I did that solved my issues: Each tab had an editPanel. If I make the edit panel do a partial refresh to itself then the buttons on that panel seems to behave as you would expect them to.
When I create a new core control panel, the default in No submission. I do not know whether this issue manifests itself only when using multiple data sources and/or tabbed tables. Hopefully this fix will be of use to someone down the road. It is worth a try if you are having issues with partial refresh working correctly.

using tabbedPanels in a formTable

has anyone got an example of using tabbedPanel in a formTable ?
my form has alot of fields, I'm new to Xpages so just looking for a best practice.
thanks
I have a working example of the opposite - a tabbedPanel, each with a formTable inside with validation, and it works well when there are a lot of fields. Keep in mind that if you use the SSJS validation, whenever you click any tab, the current tab's validation will be triggered.
You can try a dojo tabContainer, with formTables inside, too, where if you switch tabs, no validation will be triggered. You may get js errors, if you set the focus to a field which is in a different tab. I'm not using a dojo tabContainer, because this project is for IE7 and I find it's very slow for this browser.

Can Popup page use DOM elements created in Background Page

Actually, I want to store some data in background page and the popup page just show that part of data say Data as a div element created in background page document.createElement("div"). Here, the background page will register some listeners to the tab update and change the Data elements accordingly. What the popup will do is to get that Data and appendit use the document.appendChild(Data).
(The purpose I intend is this will cause the popup changes immediately while the tab updage is triggered.)
However, the elements are shown as usual, what I am facing very headache is I have registered the onclick for the div object in backgroundpage as onclick="chrome.extension.getBackgroundPage().somefunc()". However, the first time, all the click will triger the right behavior but after the popup loses foucs and get focus again, all the click won't work.
I try to put something like change the onclick="somefunc()" and leave the func within the script of popup page. And there I want to log whether it is called by console.log("clicked"). Here, something unbelievable happens, the function is succefully trigerred BUT the console is null here, I cannot even call chrome.extension.getBackgroundPage() as well.
Here are a list of questions, maybe very hard to express for me...
1. Whether I can reuse the DOM element from the background page to the popup page directly by appendChild(chrome.extension.getBackgroundPage().getElementById()?
2.Will the onclick event registered in the background page still work in the popup pages?
3. What's the problem with the problem I am encountering? I have tried many ways to find out the reason but all in vain at last...
Best Regards,
If you need any more information, please let me know.
(PS: I am wonderning if it is called something like the event propogation, however, I am not an expert in this two pages communicating...)

How to click a strange link looks like button in watir

I want to use the Watir to click a link that looks like a button attached the image.
I use the following method,but doesn't works:
#browser.div(:id,"NetworkAnalysisTabPanel").div(:index,1).div(:index,1).ul(:index,1).li(:index,1).link(:index,2).click
Note:
#browser.div(:id,"NetworkAnalysisTabPanel").div(:index,1).div(:index,1).ul(:index,1).li(:index,1).link(:index,2).flash
is working fine but click is not working in IE and FF
Link looks like this:
And HMTL like this:
Note: I am able to click on the element using selenium IDE with clickAt method
Try this (not tested):
browser.link(:class => "x-tab-strip-menu").click
If you can flash the link, but click does not do what you want, see this: How to find out which JavaScript events fired?
FYI what you have are links that are using standard background images controlled via CSS magic that keys on the class of the link to know what background to set. That's where the image comes from, and why you don't see it as part of the link in the HTML.
In that control, each tab is a list item element (li) in an unordered list (ul), and each list item has an ID, so that's the easiest way to tell it which tab you are trying to click inside.
Try identifying things starting with the LI that is the tab container, as within that container there is only one instance of each link of a given class. Of the 4 links, only one is without any kind of easy identifier, and if you need to click that one you'd need to use :index, but for the other 3 links using :class ought to work. This should result in code that is less brittle and subject to being broken if the order of tabs changes, or the page is refactored.
#browser.li(:id,"NetworkAnalysisTabPanel__ext-comp-1038").link(:class, "x-tab-strip-menu").click
If the number at the end of the ID is subject to change, you can try a regular expression to match the part you can predict and is unique from the others
#browser.li(:id,/NetworkAnalysisTabPanel__ext-comp-/).link(:class, "x-tab-strip-menu").click
If you can reliably identify the object and use .flash but .click does not seem to do anything, you may have to use .fire_event('onclick') instead or .click.
#browser.li(:id,/NetworkAnalysisTabPanel__ext-comp-/).link(:class, "x-tab-strip-menu").fire_event('onclick')
If that does not work, then you need to start experimenting with likely events that the control might be looking for (which will not necessarily show up in the HTML btw.. it may be in javascript or CSS etc)
UPDATE
This is where having an live example of the control that we can interact with is critical. doing some googling on the class names I was able to find one here and that let me play with it a little, and what I discovered is that it is looking for onmousedown. so, on that site, this works
browser.li(:id, 'TabPanel1__ctl07').link(:class, 'x-tab-strip-menu').fire_event('onmousedown')
Now since those ID's may not be the best identifier, a bit more digging (using .text on the li that holds the tab parts) found me some text, which in a menu like that ought to be unique.. SO, we can change this to make things a bit more robust and clearer as to what tab I'm clicking on (this will also be less subject to breaking if the tabs change around.
browser.li(:text, 'Menu 1').link(:class, 'x-tab-strip-menu').fire_event('onmousedown')
Lastly, since the click is causing client side code to execute, you may need a brief pause (a one or two second sleep) to wait for that portion of the page to re-render etc.

Resources