I want to replace all kind of buttons on my page with div as bellow:
<div class="button">
<div class="button_left"></div>
<div class="button_center">save</div>
<div class="button_right"></div>
</div>
I replace components onto h:commandLink and it work with most of them,
except those like this:
<h:form>
<h:commandButton value="do it" action="#{myBean.myFirstAction()}" />
<h:commandButton value="do that" action="#{myBean.mySecondAction()}" />
</h:form>
How to deal with it?
[edit]: a4j:commandButton is an example of component that work fine. The difference between those component is that h:commandButton ganerate input type="submit" and the rest generate input type="button".
Related
How do I set clr-error when the input is invalid. I've set the input field to be required.
But on page load the clr-control-error message always shows and the exclamation-circle never shows even when i click into input and click away
<form class="clr-form clr-form-horizontal">
<div class="clr-form-control clr-row">
<div class="clr-control-container clr-col-4">
<div class="clr-input-wrapper">
<clr-icon shape="search"></clr-icon>
<input type="text" id="search" class="clr-input" [(ngModel)]="model" name="search" required/>
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
<clr-control-error>Search Input is required</clr-control-error>
</div>
</div>
</div>
</form>
what you've got is the HTML/CSS version of form controls, which don't have built in validation. We've not yet created an input-group functionality that also works with Angular, so you'll have to manually toggle the display of the error message. You can see a few demos of this here: https://github.com/vmware/clarity/blob/master/src/dev/src/app/forms/input-group/input-group.html
Here is a demo based on your example of something that works with our markup, but currently requires some manual effort on your end. Eventually this will be supported in an Angular component, but not at the moment.
https://stackblitz.com/edit/clarity-light-theme-v1-0-xfaw9m?file=src/app/app.component.html
<form class="clr-form clr-form-horizontal">
<div class="clr-form-control clr-row">
<div class="clr-control-container clr-col-6" [class.clr-error]="search.invalid && search.touched">
<div class="clr-input-wrapper">
<div class="clr-input-group">
<clr-icon class="" shape="search"></clr-icon>
<input type="text" id="search" class="clr-input" [(ngModel)]="model" name="search" required #search="ngModel" />
</div>
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
<div class="clr-subtext" *ngIf="search.invalid && search.touched">Search Input is required</div>
</div>
</div>
</div>
</form>
I'm trying to style input type file using Laravel -> Form::file:
<div class="col-md-3">
{{ Form::file('images[]', ["class"=>"required","multiple"=>true]) }}
</div>
It should look like that:
I've searcched in web for some solutions and there are possibilities with js but in some of them it's commented that it's not always working in all browsers.
What should be the right way to do that?
you can solve this through "label" tag.
<label for="form-file">Upload a file</label>
<input type="file" name="file" id="form-file" class="hidden" />
Just hide the input with css or move it somewhere -9999px to the left, and style the label element to whatever you desire. When user will click on label it will show the upload popup.
I hope this help.
EDIT:
Here is example.
With "Form::file" you can just add label and add ID parametr to your function.
Here's you can attach your file in laravel
<div class="row p-t-20">
<input id="file-upload" type="file" name="banner_url" value="{{old('banner_url')}}" />
{!! $errors->first('banner_url', '
<p class="text-warning errorBag">:message</p>') !!}
<label for="file-upload" id="file-drag">
<div id="file-cont">
Select a file to upload
<br />OR
<br />Drag a file into this box
</div>
<br />
<br /><span id="file-upload-btn" class="btn btn-success">Add a file</span>
</label>
<progress id="file-progress" value="0">
<span>0</span>%
</progress>
<output for="file-upload" id="messages"></output>
this is the easy and the stylish way to input your file in laravel
please share anyone who needs this thanks
I'm quite new to asp.net and vb.net, so my apologies if I do not use the correct terminology here.
I have a database table and for each row in a returned dataset from that table I want to produce some HTML code eg:
<div>
<img src="SOURCE" />
<h1>Row1</h1>
<input type="button" />
<input type="button" />
</div
<div>
<img src="SOURCE" />
<h1>Row2</h1>
<input type="button" />
<input type="button" />
</div
What would be the best way to do this? Do I simply pull back an object with the entire data and then write a foreach loop to iterate through each row and insert a string to the page, or should I be looking to use a user control?
I guess I'm trying to make a sort of forum listing page and want to fetch all topics with a particular entry in a database and then display this list on a page with some input controls and an image. I also want to add pagination; so to show only 10 posts at any time and then be able to paginate to the next page.
Again I apologise if I've not been very clear, but I'm having a little bit of a hard time understanding the best way to tackle this.
You could use a Repeater.
<asp:Repeater id="Repeater1" runat="server">
<ItemTemplate>
<img src="SOURCE" />
<h1>Row<%# Container.ItemIndex %></h1>
<input type="button" />
<input type="button" />
</ItemTemplate>
</asp:Repeater>
If you want any code block to be repeated. Try this code which i uses..
Sample code to display any div 3 times
<% For i as Integer = 1 To 3%>
<div>
<img src="SOURCE" />
<h1>Row1</h1>
<input type="button" />
<input type="button" />
</div> <% Next %>
I'm writing a program in Java that submits a form using WebDriver. There is a method findElement that allows you to select elements using class name, css selector, id, link text, name, partial link text, tag name, or xpath.
Here's the button that I want to select:
<div class="editable" style = "width:82px;float:right;margin-right:10px;">
<a href="#" onclick="$('order_form').submit(); return false;" class="btn">
<img class="btn" src="/myhuds/images/rd_images/btn_place_order.gif" alt="Place Order" width="82" height="17" border="0">
</a>
</div>
I can't use class name because there are multiple buttons on the page. Any ideas on how I might go about using the findElement method to select this button?
Thanks!
Try using this. You can add some browser plugin to get XPath.
driver.findElement(By.xpath("Your XPath"));
You can add an id to the button (may be to all buttons in your page) and find as -
driver.findElement(By.id("Your ID"));
Use CSS selectors. You can find a short explanation here W3, and couple examples here :Examples.
Therefore, try to use driver.findElement(By.cssSelector(...));
For your specific case you can search based on img #alt attribute using XPath
driver.findElement(By.xpath("//img[#alt='Place Order']")).click();
Step 1:
With the available DOM Structure Generate CSS Selector for the "Place Order"
Image
css=a[onclick*='order_form'] > img[src*='btn_place_order.gif']
Then Perform Click on "Place Order" Image.
driver.findElement(By.cssSelector("a[onclick*='order_form'] > img[src*='btn_place_order.gif']")).click();
Following example should help:
Html File:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1 class="page-header">Login</h1>
<ul class="errors"></ul>
<div>
<form class="login-form" action="checkLogin.html" method="post">
<label for="username-field">Username1</label>
<input type="text" name="username" class="username-field" />
<br />
<label for="password-field">Password1</label>
<input type="password" name="password" class="password-field" />
<br />
<input type="submit" value="Submit" />
</form>
</div>
<div>
<form class="login-form" action="checkLogin.html" method="post">
<label for="username-field">Username2</label>
<input type="text" name="username" class="username-field" />
<br />
<label for="password-field">Password2</label>
<input type="password" name="password" class="password-field" />
<br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
To locate the input field for Password1 :
WebElement passwordField1: driver.findElement(By.cssSelector("div:nth-child(3) .password-field"));
To locate the input field for Password2 :
WebElement passwordField2: driver.findElement(By.cssSelector("div:nth-child(4) .password-field"));
Learn more about nth-child() selectors here.
I am trying to implement a toggle switch-toggle between textarea and ckeditor in my web form.
As of now I am able to toggle between the 2 editors.But I am not able to have the same contents in both the editors. Its treating it like 2 separate textarea, I want them to have the same contents when I toggle from textarea to ckeditor.Can anybody help me and lemme know what I am missing?
Thanks in advance
Code:
Updated code
<textarea id="editor1" name="editor1" class="ckeditor" rows="20" cols="75"></textarea>
<input type="button" value="CKEditor" onclick="CKEDITOR.replace('editor1');" />
<input type="button" value="Text editor" onclick="CKEDITOR.instances.editor1.destroy('editor1');" />
<input type="submit" value="Submit" />
</form>
Use CKEDITOR.instances.editor1.destroy() to restore it to a textarea and call CKEDITOR.replace('editor1') again when you want a CKEditor.
Remove the whole <div id="textarea"> because otherwise you will get unexpected results, you're using two textareas with the same id and name.