If I write
<form wicket:id="form" id="form>
or even
<form wicket:id="form>...
Then the rendered HTML shows the id 'form' appended with different numbers whenever the page is refreshed e.g.
<form id="form7"....
Is there a way to disable this behavior of the Wicket framework?
We set markup ids by hand extensively on our project to ease automatic testing with Selenium testing framework. It definitely works.
Component.setOutputMarkupId(true); // write id attribute of element to html
Component.setMarkupId("someid"); // id attribute of element is "someid"
This is the behavior you want in most cases when using wicket. The dynamic id is meant to prevent id collisions when Ajax behaviors are added to components or added to ajax responses for refreshing. For any of these situations, you really need both the client response and the server side state to be in cahoots. If there are external js resources you need the id of a component for dom lookup, then I would suggest adding a custom wicket component behavior that would then generate the js call to a function passing in the generated id.
I realize what I'm going to describe leads you more into the forest of Wicket. But I have been more than happy with the ajaxy stuff that Wicket opens up for you out of the box.
This is Wicket desing feature. You can use class for linking styles and components.
<form wicket:id="form" id="form>
Also you can to try (I never did it) setMarkupId . I'm not sure that it good way.
It has been a while since I worked with Wicket, but I remember that when wicket uses ajax elements, its ids are auto-generated (the id of the tag, not the wicket:id). You can control the id of the tag when not using and ajax element. In your case, since there is no code, I would guess that you will have to change any AjaxButton or Ajax* from your form.
Yes you can write custom JavaScript... you just need to implement it according to the 'Wicket way'. You can decorate components, Ajax calls etc. with custom JavaScript, then it all plays nicely.
Related
For fast searching elements by Selenium, I think it must be a simple way to set some attributes to html-elements, for example: transform React Component Key to data-attribute (if it is possible).
Of course I can writing id or data-attributes to my span, div and whatever in my components, but I can't do it with components of 3d-party libraries - this components may haven't props like "id", and I will have to wrap this components and then find they by tag or class...
Or maybe is plugin for webpack to set data-attributes to elements with component's names.
However, how you find elements in your react app render?
I think it's not a good idea find elements by class or tags
key transform like this:
<MyComponent key="SuperComponent" />
...
<div data-attr="SuperComponent">...</div>
or autoset attributes of component name like this:
<MySuperComponent />
...
<div data-attr="MySuperComponent">...</div>
From "Test Automation through Selenium" perspective it hardly matters if the HTML consists of id or data-attributes. While working with Selenium tests are written with the help of any effective <tag> and the associated attributes. However there is a preferred list of Locator Strategies as follows:
How to find elements in react app render?
The AUT (Application Under Test) being ReactJS based of-coarse the element will be having dynamic attributes. Locator Strategies can also be dynamic. You can find an example usage of Dynamic Locator Strategies in the discussion How to locate a button with a dynamicID
Finally, while Test Automation the fast moving WebDriver instance will be needed to be synchronized with the lagging browser. You can find a relevant discussion in Do we have any generic funtion to check if page has completely loaded in Selenium
I have 3 web pages each page contains 1 bootstrap form. The forms are structured the same, but each has a different number of input fields and order in which they appear in the form.
The HTML page files, local JS files are all in the same folder(no sub-folders). The <head> on each page has the same assests.
The non-functional form has a text area and button that the other forms do not. I have tried commenting these out, but that didn't resolve the problem. I have tried removing the link to local CSS, that too made no difference in the issue.
When I check the html files with W3 validator I get one Error and 2 Warnings.
Error: Element legend not allowed as child of element form in this context.
Warning: The date input type is not supported in all browsers. Please be sure to test, and consider using a polyfill. Commenting out the legend makes no difference.
I do have a date field in both the working and non-working forms.
When I look at dev tools in Chrome I don't see any errors.
I have tested on both Chrome and FireFox, so I don't think it is a browser specific issue.
Note this is all done on local machine and all coded using notepadd++.
I know this would be a tremendous amount of code to post for review, but if required I will do so. I was hoping someone would have troubleshooting suggestion.
have created 2 jsbin. first link is page with non working form. Second link is page with working form. first link is https://jsbin.com/xuwuziy/edit?html,css,js,output . Second link is https://jsbin.com/luqatel/edit?html,css,js,output
In the first JSBin: $('#cruise1').bootstrapValidator(.... There's no element with id "cruise1" in the page. Instead your form's ID is "quoteForm". Therefore the validator does not bind to it because it can't find an element with the "cruise1" ID.
Since you're including the same validation JS on both pages, in order to get the same code to validate both forms, you have to use a selector that can match to both forms.
There are two possible, simple solutions.
1) Give both forms an id of "cruise1". However, this may not be very descriptive of your quote form.
2) Give both forms the same class, and use that as the selector to initialise the validator. e.g.:
The form tags:
<form class="form-horizontal validatableForm" id="quoteform">
and
<form class="form-horizontal validatableForm" id="cruise1">
And the validator intialisation:
$('.validatableForm').bootstrapValidator( //...etc
This will initialise the same validation on all forms which match the given selector (i.e. all forms with that class). In any one page, in your situation, you might only have one form loaded with that class, but it means it will work when the code is included in both pages, and if for any reason you had two forms with that class loaded in one page it would bind those as well.
One last note, since you mentioned you were new to this: I hope you are implementing the same validation rules in your server side code (the code which deals with the submitted form data). Client-side validation such as you've used is very nice for user experience, but it's not secure - any user, especially a malicious one, or an automated spam-bot, can easily manipulate or bypass the JavaScript validation (most simply, by just turning off JavaScript) and try to send invalid or problematic data to the server. You cannot trust anything which comes from the client-side and must re-validate everything in order to protect your application and database.
I am volunteering on a website-based project that is trying to make all pages fully operable JavaScript free before adding any JavaScript for enhancements, and I was asked to investigate whether or not a particular scenario could be handled purely through HTML/CSS.
What we have is a form that is populated to help us filter a list of tickets that are displayed on the screen after a page update through a GET action, which itself works fine, but the concern with the current implementation is that the URL cannot be made into a permanent link. The request, however, to keep the permanent link as minimal as possible, is to only send GET parameters for fields that are populated with something (so, suppressing GET parameters for fields that are blank) instead of having a different GET parameter for each form field on the page.
I have thought of several ways that could be done, most including JavaScript (example: create fields with ids but no names and a hidden field w/ name that uses JS to grab the data from the fields), but also one that would be a POST action with a redirect back to the GET with a human readable string that could be permanently used. The lead dev, however would prefer not to go through the POST/redirect method if at all possible.
That being said, I'm trying to make sure I cover all my bases and ask experts their thoughts on this before I strongly push for the POST/redirect solution: Is there a way using only HTML & CSS to directly suppress GET parameters of a form for fields that are blank without using a POST/redirect?
No, suppressing fields from being submitted in an HTML form with method of "GET" is not possible without using JavaScript, or instead submitting the form with a POST method and using a server side function to minimize the form.
What fields are submitted are defined by the HTML specification and HTML and CSS alone cannot modify this behavior and still have the browser be compliant with the standards.
No, you cannot programmatically suppress any default browser behavior without using some kind of client scripting language, like JavaScript.
As a side note, you say "JavaScript for enhancements", but JavaScript is not used for enhancements these days. And no one in the real world would except a decent front-end without the use of JavaScript. I would suggest you simply use JavaScript.
I do not think you can avoid Javascript here to pre process before submission to eliminate unchanged /empty form fields.
What happens when using SpringMVC and the Spring Tag library does not have the tags you require? What can the developer use that will allow automated databinding, does the developer now have to use the old way of doing databinding which involves using the http *request*, response to get and set form elements?
Can the developer add to the Spring-Form tags? I am confused on how to approach this since i am using tags form html5 and they do not exist in the Spring Tag library.
Can someone advise me on the best approach to handling a problem such as this. I have been asking questions on how does one use a **<canvas>** tag in SpringMVC so that it allows automated databinding like spring <form> tags.
You can still get the binding done by providing the name attribute value of canvas tag same as the name of the field in your pojo you want to bind the value with.
Eg. if your field name in pojo is myCanvas, then you can give the same name in name attribute of canvas tag. So that the binding gets done.
Hope this helps you. Cheers.
I read some AJAX-Form tutorial like this. The tag form is used in HTML code. However, I believed that it is not necessary. Since we send HTTP request through XmlHttpRequest, the sent data can be anything, not necessary input in form.
So, is there any reason to have form tag in HTML for AJAX application?
Apart from progressive enhancement as already discussed (don't make your site require JavaScript until it really has to), a <form> with onsubmit would be necessary to reliably catch an Enter keypress submission.
(Sure, you can try trapping keypresses on separate form fields, but it's fiddly, fragile and will never 100% reproduce the browser's native behaviour over what constitutes a form submission.)
Sometimes, web apps using ajax to transform their data either use forms as a fallback when the user has no JavaScript enabled (a sometimes expensive but very good thing to do).
Otherwise, if an application builds and sends an AJAX request, there is no compelling reason to use a form except in rare special cases when you actually need a form element. Off the top of my head:
when using jQuery's form serialize function
when monitoring all fields in a form for changes
when there is need to make use of the reset form button (that to my knowledge is available in a proper <form> only).
I see at least two possible reasons :
Graceful degradation (see also Unobtrusive JavaScript) : if a user doesn't have Javascript enabled in his browser, your website should still work, with plain-old HTML.
Behavior of the browser : users know what forms look like and how they behave (auto-completion, error-correction, ...) ; it's best not going too far away from that
And I would add that, if you want the user to input some data, that's why <form> and <input> tags exist ;-)
Using the right tags also helps users -- as an example, think about blind users who are navigating with some specific software : those software will probably have a specific behavior for forms an input fields.
It really depends what you're doing. If you're wanting to take form content submitted by the user and use AJAX to send that somewhere then you're going to want to use the form tag so your user can enter their data somewhere.
There will be other times when you're not sending data from a form and in that case, you wont have a form to be concerned about :)