There will be a message displayed"Ajax Request is Processing!" while one ajax form submit is is clicked and the process is in progress.
once the process is completed we will get another message "Form submitted Successfully!"
I am trying to check the progress message using Cypress.io but assertion always able get the final text only.
describe('Verify that Fe male is selected', function () {
it('clicks the link "type"', function () {
cy.visit('https://www.seleniumeasy.com/test/ajax-form-submit-demo.html')
cy.get('#title').type("MyTest Name").should('have.value', 'MyTest Name')
cy.get('#description').type("MyTest Description")
cy.get('#btn-submit').click().should('not.exist')
cy.get('#submit-control').should('have.text',"Ajax Request is Processing!")
cy.get('#submit-control').should('have.text',"Form submited Successfully!")
})
})
But this always fails showing assertion error
CypressError: Timed out retrying: expected '' to have text 'Ajax Request is Processing!', but the text was 'Form submited Successfully!'
How can we check this temporary message displayed while submit action is in progress.
Image attached
Try to use contains:
cy.contains("Ajax Request is Processing!")
cy.contains("Form submited Successfully!")
Related
I'm trying to test the submission of a form. However, when I submit the form and wait/check for an element the form navigates to an new/incorrect domain. Example:
Form URL: https://formsenv.test.co.uk/IdentityDocuments/Submission/Index
Page it tries it navigate to: (new url) https://sts.test.co.uk/IdentityDocuments/default/Thankyou
It looks like it's taking the base url from the browser url field (screenshot - had to redact some info)
Screenshot of runner
Quick code snippet:
cy.get('[id="submitButton"]').click()
//Commented out as this didn't help...I tried to wait for the request to see //if I was requesting the 'cy.get('[id="thankyou-details-panel"]')' element //too early
//cy.intercept({
//method: 'GET',
//url: '/IdentityDocuments/default/Thankyou',
//}).as('dataGetFirst');
// Wait for response.status to be 200
//cy.wait('#dataGetFirst').its('response.statusCode').should('equal', 200)
cy.get('[id="thankyou-details-panel"]').should('contain','Thank you for completing the ID verification / Right to Study form. You will be notified if there are any issues with the document(s) provided.')
any help would be appreciated. Thanks
i have a form where i need to see if an email address entered into the form is already in a database. this check needs to be performed conditionally based on the value of another field in the form.
here is the form field:
<input type="email" value="" class="form-control" name="email_bill" id="email" required data-parsley-type="email" data-parsley-registered="1" data-parsley-trigger="focusout submit">
and here's the validator code:
Parsley.addValidator('registered', {
validateString: function(value) {
if ($('input[name="d_type"]:checked').val() == 'S') {
return $.ajax({
type: "POST",
url: "/is_registered.html",
data: $('form').serialize()
});
} else {
var parent = $('#email').closest('div');
var this_id = $('#email').attr('data-parsley-id');
$(parent).removeClass('has-error').addClass('parsley-success');
$(this_id).remove();
return true;
}
},
messages: {en: "Someone has already registered with the Email address you entered"}
});
the server code is trivial and returns a '200 OK' header if the address isn't in the database and a '404 Not Found' if it is. that works.
i followed the example in the parsley.js custom validator example for the simple ajax request.
what happens is: if i enter a 'registered' address, i get the appropriate error message. if i then go and modify that address to one i know is NOT registered and tab or mouse out to the next field, the error message goes away, BUT the submit button doesn't work. to further complicate the situation, if i load and fill out a form with a 'non-registered' address, the submit button doesn't work either. it appears that execution of the custom validator disables submit upon entry.
i've played with this for hours, trying all sorts of event manipulation, but nothing works.
i should point out that if the checked value of d_type (see field definition above) is NOT 'S', then everything works as expected.
i am totally baffled as to why following the documentation results in failure.
as it turns out, this was not a problem with parsley at all.
a colleague created the form and the submit button had an id of "submit' which could not allow parsley to resolve the submit handler. under those circumstances, apparently parsley blocks the submit.
who knew?
well now, we know.....
I have a spring-boot application, with theyemleaf. I repeatedly update the page, and redirect it to the same page, so i expect that the elements of the page get updated:
#GetMapping("/suggested-events/vote/{eventId}")
public String voteForEvents(Model model,
#PathVariable("eventId") Long eventId,
#RequestParam(value = "message", required = false) String message ) {
log.info("The message is: "+message);
SuggestedEvent event = suggestedEventService.findSuggestedEventById(eventId);
ArrayList<SuggestedEvent> events = suggestedEventService.findSuggestedEventsByArea(event.getArea());
model.addAttribute("mainEvent",event);
model.addAttribute("events",events);
model.addAttribute("message",message);
return "/suggested-event/vote";
}
and when a button get pushed in the view it triggers the below post method:
#PostMapping("/suggested-events/vote")
public String voteForASuggestedEvent(RedirectAttributes redirectAttributes){
log.info("You have made a vote");
redirectAttributes.addAttribute("message", "Success");
return "redirect:/suggested-events/vote/1";
}
This second controller method, performs an operation an makes a message, and redirects it to the first method. So, it successfully redirected to the first method and it logs
log.info("The message is: "+message);
but it does not refresh my page, and i do not get the message as model?
When i redirect to the first method, i expect it adds the message to my models:
model.addAttribute("message",message);
But it does not added to my page
and when a button get pushed in the view it triggers the below post
method:
It sounds like this trigger is using AJAX, rather than a form submit. Doing so would match the symptoms you describe.
If you POST to /suggested-events/vote using AJAX, the server will return a 302, and the browser will follow it. However, the response for that 302 is still the result of an AJAX call. You have access to it in your success callback, but the browser isn't going to render it for you.
but it does not refresh my page
If a 302 doesn't cause your page to re-render, this also suggests you're using AJAX.
If you actually use a form submit instead, the browser will re-render using the markup returned by the successful redirect.
This can be verified by using the following two buttons in your vote.html:
<form action="http://localhost:8080/suggested-events/vote" method="POST">
<input type="submit" text="Submit" />
</form>
<button onclick="postmessage();" >Button</button>
<script>
function postmessage() {
$.ajax({
method: 'POST',
data: {},
url: 'http://localhost:8080/suggested-events/vote'
});
}
</script>
The first button will work as expected, and the second button matches the symptoms you describe.
If you are already using a form, please update the question with it (or better yet, the entire Thymeleaf template).
I had the same problem as OP described and Mike's explanation brought me in the right direction.
I am reading a db-table and populating it with thymeleaf using th:each. I wanted to add a javascript-confirmation before deleting an item. Sending an ajax GET without an event-listener and reloading with location.reload(true) didn't reach the #GetMapping("/delete/{id}") in the controller.
This SO-thread gave me the answer to the ajax-call.
<a class="btn btn-danger" href="#" th:onclick="|confirmDeletion('${u.id}')|"></a>
<script th:inline="javascript">
function confirmDeletion(id) {
if (confirm("Delete this id? " + id)) {
var http = new XMLHttpRequest();
http.open("GET", "/delete/" + id, true);
http.addEventListener("readystatechange", function() {
if (http.readyState === 4 && http.status === 200) {
window.location.reload(true);
}
});
http.send();
}
}
</script>
there are many ways to redirect page in Spring, but be sure if the model attribute off message its passing correctly to FrontEnd or passing like parameter to another handler , you can see this document : http://javainsimpleway.com/spring-mvc-redirecting-model-attributes-from-one-controller-to-other-controller/ , hope this is useful !!
I embedded the x-editable:
in the html:
<a class='doc_title editable' id='doc_title_12345' data-name="doc[title]" data-title="Enter doc title" data-type="text" data-url='/docs/12345' href='#doc_title_12345'>My Document<a>
in the js:
// turn to inline mode
$.fn.editable.defaults.mode = 'inline';
// turn on editable on title
$('.doc_title.editable').editable();
I can edit in browser, but when I click on save nothing happens (I mean I see the new value, but it does not send via AJAX request to the server)
What could be wrong?
As here mentioned it is required to add the always parameter:
$('.username').editable({
send: 'always'
});
I didn't find it in the documentation (in the Getting started)
Similar to this question, I'm wanting to run a function when an ajax form is successfully submitted, but I don't have direct access to the initial ajax code that loads the form.
How would I check that the form was successful given that I can't add code to the initial ajax success call?
$('#registration-form').submit( function() {
alert('registered successfully');
});
try binding .ajaxSuccess() to your element http://api.jquery.com/ajaxSuccess/
$('#registration-form').ajaxSuccess(function() {
alert('registered successfully');
});
Whenever an Ajax request completes successfully, jQuery triggers the ajaxSuccess event. Any and all handlers that have been registered with the .ajaxSuccess() method are executed at this time.
You could try to use the ajaxSucess() global ajax event handler:
$(document).ajaxSuccess(function() {
alert('registered successfully');
});