I am writing integration test for following html structure but i am stuck on text fields and capybara fill_in method
<div class="row" id="attr_3">
<div class="span4">
<input name="description[]" type="text" value="Air Conditioning" />
</div>
<div class="span4">
<input id="value_" name="value[]" type="text" value="" />
</div>
</div>
<div class="row" id="attr_20">
<div class="span4">
<input id="description_" name="description[]" type="text" value="Autopilot" />
</div>
<div class="span4">
<input id="value_" name="value[]" type="text" value="" />
</div>
</div>
This is a chunk of code Now I have to fill the value of text box whose description is "Air Condition". How I can do that? because there is no formal structure of this html and Air Condition is not label it is also a text box.
Related
How to make bootstrap 5 validation not visible immediately before the user types (oninput)?
Here is the program that I use, but the program immediately provides validation to the user even though the user has not provided input interaction:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<form action=" " class="was-validated">
<div class="userid">
<label for="uid" class="form-label"> User Name: </label>
<input type="text" class="form-control" id=" uid " placeholder="Enter user_name" name=" uid " required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the user name. </div>
</div>
<div class="emailid">
<label for="emid" class="form-label"> Email Id: </label>
<input type="email" class="form-control" id=" emid " placeholder="Enter email_id" name=" emid " required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the email id. </div>
</div>
<div class="numberid">
<label for="numid" class="form-label"> Mobile Number: </label>
<input type="number" class="form-control" id=" numid " placeholder="Enter Mobile Number" name="numid" required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the mobile number. </div>
</div>
<div class="txt">
<label for="txt" class="form-label"> Message: </label>
<textarea class="form-control" id="txt" placeholder="Enter message" name="txt" required></textarea>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the message. </div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="Checked" name="remembers" required>
<label class="form-check-label" for="Checked"> I agree on form validation.</label>
<div class="valid-feedback"> </div>
<div class="invalid-feedback"> </div>
</div>
<button type="submit" class="btn btn-info mt-2"> Submit </button>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
You shouldn't have .was-validated on the form in the markup. You add that in your validation script.
<form action=" " class="needs-validation">
Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>. Otherwise, any required field without a value shows up as invalid on page load.
https://getbootstrap.com/docs/5.2/forms/validation/#how-it-works
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<form action=" " class="needs-validation">
<div class="userid">
<label for="uid" class="form-label"> User Name: </label>
<input type="text" class="form-control" id=" uid " placeholder="Enter user_name" name=" uid " required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the user name. </div>
</div>
<div class="emailid">
<label for="emid" class="form-label"> Email Id: </label>
<input type="email" class="form-control" id=" emid " placeholder="Enter email_id" name=" emid " required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the email id. </div>
</div>
<div class="numberid">
<label for="numid" class="form-label"> Mobile Number: </label>
<input type="number" class="form-control" id=" numid " placeholder="Enter Mobile Number" name="numid" required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the mobile number. </div>
</div>
<div class="txt">
<label for="txt" class="form-label"> Message: </label>
<textarea class="form-control" id="txt" placeholder="Enter message" name="txt" required></textarea>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the message. </div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="Checked" name="remembers" required>
<label class="form-check-label" for="Checked"> I agree on form validation.</label>
<div class="valid-feedback"> </div>
<div class="invalid-feedback"> </div>
</div>
<button type="submit" class="btn btn-info mt-2"> Submit </button>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
I'm trying to change the size of inputs in a multiple-input row (Bootstrap 5). I can change the label size but not the two inputs next to it. I want one to be col-7 and the other col-1. But the two inputs stay the same in size (see screenshot).
Here is the code:
<div class="row">
<!-- left column -->
<div class="col-5">
<div class="input-group my-3">
<label class="col-4 col-form-label"><?php echo $label['client-name']; ?>: *</label>
<input type="text" class="form-control col-7" name="clientname" value="<?php echo (isset($clientname)? $clientname : ""); ?>" />
<input type="text" class="form-control col-1" name="clientID" value="<?php echo (isset($clientID)? $clientID : ""); ?>" />
</div>
you can use width for input text.use this code:
<div class="row">
<!-- left column -->
<div class="col-5">
<div class="input-group my-3">
<label class="col-form-label">
clientname:
</label>
<div class="d-flex">
<input type="text" class="form-control w-25" name="clientname"
value="" />
<input type="text" class="form-control " name="clientID"
value="" style="width: 10%;" />
</div>
</div>
</div>
You should put your label in a separated column giving it a width like I did here so that the label column always takes col-3 and the content column always takes col-9.
Then you can treat the content column as another row and split it in 7-2 (but the bootstrap canonic layout would expect 12 cols in total).
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3">
<label class="col-4 col-form-label">Label</label>
</div>
<div class="col-9">
<div class="row input-group">
<div class="col-7">
<input
type="text"
class="form-control"
name="clientname" value="***" />
</div>
<div class="col-2">
<input
type="text"
class="form-control"
name="clientID"
value="***" />
</div>
</div>
</div>
</div>
I am reading a page using Thymeleaf.
In "Edit page", there is a "Back" button for going back to "User List Page". The strange thing for me is this button has "href" and "th:href" at the same time.
image detail of the button
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>user</title>
<link rel="stylesheet" th:href="#{/css/bootstrap.css}"></link>
</head>
<body class="container">
<br/>
<h1>修改用户</h1>
<br/><br/>
<div class="with:80%">
<form class="form-horizontal" th:action="#{/edit}" th:object="${user}" method="post">
<input type="hidden" name="id" th:value="*{id}" />
<div class="form-group">
<label for="userName" class="col-sm-2 control-label">userName</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="userName" id="userName" th:value="*{userName}" placeholder="userName"/>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label" >Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" id="password" th:value="*{password}" placeholder="Password"/>
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">age</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="age" id="age" th:value="*{age}" placeholder="age"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Submit" class="btn btn-info" />
Back
</div>
</div>
</form>
</div>
</body>
</html>
It is obvious that "th:href" is for going back. Is there any opition on what is the function of the atrribute "href"?
ThymeLeaf is designed to use the same file for both as prototype you can view in your browser as well as a working template file. What this means in practice is that if you want, you can open the template file in a browser without actually running it and it still looks okay. For example, in this code:
Back
If you open the file directly in a browser, the browser will ignore the th:href (because it doesn't know what to do with it) and instead use href="/toAdd". However, when you run it through the templating engine on a server, href="/toAdd" is replaced with the result of the dynamic expression th:href="#{/list}".
This is more easily shown with a table. Like this:
<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
</tr>
<tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>
</table>
When you open that in a browser, you'll see a table with a single row (Onions, 2.41, yes). But when you run it through the server, the actual content of the table is replaced with whatever data exists in the ${prods} variable.
Ckeditor ruby gem is adding a ">" at the end of my content entries every time a user edits the content.
Here is a video of it happening: https://drive.google.com/file/d/16sus8LGxHBZLFs_ts5_SJJSwLfisJzom/view?usp=sharing
Here is my update_row controller code for the text_component model. The textarea input is being saved in the content column.
def update_row
#text_component = TextComponent.find(params.fetch("id_to_modify"))
#text_component.tab_id = params.fetch("tab_id")
#text_component.content = params.fetch("content")
if #text_component.valid?
#text_component.save
redirect_to("/guides/"+params.fetch("guide_id"), :notice => "Text component updated successfully.")
else
#guide = Guide.find(params.fetch("guide_id"))
render("guide_templates/show.html.erb")
end
end
ANSWERED: here is the working form code in my edit_form view:
<form action="/update_text_component/<%= #text_component.id %>" method="post">
<!--input for guide_id -->
<div class="form-group">
<input type="hidden" id="guide_id" name="guide_id" class="form-control" value="<%= params.fetch("guide_id") %>">
</div>
<!-- input for tab_id -->
<div class="form-group">
<input type="hidden" id="tab_id" name="tab_id" class="form-control" value="<%= params.fetch("tab_id") %>">
</div>
<div class="form-group">
<label for="content">
Content
</label>
<textarea id="content" name="content" class="ckeditor" rows="10"><%= raw #text_component.content %></textarea>
</div>
<button class="btn btn-block btn-outline-secondary">
Update text component
</button>
</form>
<form action="/update_text_component/<%= #text_component.id %>" method="post">
<!--input for guide_id -->
<div class="form-group">
<input type="hidden" id="guide_id" name="guide_id" class="form-control" value="<%= params.fetch("guide_id") %>">
</div>
<!-- input for tab_id -->
<div class="form-group">
<input type="hidden" id="tab_id" name="tab_id" class="form-control" value="<%= params.fetch("tab_id") %>">
</div>
<div class="form-group">
<label for="content">
Content
</label>
<textarea id="content" name="content" class="ckeditor" rows="10"><%= raw #text_component.content %></textarea>
</div>
<button class="btn btn-block btn-outline-secondary">
Update text component
</button>
</form>
I have used the basic angular script which update what ever you type in the input field on any element we specify, real time...
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Im new to Angular. I used this on may rails app. But the problem is, the field I used ng-model will reset its valu after submit. Even setting the 'value' attribute won't work. How can I fix this?
Exact code generated from my rails application :
<form accept-charset="UTF-8" action="/members" class="custom" id="new_member" method="post">
<div class="row collapse text-field">
<div class="small-4 columns">
<h3>Add Member : </h3>
</div>
<div class="small-6 columns left inline">
<h3 class="subheader inline"> {{newEntry.name}}</h3>
</div>
</div>
<div class="row collapse text-field">
<div class="small-3 columns">
<label class="prefix" for="member_name">Full Name</label>
</div>
<div class="small-7 columns left">
<input class="input" id="member_name" name="member[name]" ng-model="newEntry.name" type="text" value="gj" />
</div>
</div>
<div class="row collapse text-field">
<div class="small-3 columns">
<label class="prefix" for="member_address">Address</label>
</div>
<div class="small-9 columns">
<textarea class="input" height="115" id="member_address" name="member[address]">
</textarea>
</div>
</div>
<div class="row">
<div class="small-9 columns" ><input class="button radius" name="commit" type="submit" value="Add Member" /></div>
</div>
</form>
Note : I haven't used an ng-controller. Im new to Angular. If its required, please tell me how to convert the above to the controller. I can get the value of the field and send it back to the form in rails. Its there in a variable. But Angular keeps wiping it!
Note2 : This problem persist only for the input field I used angular-model.. All the other fields retained the data!
Ok this is not the best solution but you could do this:
<input type="text" ng-init="yourName = 'Your Value Goes Here'" ng-model="yourName" placeholder="Enter a name here">
ng-init directives are run when the app intialises, so your value will be assigned to angular's internal "yourName" model and be updated in the view accordingly.
That would solve your problem but its not the best way. Hopefully that will get you going for now - I'll try and post a more "ideal" solution shortly.