I would like to make the save button disable if a valid geometry is turned into an invalid one. I've been trying but still not working. Any suggestions please? thx.
<Button
variant="text"
color="primary"
disabled={disableSaving || !isDAItemUpdated || !!error Object.keys(deliveryAreaErrors).length > 0}
onClick={() => handleSave(daid, deliveryarea.get('attributes'))}> Save
</Button>
Related
I need help to solve this issue. I'm new at next js ... and every time I refresh my page i get the error "Too many requests, please try again later". This also happens if I click the button too many times. Any one has any Idea how to solve this. Thanks that will be a great help.
using the boiler plate: #pankod/next-boilerplate.
function believe(): void {
router.push('/user/believe');
}
<button type="submit" className="btn btn--believe color-white w-100 font-14" onClick={believe}>
Believe
</button>
P.S I'm just a newbie
Try change onClick={believe} to:
onClick={() => believe()}
or
onClick={() => { believe() }}
I am having trouble using Cypress.
There are 2 problems I'm currently having.
A form with preventDefault is being submitted and the page is refreshing.
I have to .click() and input before I can .type() into it.
--
I have a form that has preventDefault, and you can see from the test that it submites the form, which adds a empty query string to the url, and none of my error handling messages are shown. This doesn't actually happen when I use the app myself.
it('requires email', () => {
cy.visit('/sign-in')
cy.get('form').contains('Sign in').click()
cy.get('.errors').should('contain', 'Email is required.')
})
I am using Svelte/Sapper as my front-end.
Form:
<form on:submit|preventDefault={handleSubmit}>
<Input label="Email" type="email" bind:value={email} />
<Input label="Password" type="password" bind:value={password} />
<Button text="Sign in" />
</form>
The second issue is that I have to .click() and input in my test before I can .type() into it.
I have to do this:
cy.get('#email').click().type('user#example.com{enter}')
Instead of this:
cy.get('#email').type('user#example.com{enter}')
I am not sure why this is happening. If I don't click the field, it says the field may have the attribute disabled, which it doesn't. When I test it myself, I don't see any issues, and the dom snapshots in Cypress don't reveal anything unusual.
Perhaps it has to do with autofill?
Has anyone run into these problems?
The issue with Sapper is that it is SSR, so the app was not hydrated before Cypress started running tests, which was causing a whole bunch of issues.
The solution was to tell Cypress to wait until the app was hydrated. This was accomplished by setting an attribute in the return to the promise from sapper.start and then overwriting the Cypress visit command.
client.js:
sapper.start({
target: document.querySelector("#app"),
}).then(() => {
document.body.setAttribute('hydrated', '')
})
Cypress commands:
Cypress.Commands.overwrite('visit', (orig, url, options) => {
orig(url, options)
cy.get('body[hydrated]').should('have.length', 1)
})
Now everything works and tests are passing.
I am working on a page that has several sections. One of them is a form, which sends a POST request. After the form is successfully sent, I would like to update a CSS style on another element to make it visible.
Since the submit event is happening server-side (using node.js), how can I have this file communicate with the CSS/HTML? I don't want to send a whole new page, just slightly update the one that's already displayed.
app.post("/section-2", function(req, res) {
console.log(req.body);
authorizeAndExecute(findOpenDataRow);
res.send("<style>.section-2-next{visibility:visible}</style>")
});
The example above shows something I've tried, but it is just clearing the whole page. I also tried jQuery, but the server is obviously not connected to the HTML in the way a regular js file is.
EDIT: Here is some of the HTML that involves the form, and the element that I'd like to update the style of.
<form action="/section-2" method="POST">
<button type="submit" class="btn btn-primary btn-lg section-2-submit">Submit</button>
<button class="btn btn-success section-2-next" type="button" name="button">Continue</button>
</form>
You should use ajax on the client side in order to apply your style when the POST is done.
If you use jQuery, the syntax would be :
$('.my-form').submit((e) => { // Will be triggered when submit input is clicked
e.preventDefault(); // Prevent page redirection
$.post('/section-2', { param1: value1, ... }) // do POST with query parameters
.done((res) => { // on response from POST
$('.section-2-next').css('visibility', 'visible'); // Update your style
})
})
Is it possible to turn off pointer-events on disabled Routerbuttons? My state on the Route is set to disabled due to some criterias not fulfilled that early, but it's still possible to point on it and click, even tho its not doing anything than trigger a message. Do I need to add css class on the route? Was hoping I didn't need to do that.
<Route
disabled={saving || ableToWork === false}
requiresValidation
key={`${match.url}/receipt`}
label={formatMessage(GeneralMessages.verify)}
loc={`${match.url}/receipt`}
path={`${match.path}receipt`}
render={() => (
<Receipt
{...rest}
match={match}
onCancel={this.onCancel}
onBack={this.handleOnBack}
/>
)}
/>,
Yes you have to use CSS for this.
The Route component doesn't handle this : docs
please it's possible add to contact form 7 in WordPress button for removing of uploaded file?
add button for removing file
Thanks a lot.
Kind regards,
Jan
if I understand you question correctly, you want to be able to cancel/reset a file selection on an <input type="file" /> field prior to submitting the form. If this is what you want, the short answer is no, there isn't any cf7 tags to do this, nor is there any plugin extension to do this either (that I yet know of:). You will need to implement it yourself in your form using some custom javascript.
To upload custom javascript to a contact form 7 you can refer to this answer.
To reset a file input field, you can refer to this answer.
I hope this helps you.
We can easily achieve with simple jquery click function.
This is our file upload html, So we can write a click function
<input type="file" name="file-711" size="40" class="wpcf7-form-control wpcf7-file" id="imgupload" accept=".png,.jpg,.jpeg,.pdf,.doc,.docx" aria-invalid="false">
Jquery
$(document).ready(function () {
$('#imgupload').change( function(event) {
var len = $('.img-remove').length;
if(len < 1){
$('.fileupload-wrp').append('<a class="img-remove" id="remvImg" style="" onclick="removeimg()" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Remove Image"><i class="fa fa-trash"></i></a>');
}
});
}); //imgupload is the file upload id
For each and every upload I append remove button
Remove click event
function removeimg(){
if(confirm("Are you sure you want to delete this?")){
$('#imgupload').val('');
$("#remvImg").remove();
}
}