Safari Ajax bug? checked radio not checked - ajax

In Safari, If I load a piece of html via XHR (ajax) the browser does not render the radio button that has the checked="checked" attribute as checked.
the html I fetch via ajax:
<input type="radio" name="radiotest" value="off">
<input type="radio" name="radiotest" value="on" checked="checked">
the browser renders two unchecked radio buttons. If I load the exact same code directly from a plain html file (no ajax) the radio buttons render as they should, the last being in its checked state.
what's wrong, is this a known bug? Is there a fix available?
EDIT:
Probing further this looks like a browser bug, and I could not so far fix it with jQuery Post processing, any help appreciated.. here is what I've found:
I have a page that pulls in some form element via ajax.
The html is this:
<input type="checkbox" name="checktest">
<input type="checkbox" name="checktest" checked="checked">
<input type="radio" name="radiotest" value="off">
<input type="radio" name="radiotest" value="on" checked="checked">
after the form element are pulled in, the checkboxed render correct, but the radios both render unckecked. Now, If i run the following jQuery command (from the Safari 5 console):
$('#activemodules input[checked="checked"]');
..it returns an object containing the one checked checkbox.
but if I run the command:
$('#activemodules input[value="on"]');
it actually retuns the correct object, and it even shows its outerHTML property correct like this:
outerHTML: "<input type="radio" name="radiotest" value="on" checked="checked">"
now, if I do:
$('#activemodules input[value="on"]').attr('checked','checked');
Safari get's it, and renders it correctly. I guess I'll just have to pass a data-ischecked="true" attribute and use that to catch and 're-check' all radio buttons after the ajax bit is loaded.. but still, even if I can do this, I'd like to hear any comment or suggestions on this.

This is what my solutions ended like:
First I add a data-ischecked="1" attribute to the radios that are checked:
<input type="radio" name="foo" data-ischecked="1" value="bar" checked="checked">
then, after the ajax call succeeds and finishes I run this:
$('#myradios :radio')
.each(function(){
if( $(this).data('ischecked') ){
$(this).attr('checked','checked');
$(this).removeAttr('data-ischecked');
}
});
This seems to work fine.. but I found out some other stuff of importance:
If I called the data attribute simply data-checked instead of data-ischecked it DID NOT WORK, maybe this is a reserved name?
And also; if I ran the operation on the broader selector scope:
$(':radio')
.each ...
then it also DID NOT WORK
I don't know why, but adding the id of a parent element of the radios that was also part of the html returned by the ajax call to the selecor scope like this:
$('#myradios :radio')
made it work..

I found that mikkelbreum's solution only worked if I did not include the "checked" attribute in the AJAX-injected code.
<input type="radio" name="foo" data-ischecked="1" value="bar">

Related

parsley.js 'fails' when trying to validate checkbox

We are re-designing a site and part of that re-design involves making the site accessible to screen readers and the like. I'm using latest version (2.8.0). Here's what's happening --- validation for all text, select and textarea fields in our forms work perfectly. In order to be accessible, checkbox and radio inputs are wrapped in tags. The html for a set of checkboxes looks like this:
<div class="form-group">
<p id="applicant_type_desc" style="margin-bottom: 6px;"><strong>I am: <span class="text-danger" aria-hidden="true">*</span><span class="sr-only">Required</span></strong> <em class="small">(check all that apply)</em></p>
<div class="checkbox">
<label id="applicant_type_patient_desc">
<input type="hidden" name="applicant_type_patient" id="" value="N">
<input type="checkbox" name="applicant_type_patient" id="applicant_type_patient" value="Y" {checked_applicant_type_patient} aria-labelledby="applicant_type_desc applicant_type_patient_desc" data-parsley-multiple="type" data-parsley-error-message="Please specify whether you are a patient, relative, employee or other.">
A patient
</label>
</div>
followed by more checkbox divs without error messages and ended with an end div for the for form-group wrapper.
If I load the form and click 'submit', all the text fields are validated properly. If I add 'required' to the checkbox above, when 'submit' is clicked nothing happens and the form is submitted with no validation at all.
The same thing happens when I try to validate a radio button set as required.
There is some custom jQuery and parsley code which creates a div to hold all the error messages and transforms the error messages into links to the field id so that a screen reader can follow them and focus on the field in error. But imho, this should have no effect on why the form validation doesn't kick in.
I'm absolutely baffled.
FYI - I tried this using an earlier version (2.0.3) of parsley and the validation actually worked, although all my custom error processing was ignored.
Any insight would be greatly appreciated.
As it turns out, parsley handles the errorswrapper element differently for text, textarea and selects then it does for checkboxes and radio buttons.
The starting wrapper element for text, textarea and select contains the parsley-data-id attribute whereas checkbox and radio button elements contain the parsley-data-multiple attribute whether that was generated by parsley or entered manually in the html.
My code was looking for parsley-data-id and, of course the jquery selector failed and generated an error. A colleague was able to spot this for me while we were looking at the page in chrome inspector. Once i saw the error, making a simple adjustment to the form:error event function allowed everything to work.

Can't access checkbox with watir

