I'm using query mobile 1.4.0 and I'm trying to make my flip switch active by default but I'm not really sure how to approach it. I've tried adding selected="selected" to the <input> but it doesn't seem to make a difference. Anyone have any ideas?
<form>
<div class="prof-wrap">
<div class="prof-left">
<div class="prof-txt-wrap">
<div class="text-off">OFF TITLE</div>
<div class="text-off2">OFF TYPE</div>
</div>
</div>
<!-- END prof-left -->
<div class="prof-mid">
<div class="prof-switch">
<input type="checkbox" data-role="flipswitch" name="flip-checkbox-4" id="flip-checkbox-4" data-wrapper-class="custom-size-flipswitch" selected="selected">
</div>
<!--END prof-mid -->
</div>
<!-- END prof-switch -->
<div class="prof-right">
<div class="prof-txt-wrap2">
<div class="text-active">ON TITLE</div>
<div class="text-active2">ON TYPE</div>
</div>
</div>
<!-- END prof-right -->
</div>
<!-- END prof-wrap -->
</form>
According to the Documentation use the checked=""attribute:
<form>
<label for="flip-checkbox-4">Flip toggle switch checkbox:</label>
<input type="checkbox" data-role="flipswitch" name="flip-checkbox-4" id="flip-checkbox-4" checked="">
</form>
Related
I am building a Doctor booking platform where there's a patient and a doctor.
I currently have standard devise setup with one user model and one signup form, I want to have to separate forms one for patient where I will pass params role of patient and a doctor form with params of doctor role so I can assign roles from the controller or the model.
The forms will be quite the same only for doctor I will require some extra fields.
Also my doctor as it belongs to a user will have the ability to book an appointment with other doctors, is it a good practice to use boolean to define whether it's a doctor or not or use roles with enum.
I need help please
What about hidden_field_tag, did you have tried anything or want to clear concept? You can do this using hidden_field_tag like if you create those form using bootstrap tab like this
$('#myTabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Doctor</li>
<li role="presentation">Patient</li>
</ul>
<h2>Just example form</h2>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<h2>Doctor?</h2>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<h2>Patient?</h2>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
in the form, you can just use a hidden field like when form for doctor
<%= f.hidden_field :role, value: "doctor" %>
and when form for Patient
<%= f.hidden_field :role, value: "patient" %>
and permit their role in the application_controller
before_action :configure_permitted_parameters, if: :devise_controller?
protected
def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys: [:email, :role])
end
I thing it will help.
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.
I have a PhoneGap+jQuery Mobile android index.html file.
<div data-role="page" id="dashboard"> has a <ul><li> like this.
<li>
정보 입력
</li>
when I click #enterInfo li, the page sometimes changes correctly to this page.
<!-- page enterInfo -->
<div data-role="page" data-theme="b" id="enterInfo">
<div data-role="header" data-position="inline">
cancel
<h1>정보 입력</h1>
save
</div><!-- /header -->
<div data-role="content" id="enterInfo" >
<p>
<form method="post" class="dialog" id="enterInfoForm" action="http://wafflemaker.kr/flatlens/enterInfo.php" data-ajax="true">
<fieldset>
<div data-role="fieldcontain">
<p id="juminP">
<label for="jumin">주민등록번호</label>
<input type="text" id="jumin1" name="jumin1" size="6" />-<input type="password" id="jumin2" name="jumin2" size="6" />
<label for="age">연령</label>
</p>
<select name="age">
<option value="20s" selected>20대</option>
<option value="30s">30대</option>
<option value="40s">40대</option>
<option value="50s">50대</option>
<option value="60s">60대</option>
</select>
<label for="as_dong">주소(지역구를 찾아줍니다)</label>
<input type="text" id="as_dong" name="as_dong" value=""/>
</div>
<input type="button" id="as_search" name="as_search" value="검색">
<!--
<a href="index.html" rel="external" data=role="button" data-icon="arrow-r" data-iconpos="right" data=theme="a"
onclick="searchAddress(document.getElementById('as_dong').value);">검색</a>
-->
<a class="button" type="submit" id="enterInfoFormSubmit" name="submit" href="#">전송</a>
</fieldset>
</form>
</p>
<div id="as_show"></div>
검색어 -> 부산광역시 : 부산광역시를 가지는 주소를 표시<br>
검색어 -> 거제3동 : 거제3동을 가지는 주소를 표시
</div><!-- /content -->
But after 4-5 repetition of clicking on li -> cancel, the screen changes to phone call screen, with numbers 1270-50193.
What the bug. Can you please help it out?
In your code snippet the ids are duplicated:
<div data-role="page" data-theme="b" id="enterInfo">
<div data-role="content" id="enterInfo" >
I have a very simple jquery mobile page. It has a header, a footer and the body has asks for login and password with textboxes, and then you can submit.
My problem is that jQuery Mobile makes the textboxes hold about 100 characters, making my entire display way too small. Is there a way to force it to make the textboxes only hold about 12 characters and then make everything in the body larger?
Here is my code:
<div data-role="page" id="login">
<div data-role="header">
<h1>heade</h1>
</div>
<div data-role="content">
<form action="login.py" id="login_form" data-ajax="false">
<div data-role="fieldcontain">
<label for="name" style="font-size: px; font-weight: bold;"> User Name: </label>
<input type="text" name="uname" minlength="3" />
</div>
<div data-role="fieldcontain">
<label for="password"> Password: </label>
<input type="password" name="password" />
</div>
<div id="submitDiv" data-role="fieldcontain">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<input type="reset" value="Reset" />
</div>
<div class="ui-block-b">
<input type="submit" value="Submit" />
</div>
</fieldset>
</div>
</form>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
</ul>
</div>
</div>
</div>
I see this post is old, but maybe this will help someone...
Did you try adding something like this to your css?
div input { width: 12px !important; }
I have this link on my page:
It shows up correct but it should render this when clicked:
<div data-role="page" id="advOptions">
<div data-role="header">
<h1>Advanced Options</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="stdDevs">Standard Deviations:</label>
<input type="textarea" name="stdDevs" id="stdDevs"/>
</div>
<div data-role="fieldcontain">
<label for="numsims">Number of Simulations:</label>
<input type="text" name="numsims" id="numsims" />
</div>
<div data-role="fieldcontain">
<label for="term">Forward Rate Data (in yrs):</label>
<input type="text" name="term" id="term" />
</div>
<div data-role="controlgroup" data-type="horizontal">
<fieldset class="ui-grid-a">
<button type="submit" data-theme="d" data-transition="pop" data-icon="delete">Reset</button>
<button type="submit" data-theme="a" data-transition="pop" data-icon="plus">Add</button>
</fieldset>
</div>
</div>
<div data-role="footer">
<h4>Chatham Financial</h4>
</div>
</div>
But it's trying to instead call the advOptions method on my controller which doesn't exist, looks like it's just trying to redirect from the base URL instead of opening that dialog.
What am I doing wrong?
The code looks good to me...
Are you adding that link to your page dynamically? Because if so, maybe JQuery Mobile did not recognize the data-rel="dialog" attribute. If this is the case, you should be able to simply call the .page() method on your page to let JQuery Mobile do its thing.