which click event is best in ionic HTML page?
I had developed ionic 1 framework. I had used ng-click and on-touch on the HTML page.
ng-click code:
<ion-floating-button ng-click ="vm.addExpense()" has-footer="false" icon="ion-plus" iconColor="#fff">
on-touch code:
<ion-floating-button on-touch="vm.addnewCharge()" has-footer="false" button-color="rgb(84, 44, 99)" icon="ion-plus" iconColor="#fff">
The difference according to the docs is that on-touch fires immediately on touch and does not wait for the release event.
Called immediately when the user first begins a touch. This gesture
does not wait for a touchend/mouseup.
Here's a reference to the docs:
http://ionicn.com/docs/nightly/api/directive/onTouch/
ng-click is definitely the best choice.
ng-click is the way to go with ionic and it will take care of the touch/click 300ms-delay. The Ionic devs have put a lot of work in this to be so simple.
So no need to use the external module ngTouch
http://ionicframework.com/blog/ionic-huge-update/431 -- see the paragraph with Adamclick!
Related
I have a SPA say https://www.example.com. And one of the sub-pages https://www.example.com/foo can be added as a PWA. On navigating to /foo from the homepage, the manifest and service-worker get installed and registered correctly and the PWA can be installed from the A2HS native buttons too, but the event beforeinstallprompt isn't called on chrome. If the page /foo is refreshed then the event is called. It's only when the navigation happens to it from another page that isn't in the scope of the PWA. The lighthouse audit passes all tests on /foo as well.
Has anyone tried creating multiple PWAs on a SPA, or encountered a similar issue?
I don't think this is a good solution, but this is how I got around it on my Gatsby.js site:
On every page (even those where I don't have the "Add to Homepage" custom trigger), I listen for the beforeinstallprompt event.
I set up a listener for a custom event on the <html> element on the pages that have my "Add to Homepage" custom trigger.
When beforeinstallprompt fires, I stash a reference to the event on the <html> tag (this does not get swapped out in between pages for my SPA) using jQuery's $.data() - I couldn't get vanilla JavaScript dataset to work but I may have been using it wrong, and I had jQuery loaded in anyway.
In the beforeinstallprompt handler, after setting the data, I fire the custom event on the <html> element.
The page that has the "Add to Homepage" custom trigger catches this custom event, grabs the reference to the beforeinstallprompt event from the $( 'html ').data( 'event' ) and carries on with it as normal.
Hopefully that helps; it feels pretty hacky but I'm pretty new to PWAs / SPAs / React!
I'm using nvd3-multi-bar-horizontal Polymer tag element for Graph plotting.
I could not find any option or attribute to add action like onclick on a bar.
Can anyone suggest any option? I know that it can be done using native nvd3 library. but as its a Polymer project, I have to use this Polymer component.
I've updated nvd3-elements to bind all NVD3 events. Please use v0.21.0. You could create listeners for all NVD3 events. Please check NVD3 documentation for events list of each chart.
I'm working on getting some acceptance tests to work with Capybara. The main parts of the application leverage Polymer. There are some key parts of the application that require the test to wait for the Polymer library and the application code to load. Is there a Polymer centric way to wait for Polymer and the application to load. I currently am using sleep statements, but this is really bloating the test run times.
I think you should listen to the WebComponentsReady event, it's fired when all the Polymer elements are loaded.
https://github.com/webcomponents/webcomponentsjs#webcomponentsready
It appears that polymers FOUC prevention uses an 'unresolved' attribute on the body, that gets removed once polymer has finished initializing the elements. If you have put that attribute on the body then
expect(page).not_to have_selector('body[unresolved]')
would wait for polymer to finish loading
Another way would be to add a listener for the WebComponentsReady event to your code that sets a data-attribute on the body element when fired and then have Capybara find for the body with that attribute.
I want to develop a fullcalendar based web, and all goes well until I met this question, I use a jQuery dialog when fullcalendar day click,and I plan to use updatepanel to make my dropdownlist linkage in jQuery dialog. But I found the OnSelectedIndexChanged function never triggered. I found when I add this code style="display:block"on the <div>, all code works well, when I use the jQuery dialog, the updatepanel never triggers the OnSelectedIndexChanged function.
So, is it means that I cannot use the updatepanel in the jQuery dialog?
I try to use the perl script to automate the interaction with a website.
I use module WWW::Mechanize to realize my design. But I cannot perform the button click in my perl script by using command as below.
$mech->click( $button [, $x, $y] )
$mech->click_button( ... )
It is because this button does not belongs to any form and without name, I can not call or locate this button in my perl script. How can I make it possible to click this button in my perl script like I interact with browser? Thank you.
<button class="button transactional" id="checkout-now"><span>Check Out Now</span></button>
If button does not belong to any form it should have onclick event defined, like #Bilzac and #hijack mentioned. In this case you are not able to reproduce browser's behavior because WWW::Mechanize does only html analysis.
Dealing with JavaScript events it's more easy to implement browser's network activity rather then implementing whole JavaScript events and DOM interaction.
Well sometimes all you need is $mech->post() because it's harder to find what going on with JavaScript when you click some element.
So you need to find what request is performed when you click this button (you may use Firefox HttpFox for this) and after that construct same request using WWW::Mechanize:
$mech->post($request_url, Content => {FORM_FIELDS...});
You can add onclick event on this button. like this:
<button onlick="alert('hello');">Click Me</button>
Clicking the button in a browser only runs a piece of JavaScript. You can't do that in WWW::Mechanize, because it has no JavaScript support.
What you could do, however, is find the JavaScript code that's being run when the button is clicked and write some Perl code to do the same thing. Unfortunately, it can sometimes be hard to find which JavaScript event handlers apply to an element. Even the otherwise excellent Firebug doesn't seem to have any simple way to list all event handlers associated with an element. (There does exist an Eventbug extension, but at a glance it doesn't seem to work very well.) The Visual Event bookmarklet might also be worth trying.
I am not 100% sure what you are asking for, but I am going to swing at it.
You do not need the button to be part of a form for any sort of interactivity. You can do this with just JavaScript & HTML.
$('#checkout-now').click( function() {
alert('Hello!');
//Do other stuff here, regarding the form! (Call Perl scripts etc.)
});
http://jsfiddle.net/fCdxR/1/
Quick example of how it works!
Hope this solves your problem.