When I'm trying to click checkbox I getting an error
browser.checkbox(:id, 'AgreeToProceedWithPersonalData').click
Element is not clickable at point (314.5, 448). Other element would receive the click: <label for="AgreeToProceedWithPersonalData"></label>
And when I click at element below I getting agreement page opened.
browser.label(:for, 'AgreeToProceedWithPersonalData').click
How do I can set checkbox and do not open agreement?
<div class="checkbox">
<input data-val="true" data-val-mustbetrue="Ваше согласие необходимо для продолжения" data-val-required="The I agree to proceed personal data field is required." id="AgreeToProceedWithPersonalData" name="AgreeToProceedWithPersonalData" type="checkbox" value="true" autocomplete="off" checked="checked">
<label for="AgreeToProceedWithPersonalData">I agree to proceed personal data.
Read the agreement
</label>
<span class="field-validation-valid" data-valmsg-for="AgreeToProceedWithPersonalData" data-valmsg-replace="true"></span>
</div>
Often times developers like to make things pretty by layering things on top of standard html elements, and the driver doesn't like that.
Please don't over-use this, as it is not good practice for most things, but in situations like this I find myself needing to do:
browser.checkbox(id: 'AgreeForBKIRequest').fire_event :click
Most probably there is something very custom with javascript on the page if fire_event is not working. So it is hard to suggest and it will be nice if you will provide the url of the page to experiment with.
However you could try such suggestion with no guaranty (just guess)
browser.execute_script("window.stop")# That will stop all the scripts on the page. May be usefull may be not
browser.execute_script("document.getElementById('AgreeToProceedWithPersonalData').click();")# That will perform click using pure javascript

Laravel testing form press method doesn't works

I'm trying to cover my project with test and faced with problem.
The "press" method of TestCase fails with 'InvalidArgumentException: Unreachable field ""'
However the "see" method sees the needed button
Besides another form on another page tests fine
Hours of debug show me that the issue might be in the fact that the problem form has multiple (with this brackets []) inputs
Test code that fails
$this->type($params['from'], 'from[]');
$this->type($params['event'], 'event[]');
$this->type($params['class'], 'class[]');
$this->type($params['method'], 'method[]');
$this->press('save_handlers');
With form and button everythings is okey
Button:
<button type="submit" class="btn btn-primary btn-block" name="save_handlers">Save</button>
And of course button is in the form tag
Indeed, the problem is linked with the fact that there are attributes with brackets[].
I just had the same problem. I'm using a form with multiple checkboxes, and all of them have the same name (but different id) : codes[]. I'm doing this in order to retrieve them later (in a controller) simply as an array of values.
<input id="perm-0" type="checkbox" name="codes[]" value="perm-0" />
<input id="perm-1" type="checkbox" name="codes[]" value="perm-1" />
<input id="perm-2" type="checkbox" name="codes[]" value="perm-2" />
My friend var_dump() told me that the Symfony component which parses the form inputs doesn't like it when I'm using codes[] with nothing inside the brackets. It is seen as two fields : "codes" and "" instead of codes[]. That's causing the Unreachable field "" error.
A simple solution I found is to simply add an explicit index for the codes[] array :
<input id="perm-0" type="checkbox" name="codes[0]" value="perm-0" />
<input id="perm-1" type="checkbox" name="codes[1]" value="perm-1" />
<input id="perm-2" type="checkbox" name="codes[2]" value="perm-2" />
This way each checkbox is distinct from others, and the method press() does not cause the error any more.
It seems that this doesn't affect the processing of the resulting array in my controller.
This seems rather confusing seeing as the docs state this:
"Press" a button with the given text or name.
While the docblock above the actual press method states the following:
Submit a form using the button with the given text value.
So instead of using the value of the name attribute (save_handler) use the actual text (Save).
$this->press('Save');

Image Submit Not working in IE

I have the following code submitting a form
<div class="free-download">
<input name="method_free"
value="<TMPL_VAR lang_free_download>"
type="image"
src="images/free-download.png"
alt="<TMPL_VAR lang_free_download>" />
</div>
it's working fine in firefox, but in internet explorer it just loads the same page for some reason, any ideas?
Thanks
Try the form attribute in the input tag.
<input type="image" form="(ID of the form it belongs to)">
Sometimes inputs can get lost in layouts.
Have you checked to see if you are getting method_free_x and method_free_y posted back to you? Seems when using an image to submit, you get the X and Y coordinates that were clicked.

Submit button to submit a form in dreamweaver cs4

I can not get the form to submit with the button. The best luck I have had is to send a generic email with no data attached.
This is the code:
<input name="mailto: info#thebellimagegroup.com" type="submit" onClick=mailto: info#thebellimagegroup.com value="Submit Form" id="mailto: info#thebellimagegroup.com" >
the value is: /frms/contact.con
Can anyone help????
Submit buttons generally aren't used for storing information -- as a rule, they just submit the page, and any other information (such as the email recipient's address) will be put in other inputs in the form. For example:
<form action="/frms/contact.con" method="post">
<label>Subject: <input type="text" name="subject" value="" /></label>
<label for="message-editor">Message</label>
<textarea name="message" rows="6" cols="60" id="message-editor"></textarea>
<input type="submit" value="Submit" />
<input type="hidden" name="recipient" value="info#thebellimagegroup.com" />
</form>
In this example, the "action" attribute of the FORM element specifies the script on the server which will process the information once someone clicks Submit. The hidden input which I have named "recipient" specifies the email address, and the value of that will be sent in along with the rest of the form when it's submitted. All the submit button itself does is cause the browser to send the finished form off to the server for processing.
Note that the example I've given here probably won't work with your particular script, because the names I've selected for the example inputs ("subject", "message", and "recipient") probably don't match the ones your script expects.
Do you have documentation on how the /frms/contact.con script works? If so, check it -- it should tell you what to name your form elements. Failing that, and assuming that you know whatever programming language it was written in, you could read the code in contact.con to see what names it's expecting.
If all else fails, try a different server-side script, there are about eight zillion available.

Resources