In an Angular application, I've a dialog that's shown when the user clicks on a button
and it's defined as
<igx-dialog #dialogAdd title="Nuovo Tipo Oggetto" [rightButtonLabel]="'Inserisci'" [leftButtonLabel]="'Cancella'" (leftButtonSelect)="cancel()" (rightButtonSelect)="addRow()">
<div class="dialogNewRecord">
<app-tipi-oggetto-insert ></app-tipi-oggetto-insert>
</div>
</igx-dialog>
The content of app-tipi-oggetto-insert is
<form class="input-group-form" [formGroup]="tipoOggettoInsert" (ngSubmit)="onSubmit()">
<igx-input-group>
<label igxLabel for="productName">Tipo</label>-->
<input igxInput id="productName" type="text" [(ngModel)]="item.tipo" />
</igx-input-group>
<igx-input-group>
<label igxLabel for="unitsInStock">Descrizione</label>
<input igxInput id="unitsInStock" type="text" [(ngModel)]="item.descrizione" />
</igx-input-group>
</form>
I was wondering how can I disable the Submit button at the start and if the validation of the fields fails... I haven't put the validation here for simplicity but the main problem is that I don't know how to tell the main view to disable the button based on internal value. do I have to use an event?
Otherwise, how can I open an igniteUI dialog programmatically? I think of putting the
<igx-dialog #dialogAdd ...
inside the Add Component
Thankss
Related
I am using redux-form and setting up a sign-up form. The fields are not like that appear in sandbox preview on their documentation site.
I tried to provide bootstrap classNames form-group, form-control for field and input respectively but it appears to be default action. Just a bar on bottom.
Actually I have a blue background so I need a completely white box so user can see the grey placeholder of an input field.
My renderFields method:
renderFields(){
return _.map(formFields, ({name,type,placeholder}) =>{
return(
<Field
key={name}
type= {type}
name={name}
placeholder={placeholder}
component={SignupField}
/>
);
})
And Field method:
<div className="form-group">
<input type={type} className="form-control" {...input}
placeholder={placeholder}/>
<div className="red-text" style={{marginBottom:"30px"}}>
{touched && error}
</div>
</div>
And form:
<form class="user-forms" onSubmit=
{this.props.handleSubmit(values=>this.submitForm(values))}>
{this.renderFields()}
<button className="btnSubmit btn btn-primary"
type="submit">Create Account
</button>
</form>
I expect a box for each input & not line at bottom.
OK I was using materialize css that caused the interference.
I am trying to find a way to change the pop up HTML on a chrome extension to another one when you click a button. I have tried to make a onclick function href but nothing works. I am new to both HTML and chrome extensions so I am sorry if this problem seems easy to the more experience developers.
<form id="gform" method="POST" class="pure-form pure-form-stacked" data-email="from_email#example.com"
action="https://script.google.com/a/cvsd356.org/macros/s/AKfycbxb4ZyUUQCnTN-7iYF-YRViDSy/exec">
<div class="name">
name: <input type="text" name="Name" id= "inputbox"><br>
</div>
<div class="id">
ID# <input type="text" name= "ID" id= "inputbox"><br>
</div>
<div class="MailingAddress">
Mailing Address: <input type="text" name= "Mailing Adresss" id= "inputbox" style=width:350px;><br>
</div>
<div class="sendToTr">
Send Transcript to: <input type ="text" name="College" style=width:350px; id= "inputbox" ><br>
</div>
<div class="emailmy">
<label for="email"><em>Your</em> Email Address:</label>
<input id="inputbox" name="email" type="email" value=""
required placeholder="your.name#email.com" />
</div>
<div class="sButton">
<button style=height:30px;width:70px;border-radius: 3px; class="button-success pure-button button-xlarge">
send
</button>
</div>
I think there are quite a few ways to achieve what you are asking. If I were you, I would add a JavaScript file to my project to do this.
Step 1:
I would tell my HTML page where to find this JS file. The sample below can be included near the end of your HTML file, right before </body></html>. The sample below assumes your new popup.js file is in the root folder of your project:
<script src="popup.js" type="text/javascript"></script>
Step 2:
In the popup.js file, I would create a function that tells the popup how it should be modified. In the sample below, I'm going to hide the element with an ID of "theOldElement" and show the element with an ID of "theNewElement". I'm also going to attach this function to the click event of "theButton" element.
popup.js
function updatePopup(){
document.getElementById("theNewElement").style.display = "block";
document.getElementById("theOldElement").style.display = "none";
}
document.getElementById('theButton').addEventListener('click', updatePopup);
Step 3:
I like referring to my HTML elements by ID (as I've been doing above - note the "getElementById" references), so I would:
add id="theNewElement" to the element I want to reveal
add id="theOldElement" to the element I want to hide
add id="theButton" to the button that I want to trigger this change
Note: you can insert these IDs as the first attribute within the tag you want to identify. E.g., <div id="theNewElement" ...
I have created a slider as in input field. I am not able to get its value in formGroup. I am stucked.
My code:
<form [formGroup]="Form" novalidate (ngSubmit)="BasicDetail(Form.value)>
<div class="col-md-8">
<div class="drags">
<input class="ex6" type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5"/>
</div>
</div>
</form>
Help needed.
Make sure input is slider type, meaning range
type="range"
If you're going to create a submit form fucntion where you feed your form, then it's template-driven, so get rid of your formGroup property, (assuming this is what you want since you've shown no effort on the component.ts side)
Give your form a reference form
<form #form="ngForm" novalidate (ngSubmit)="BasicDetail(form.value)">
Create a button to submit
<button class="btn btn-primary"type="submit"> Submit </button>
Make sure to give your form input a name, and assign it ngModel
If you want also direct access, create a two-way binding, say with variable called rangeValue
[(ngModel)]="rangeValue"
Make sure you're actually using real range input types, I don't know where you got data-slider from
<form #form="ngForm" novalidate (ngSubmit)="BasicDetail(form.value)">
<div class="col-md-8">
<div class="drags">
<input class="ex6"
type="range"
min="0" max="10"
step="1"
name="someRange"
[(ngModel)]="rangeValue"
ngModel/>
</div>
</div>
<button class="btn btn-primary"type="submit"> Submit </button>
</form>
Inside your component.ts, declare variable and try to log it on submit
rangeValue = 5;
constructor( ) {}
ngOnInit() {
}
BasicDetail(form: any) {
console.log(this.rangeValue);
console.log(form.someRange);
}
I would like to change text on button using jquery mobile. It works if I change data-role to none, but then I lose formatting.
<fieldset class="ui-grid-a" data-inline="true">
<div class="ui-block-a"><button class="cl_button1" type="submit"
data-theme="c" data-icon="home" data-iconpos="top">Click Me</button>
</div>
</fieldset>
$('.cl_button1').val('some text');
Another posting suggested this, but it did not work.
$("cl_button1 .ui-btn-text").text("some text");
Using Firebug I found that the HTML markup created by jQuery Mobile is the following:
<fieldset data-inline="true" class="ui-grid-a">
<div class="ui-block-a">
<div data-theme="c" class="ui-btn ui-btn-icon-top ui-btn-corner-all ui-shadow ui-btn-up-c" aria-disabled="false">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">some text</span>
<span class="ui-icon ui-icon-home ui-icon-shadow"></span>
</span>
<input type="hidden" value="">
<input type="hidden" value="">
<input type="hidden" value="">
<button data-iconpos="top" data-icon="home" data-theme="c" type="submit" class="cl_button1 ui-btn-hidden" aria-disabled="false">Click Me</button>
</div>
</div>
</fieldset>
You can see that the ui-btn-hidden class has been added to the origional <button> element and the display of the button is actually rendered through the use of the <span> tags above the <button> tag.
So to change the text for this jQuery Mobile rendered element you would use a selector like this:
$('.cl_button1').siblings('.ui-btn-inner').children('.ui-btn-text').text("some text");
Or if you wanted to change the button's text on click you can do this:
$('.cl_button1').bind('click', function () {
$(this).siblings('.ui-btn-inner').children('.ui-btn-text').text("some text");
});
Here is a jsfiddle for demonstration: http://jsfiddle.net/SfySk/1/
All,
The above solutions do not seem to work with JQM 1.1.1. A very simple way of doing this is to call.
$('.cl_button1').text('some text').button('refresh');
As per http://jquerymobile.com/test/docs/buttons/buttons-methods.html, there are only three methods you can call on a button. This should keep the internal state of your button consistent with the JQM UI adornment, and be more robust against changes to the way buttons are made 'pretty' in the future.
in jqm version 1.4.5, after initialization
$('#btn_input').parent().contents().filter(function(){
return this.nodeType === 3;
}).replaceWith('New Text');
It works without destroying binded events.
When you said this didn't work:
$("cl_button1 .ui-btn-text").text("some text");
You forgot the . before cl_button to indicate that you are trying to select a class
I don't see .ui-btn-text anywhere being used as a class
I got your code to work using this:
$('.cl_button1').text('some text');
Test Here: http://jsfiddle.net/S9asF/
A better solution is to refresh the page:
$(currentPage).trigger('create');
$(currentPage).page();
$('#buttonx').children('.ui-btn-inner').children('.ui-btn-text').text("Some Text");
I am trying to figure out how to write an oAuth/Twitter signin feature with Cucumber/Capybara. Part of it, consists in visiting the page: http://www.twitter.com/sessions/new and filling in the username, the password and then clicking on the 'Sign in' button. That last step is not working as expected, the html code for that page looks like this (located in french):
<fieldset class="textbox">
<label class="username">
<span>Nom d'utilisateur ou e-mail</span>
<input type="text" value="" name="session[username_or_email]" autocomplete="on" />
</label>
<label class="password">
<span>Mot de passe</span>
<input type="password" value="" name="session[password]" />
</label>
</fieldset>
<fieldset class="subchck">
<button type="submit" class="submit button">Se connecter</button>
I have a defined the step like this in web.steps (note that I am not using the default capybara driver but capybara-mechanize):
Given /^I sign in$/ do
visit 'http://twitter.com/sessions/new'
fill_in "Username or email", :with => 'xxx'
fill_in "Password", :with => 'xxx'
find(:xpath, 'button[#class="submit button"]')
....
end
The find(:xpath,..) line is not working properly. I tried to put a '/s' (regex for space character) but I still get this error message:
Unable to find '//button[#class="submit\sbutton"]' (Capybara::ElementNotFound)
I also tried:
xpath_for("submit button")
But I get a stack level too deep error!
I am not really confident with my regex/xpath element finding skills so please tell me what is wrong with my code and how I could find that button?
Thanks so much for helping me!
[EDIT]
Turns out the default selector is :css. I changed it to :xpath:
Capybara.default_selector = :xpath
But it still doesn't solve my problem.
What if you try
click_on "Se connecter"
EDIT: Trying in nokogiri (cause capybara uses nokogiri) it doesn't work for me when I use your HTML as is (meaning it doesn't even see the element in the document). But when I enclose everything in a single root node, it works.. don't know if there's an issue with your page HTML or something.. with a well formed page, it "should" work. not sure how much this helps
<html>
<fieldset class="textbox">
<label class="username">
<span>Nom d'utilisateur ou e-mail</span>
<input type="text" value="" name="session[username_or_email]" autocomplete="on" />
</label>
<label class="password">
<span>Mot de passe</span>
<input type="password" value="" name="session[password]" />
</label>
</fieldset>
<fieldset class="subchck">
<button type="submit" class="submit button">Se connecter</button>
</html>
with this HTML, I can just use the xpath
xpath('//button')
Instead:
find(:xpath, 'button[#class="submit button"]')
you should have:
find('button.submit.button')
Above is css, since it's default selector.
If you want solution with XPath look at https://stackoverflow.com/a/11752824/507018, but it's uglier.
If you have the exact match to class of button <button class="submit button">, you can try just the following:
find(:xpath, '//button[#class="submit button"]')
Make sure that you didn't forget the double slash in the beginning of the search string.