I have some html like this:
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="input-group">
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
<span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" id="File" name="..."></span>
Remove
</div>
</div>
When the form has been submitted I want to clear the file from the input, but I don't know how to do it.
Jansy says I can do it by calling .fileinput("clear") but that doesn't work.
Has anyone done this before?
If so, how do I clear it?
Cheers
It was being a n00b :)
I was using
$("input[type=file]").fileinput("clear")
but I should have been using
$(".fileinput").fileinput("clear");
Related
I solve the problem with getting into iframe but now I can't get my element. Maybe I'm finding bad but right now it took me too much time and I don't what to do next.
Source code:
<divid="ctl00_Telo_Dock_1005_C_ctl00_MainPage1_myPageVozidlo_inpDruhVozidla_ADX" class="inputCell" style="visibility:visible;display:inherit;">
<span id="ctl00_Telo_Dock_1005_C_ctl00_MainPage1_myPageVozidlo_lblDruhVozidla_ADX" class="labels labelC1_n W270">Druh vozidla:
</span>
<div id="ctl00_Telo_Dock_1005_C_ctl00_MainPage1_myPageVozidlo_cmbDruhVozidla_ADX" tabindex="13" class="RadDropDownList RadDropDownList_CMS_Black RadComboBoxInput" style="width:216px;height:23px;font-weight:bold;font-size:10pt;font-family:Arial;color:#396170;border-width:1px;border-style:Solid;border-color:#FDC267;background-color:#F9FBFC;">
<span class="rddlInner">
<span class="rddlFakeInput"></span>
<span class="rddlIcon"><!-- --></span>
</span>
<div class="rddlSlide" id="ctl00_Telo_Dock_1005_C_ctl00_MainPage1_myPageVozidlo_cmbDruhVozidla_ADX_DropDown" style="display:none;">
<div class="rddlPopup rddlPopup_CMS_Black">
<ul class="rddlList">
<li class="rddlItem rddlItemSelected"></li>
<li class="rddlItem">Osobní automobily</li>
<li class="rddlItem">Motocykly</li>
<li class="rddlItem">Užitkové automobily</li>
</ul>
</div>
</div>
<input id="ctl00_Telo_Dock_1005_C_ctl00_MainPage1_myPageVozidlo_cmbDruhVozidla_ADX_ClientState" name="ctl00_Telo_Dock_1005_C_ctl00_MainPage1_myPageVozidlo_cmbDruhVozidla_ADX_ClientState" type="hidden" />
</div>
</div>
Image of input:
My get function:
cy.get('#iframe-id')
.iframe('body #elementToFind')
.should('exist')
Thank you all for helping me.
Unfortunately, Cypress have some open issues regarding interacting with an iframe. But here's a pretty straightforward workaround: https://github.com/cypress-io/cypress/issues/136#issuecomment-328100955.
Anyway, I believe that this can work only if the domain of the outer page and of the iframe are the same, due to the same-origin limitation.
A work's client has reported an issue in our application when working with IE11.
On an specific form, sometimes, when opening it, if you type, the typed text won't show. If I open developer tools, it suddenly shows.
This is the rendered html belonging to that form:
<div class="col-sm-6 ">
<div class="form-group" data-ng-show="myform.txtPropietario.visible">
<label class="col-md-4 control-label my-show-hide-animation">Propietario:</label>
<div class="col-md-8">
<div class=" ">
<input name="txtPropietario" class="form-control text-left ng-pristine ng-valid" input-alpha-numeric="ES" onblur="this.value=this.value.toUpperCase();" data-ng-model="myform.values.txtPropietario" data-ng-disabled="myform.txtPropietario.disabled" type="text" step="0.01" maxlength="50" placeholder=" "></div>
<ul class="errores my-show-hide-animation ng-hide" data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$invalid && myform.procesado"><li data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$error.required" class="ng-hide"><span>Campo obligatorio</span></li><li data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$error.pattern" class="ng-hide"><span>El formato del dato ingresado no es válido.</span></li>
</ul>
</div>
</div>
</div>
The app work's over AngularJs and html is built over Bootstrap 3.
Any idea why is this happening?
It's hard to tell without seeing the CSS, however i encountered this issue a while back and fixed it by setting the height of the input box.
My theory is that IE didn't think there was enough height to show the text in the font size I had specified.
For example
<input type="text" id="example" style="height: 40px" />
I hope this helps.
I can neither recognize the on-off switch nor get its current value (On / Off).
Please help to have a look
try using xpath = "//span[#class='onoffswitch-inner' and contains(#id,'aui')]" but it doesn't help to recognize this button
"id" is a dynamic one, it will be changed once loading the page
Code:
<li id="aui_3_4_0_1_1099">
<div id="aui_3_4_0_1_1098" class="onoffswitch">
<input id="notificationActive" class="onoffswitch-checkbox" type="checkbox" autocomplete="off" checked="checked" name="notificationActive"></input>
<label id="aui_3_4_0_1_1097" class="onoffswitch-label" for="notificationActive">
<span id="aui_3_4_0_1_1096" class="onoffswitch-inner">
::before
::after
</span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</li>
Thanks,
I have problem with the Parsley.js Framework.
My Problem is that the password and password confirm have the same input, but I have a error message if click on the submit button.
Here my Testsite:
http://topkosmetikstudios.de/release/index.php?article_id=21
(german language passwort = password and password wiederholen = password confirm)
Here my Code:
<div class="half right">
<p>
<label for="category" class="dropdown_label">Passwort</label>
<input type="password" data-equalto="#eqalToModel" name="passwort" data-required="true" <?php echo ($_POST['passwort'])? $_POST['passwort']:""; ?>>
</p>
</div>
<div class="half left">
<p>
<label for="category" class="dropdown_label">Passwort wiederholen</label>
<input type="password" data-equalto="#eqalToModel" name="passwort_w" data-required="true">
</p>
</div>
I use the Parsley.js parameter data-equalto="#elem" but it doesn't work.
Here the Parsley.js documentation: http://parsleyjs.org/documentation.html
Does anyone see a problem with my code that would cause this to not function?
It's possible you're using the wrong tag, as of Parsely.js 2.0:
data-parsley-equalto="#anotherfield"
If what you are attempting to do is make sure both password 1 and password 2 are the same before you submit the form then according to the documentation (http://parsleyjs.org/doc/#psly-validators-list) you need to set an id for the fields that you want to match against. And set field one to look for the id of field two and vice versa.
Equalto #2.0 data-parsley-equalto="#anotherfield" Validates that the
value is identical to another field's value (useful for password
confirmation check).
See the example code below:
<div class="half right">
<p>
<label for="category" class="dropdown_label">Passwort</label>
<input id="passwort" type="password" data-equalto="#passwort_w" name="passwort" data-required="true">
</p>
</div>
<div class="half left">
<p>
<label for="category" class="dropdown_label">Passwort wiederholen</label>
<input id="passwort_w" type="password" data-equalto="#passwort" name="passwort_w" data-required="true">
</p>
</div>
For more on Parsley.js lookup their documentation.
Please mark this as an answer if this is what you were looking for. Thanks!
Try setting an id for the first password input (i.e. "password"), then set the data-equalto attribute of the second input to the same value (i.e. "#password") and it should work fine. If it does not work you might wish to check if parsley.js is loaded correctly. Hope this helps.
<div class="half right">
<p>
<label for="category" class="dropdown_label">Passwort</label>
<input id="passwort" type="password" name="passwort" data-required="true" id="passwort">
</p>
</div> <div class="half left">
<p>
<label for="category" class="dropdown_label">Passwort wiederholen</label>
<input id="passwort_w" type="password" data-equalto="#passwort" name="passwort_w" data-required="true">
</p> </div>
data-equalto="#id_of_compare_field"
I'm using MVC4 but I imagine this is an issue for anyone using the new Bootstrap 3 version. Since form-control is now width:100% by default, what is the best practice for placing validation messages?
In version 2.x, placing the validation messages in the help-inline span just after the input control worked best to ensure that the message was placed to the right of the control.
But in version 3, they always get pushed to the bottom making all the controls shift down because the validation messages are forced under the control.
<div class="form-group has-error">
<label for="Label" class="col-lg-2 control-label">Label</label>
<div class="col-lg-5">
<input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
<span class="help-inline"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></span>
</div>
</div>
I've considered manually setting them on a new column like this (below) but wondering if there was a more acceptable way or a less manual way of dealing with this.
<div class="form-group has-error">
<label for="Label" class="col-lg-2 control-label">Label</label>
<div class="col-lg-5">
<input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
</div>
<div class="col-lg-5">
<p class="form-control-static"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></p>
</div>
</div>
I wouldn't say there are "best practices" for presenting form validation errors. It's more of a personal design choice.
Depending on how much JS you want to write, you could get a little slick and insert an input group addon which holds an error message in a tooltip icon, like so...
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">
<i data-toggle="tooltip" title="Error msg here" data-container="body" class="glyphicon glyphicon-question-sign"></i>
</span>
</div>
Honestly though, I think messages appearing below input fields are fine, as long as they don't disturb page layout and push content down when they appear. (Which is just a matter of having a container that displays block and has a a hard-coded height.)