When the user clicks this camera icon the get a snapshot of the page in a modal. If they click repeatedly it will make multiple snapshots before the modal has loaded and essentially blocked the camera icon.
Is there a way that I can say if a snapshot modal has just been created do not create another one?
events: {
'click .snapshot-camera' : 'clickCamera'
}
clickCamera: (event) ->
event.preventDefault()
#snapshot = new ******.Models.Snapshot({ user_id: ******.State.get('signInUser').id })
You can use underscore's debounce method which prevents double submissions.
// prevent double-click
$('button.my-button').on('click', _.debounce(function() {
console.log('clicked');
/* .. code to handle form submition .. */
}, 500, true);
Have a look into the below article
http://jules.boussekeyt.org/2012/backbonejs-tips-tricks.html
Related
I have a button(Material-UI) in my ReactJs application. Now, the scenario is when a user clicks(too many times thou!) and call an API to insert my form data there are multiple clicks triggering which tends to insert twice, thrice or n times(depends on user clicks).
So, I basically want a proper way to accept a single click(despite of user clicking a button n times).
Can anyone suggest me a proper way of doing it.
Note: I have tried out disabling and enbaling of button on click, as well as setTimeout to call API only on single click, but it does not work. Still on production I am having issues.
So I want a proper way for implementing single click on button (let user click multiple times the button)
Set a state variable on button click and disable the button based on the variable. So that the user will not be able to click again. And also, you can enable the button on API response.
example:
[disableButton, setDisableButton] = useState(false);
const submitFunction = () => {
setDisableButton(true);
apiCall().then(resp => {
setDisableButton(false) // enable button on api success response
// code on success response
})
.catch((error) => {
setDisableButton(false)
});
}
<button onClick={() => submitFunction()} disabled={disableButton}>Submit</button>
I need to access the new window which pops after a button is clicked.
I used cy.get('.app-card__content').click() to click on the button called Create a new plugin. After I click on the button the App is created on a new window and I do not know how to get the window and continue my test.
This new window URL is dynamic and every time anyone clicks on it the number which is App ID increases.
For example:
https://www.website.io/apps/app_name/standalone?id=DYNAMIC_ID_NUMBER
I was able to log into the website and create a new App, however, I don't know how to grab the new window with the URL.
I could not get this code to work:
describe('window open', function () {
beforeEach(function () {
cy.visit('/index.html', {
onBeforeLoad(win) {
cy.stub(win, 'open').as('windowOpen')
}
})
})
it('see window open being called with url', function () {
cy.get('#open-window').click()
cy.get('#windowOpen').should('be.calledWith', 'page1.html')
})
})
Here is the code I wrote:
// This test consists of Accessing Staging and Create a new App.
// Go to website.io.
describe('Staging Test v1', function(){
it('Accessing Staging', function(){
cy.visit('https://www.website.io')
cy.wait(2000)
})
// Get login button.
it('Get login button', function(){
cy.get('.signed-out-container > .signInTab').click()
cy.wait(2000)
})
// Fill out the modal and log in
it('Fill out the modal and log in', function(){
cy.get('#sign_in_email').type('user#website.io', {delay:110}).should('have.value', 'user#website.io')
cy.wait(1000)
cy.get('#new_sign_in_password').type('password', {delay:110}).should('have.value', 'password')
cy.wait(1000)
cy.get('#sign-in-submit').click()
cy.wait(6000)
})
// Click on new Create New Plugin button.
it('Click on create a new plugin button', function(){
cy.get('.dashboard-header__create-new-container > .button').should('be.visible').click({force:true})
cy.wait(2000)
})
// Search and create a new App
it('Search and create a new App', function(){
cy.get('.app-search__search-input').click({force:true}).type('App name', {force:true})
cy.wait(3000)
cy.get('.app-card__content').click()
cy.wait(10000)
})
// Grab the new window to continue the test
// Need to find out how to grab the new window passing along cookies and sessions to remain logged in.
// Develop part 2 of the test
})
I need to create a new App which pops on a new window, grab the new window and continue the rest of the test.
I also need to remain logged in on the new window as I need to save the App.
As far as I know, you can't handle more than one tab/window in a Cypress test. Just have a look at this part of the Documentation:
https://docs.cypress.io/guides/references/trade-offs.html#Multiple-tabs
When I faced this, I used the workarounds they offer for this, so you don't have the need to 'grab' other windows; If you can, go for this one:
// We can remove the offending attribute - target='_blank'
// that would normally open content in a new tab.
cy.get('.app-card__content').invoke('removeAttr', 'target').click()
Of course you can only use this if your element does have that attribute.
Have a look at this other solutions they provide for this topic: https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__tab-handling-links/cypress/integration/tab_handling_anchor_links_spec.js
I just solved a similar issue. Maybe you can use it as a reference.
In my case, the new window opens after clicking a button, and the url is dynamic.
cy.window().then(win => {
cy.stub(win, 'open').as('windowOpen');
});
// you can try exclude the 'should' below
// in my code it worked without this 'should' first
// after merging the latest changes this part failed somehow though no change was made here
// after investigation I found that the stub argument was not ready immediately
// so I added 'should' here to wait the argument load
// before visiting the url contained within it
cy.get('#windowOpen').should('be.calledWith', Cypress.sinon.match.string).then(stub => {
cy.visit(stub.args[0][0]);
stub.restore;
});
I have a PopOver page and I pass a string message to it, what I want is use this popover as a Tooltip for some elements on the page.
Example, on my page I have this:
<button ion-button icon-only clear (click)="shareThisCardByEmail(item)" (blur)="showTooltipShareByEmail($event)" >
Share
</button>
In this case I am associating the event "blur" (I am not sure what would be the best for this case) and I need when the view is loaded that event is shot and the popover is shown to the user.
On the component I have this:
showTooltipShareByEmail(event ? : any) {
let popover = this.popoverCtrl.create(PopoverTooltipPage, {
"message": 'This is a message on the tooltip popover about sharing by email'
});
let navOptions: any = {
animate: true,
ev: event
};
popover.present(navOptions);
}
How would I activate one specific event for an specific element on the page then the tooltip would be displayed?
I saw 2 questions but I'm trying to answer this:
I need when the view is loaded that event is shot and the popover is shown to the user
Check this out for the lifecycle events https://ionicframework.com/docs/api/navigation/NavController/.
You can call the popover when the view did load at here
ionViewDidLoad() {
console.log("I'm alive!");
// Right here
}
I need some direction in the following situation I have to solve:
I have a 'page' that have some fields that can be edit with 'save' button and with another button to 'navigate' to another place.
If the user edit some fields and click on the 'navigate' button before saving the data, the application should show and message something like:
Confirm Navigation
Button1 -> Leave this page Stay on this page
Button2 -> Stay on this page
I was think that I need some availability of pre-processing, before navigating to another place, Is there some availability in marionettejs before navigating in the AppRouter Or Router objects?, also I need to get some indication from the user, to which button he clicks.
You should have events set up for the buttons
Backbone.Marionette.ItemView.extend({
/* Removed other stuffs*/
events: {
'click #navigateBtn': function(e) {
/* Do your preprocessing in here */
}
}, //events
}
I'm using the rowEditing on my grid in my mvc application. I'm able to handle the event when the user clicks update. However i'm having issues get the selected record. The below behaves strangely. I do not get the record.data.Name value the first time i click update. Tho i can see the value in fire bug.
init: function () {
this.control({
'button[text=Update]': {
click: this.onMaterialUpdate
}
});
},
onLaunch: function () {
},
onMaterialUpdate: function (button) {
var grid = Ext.getCmp('materialsContainer');
var record= grid.getSelectionModel().getSelection()[0];
if (record != null) {
console.log(record.data.Name);
}
}
Not sure about it... but I think the click event happens before completeEdit, thus the record is neither committed, nor updated in the grid (or its selection).
Perhaps try to capture the edit event of the row editor instead of click? You should get the correct record there?
I'd suggested handle edit event of the RowEditor plugin. You could subscribe to this event on grid render event for example. By getting the plugin by pluginId.