I have a horribly coded set of controllers which I am unable to refactor at this time. I need to bring them under automated testing, but have run into an issue with the UIAutomation tool.
These controllers are dynamically generated. There were many ways to do this but somebody decided it would be best if they made a tableview containing cells which each contain more tableviews, containing the cells that the user will see and interact with.
A simple example of one of these controllers is as follows:
I need to press one of those table view cells automagically.
After struggling with some view hierarchy issues, I finally managed to get the logElementTree to see all of the cells, with correct accessibility identifiers. Here is the result:
Now just to test that I can press one of the buttons from a script...
NOPE. I can't seem to drill down into the elements even though the logTree clearly shows they exist and are visible.
Any ideas very welcome. I'm not very experienced with javascript so I could be missing something obvious. Thanks!
To answer my own question and thanks to a helpful engineer at the WWDC:
target.frontMostApp().mainWindow().tableViews()[0].cells()[0].tableViews()[0].cells()["Open"].tap();
Related
Hi folks I am building a CRUD system very similar to this example http://jsfiddle.net/rniemeyer/WpnTU/.
Context:
I have several HTML pages that each contain the same table of data but showing different information (each page have their diffirent use).
On each row theres an edit button like yuo see in the example. Since the modal form is the same accross all the HTML pages I decided to create one HTML page containing the modal form. I then use jquerys load function like so $("#load_modal").load("pages/modal_form.html"); on each of the HTML pages.
Problem:
On a basic HTML page this is working out great. I tought this was a brilliant approach and gave myself a pat on the back. But now the problem I have is that when started implementing knockout it dosent seems to be working together very well. Modal dosent always pop up correctly and such.
My question:
At this point im not looking to figure out my code issue. I spent days and weeks staring at it and I came to the conclusion that I need to rethink my approach altogether. Im curios to hear some of your opnions on what would be the best aproach to tackle something like this.
Ideas so far:
I found this https://github.com/rniemeyer/knockout-amd-helpers/tree/master/examples But dosent use the latest knockout version and seems more complicated for something simple I need.
I also saw that using requireJS would be another idea but honestly these seem to complicate things for me.
Would anyone know of a simpler template solution or even have a whole different approach to this?
Using jQuery to modify your DOM is not going to work well in Knockout. You can use components to define the form HTML. Use an observable to switch which component is displayed.
Cheers, everybody!
I'm generating an HTML table dynamically using JS, and placing it into a 'div' element in another page. It's sort of OK, a few amendments, but I get the table output, better than i would expect.
Nevertheless, the problem is that my destination page where the 'div' element is placed, doesn't get updated, it stays blank like there was nothing there when in fact there should be, since i'm setting it, and otherwise where does the table come from in the page, right? Seems awkward to me. I see a table, but there's no correspondent html code for it in the page.
Specially because i need to take a look in detail to fix the issues in my table layout.
Now, I'm pretty sure this is a very naive question, beginner's, and if I only knew it enough, I would understand what's going on, but at the moment, it's totally impossible for me to stop to take a deeper look at this, lots of stuff.
I really could use some contribution, like a fast and elucidative answer, sort of what do i do to view the table html, where is it 'hiding'? Preferentially.
But as much important as it, a few 'read this' or 'read that', if you don't mind, because at this stage, You know, bump into an obstacle every two steps.
Anyway,thanks in advance! I would appreciate any help!
Page source only displays static content received from the server. To see the dynamic content added by your JS code you need to use the developer tools of the browser.
Easiest way to do this is to right click on the table and select 'Inspect Element' to see the generated HTML for your table.
I am displaying a list with a lot of data and it is getting very slow very fast (>5 entries = too slow). I tinkered around a little bit and found that not the amount of data is the problem but the many DOM elements that are generated.
I show a table with just some meta information. For each table row there are two more hidden table rows that include all the detail data and an edit form. Clicking on a row opens the detail info and clicking on some edit button switches to the edit row.
A simplified plunkr without the edit portion is available here.
The problem is that for each entry there are three rows generated that include a ton of tags and data. Pagination is no solution since the problem already manifests itself in a significant way with as few as 4 or 5 entries. I could load the detail data dynamically but I found that the bottleneck are the many tags that ng-repeat has to create. (Am I mistaken here?)
When I cut out the detail and edit portion the page loads reasonably fast even with 10+ entries.
A solution could be to write the detail and edit part once and hide it and then dynamically shift it around to the according entry. I know that direct DOM manipulation is frowned upon in Angular. Is there a better solution? A plunkr that illustrates the idea
I looked into angular.element and updated the second plunkr with the solution. I am still not sure if there is not a more elegant solution. I will implement it and see if the performance issues are resolved by it.
Moving of the DOM part:
<td id="detailPiece">
Reuse this piece of DOM? Can it be done?<br />
Tons of detail information, with edit capability etc.<br />
{{detailItem.detail}}
</td>
is achieved by
angular.element('#detail'+index).append( angular.element('#detailPiece') );
Still looks like a 'hacky' solution to me with the empty table row and all.
I am coding some sort of booking system - calendar. One of the features is also a (js) pop up window with detailed information about event - user can either view them or edit.
Now my problem - I have put there a HTML select control (dropdown box), quite simple - 5 options. But somehow, and I have no ide why, this select is uneditable - that means that after I click on it nothing happens (I do not get the list of the options).
I know that now I should put a code here, however, whole system is so complex that it would take me ages.
I do not await exact answer or solution of my problem. I would like to ask you for advice - what would you check? I went through CSS up and down - no clue at all. Maybe some javascript? But how? I do use one public js library, so it might be something there, I checked as well, no clue.
Any advice would be much appreciated. I am stuck now... :-(
Thanks a lot!
Peter
::EDIT::
I have found out what is was! The ID if that pop-up window is bbit-cal-buddle and there is this line in the .js:
$("#bbit-cal-buddle").mousedown(function(e) { return false });
which basically explains why I can't select anything in dropdown (funny thing - checkboxes and radio works!). So my question is: how do I exclude my select and option tag from that .js command?
I've found a useful option when the bug is that obscure is to logarithmically comment your code.
That is,
Comment 100% of the code that might be causing a problem.
Test
If it works, uncomment 50% of the code you commented and go to step #2.
If it doesn't work, you know the problem exists in the code you uncommented.
Yes, this is somewhat of a monolothic technique, but I've found it to be very useful in the past.
Regards,
-Doug
Just to be sure, turn off ALL styles. this will render your page without the styles(obviously) and check if you can click the drop down. If you can, it is 98% a CSS error. It happened to me awhile ago - most probably an absolutely positioned div is covering it.
If you still can't click it, bring back the CSS then disable all javascripts. It should still be clickable by then since and html select tag doesnt need JS to be clickable.
If it still doesn't work, try doing a regular html select tag and check if you can select that one. If you can, then there is something wrong with your select tag
I'm looking for a "tree of checkboxes" widget for Javascript. I tried to use jquery-checktree which purports to do exactly what I want, however it has the following problems:
It doesn't recognize checkboxes that are already checked and renders everything as unchecked.
It starts off with everything collapsed and doesn't give an option to start with everything uncollapsed
Each line of my tree starts indented from the line above, even if they are <li> in the same <ul>.
Can anybody recommend one that works, or fixes for this one?
You could try the YUI TreeView. They have an example with checkboxes. It might not be ideal for all uses, but it's pretty good.
ExtJS 3.x has one. I have not used it, but it looks nice. Not sure if you're willing to add ExtJS to your stack...
Another option is jstree which is based on jquery also.
I ended up making a few fixes to jquery-checktree and using it. Some of the changes are probably broadly applicable and I emailed them to the developer, and others are probably only useful to my project.