I am using Ionic.
I have a link here:
https://open.weixin.qq.com/connect/qrconnect?appid=wx0f05d08a307a4050&redirect_uri=http://my.duangwifi.cn/yii2-basic/web/index.php?r=site/apptest&response_type=code&scope=snsapi_login&state=1234567abc#wechat_redirect
when I use WeChat Scan QR Code function to scan it, the link will redirect to the “redirect_uri” with code as a request parameter:
http://my.duangwifi.cn/yii2-basic/web/index.php?r=site/apptest&code=0110c30e667a2ae723b06c542ddc055W&state=1234567abc
I need to get request parameter code's value 0110c30e667a2ae723b06c542ddc055W in an ionic framework.
Here is the code:
<script id="templates/sign-in.html" type="text/ng-template">
<ion-view view-title="Sign-In">
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="user.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="user.password">
</label>
</div>
<div class="form-group">
<iframe id="upload_target" name="upload_target" src='https://open.weixin.qq.com/connect/qrconnect?appid=wx0f05d08a307a4050&redirect_uri=http://my.duangwifi.cn/yii2-basic/web/index.php?r=site/apptest&response_type=code&scope=snsapi_login&state=1234567abc#wechat_redirect' style="width:340px;height:340px;border:0px solid #fff;" scrolling="no" frameBorder="no"></iframe>
</div>
<div class="padding">
<button class="button button-block button-positive" ng-click="signIn(user)">
Sign-In
</button>
<!--<p class="text-center">
Forgot password
</p>-->
</div>
</ion-content>
</ion-view>
</script>
How can I achieve that?
Related
I'm working on an Ionic 1 project. I'm trying to have a nav-bar with a back button inside one of the views, but its not appearing. I inspected on Chrome, and saw that the class of the back button became hide. Is there anyway I can make it appear?
Here's my code:
<ion-view ng-controller="GuDetailCtrl">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c show">
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">Name</span>
<span>{{hotel.name}}</span>
</label>
<label class="item item-input">
<span class="input-label">Locality</span>
<span>{{hotel.locality}}</span>
</label>
<label class="item item-input">
<span class="input-label">Amenities</span>
<span>{{hotel.amenities}}</span>
</label>
</div>
<button class="button button-positive" ng-click="modal.show()">
Create Booking
</button>
<script id="templates/booking.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">New Booking</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
</ion-header-bar>
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">Check-in Date</span>
<input ng-model="newBooking.inDate" type="date">
</label>
<label class="item item-input">
<span class="input-label">Check-out Date</span>
<input ng-model="newBooking.outDate" type="date">
</label>
<label class="item item-input">
<span class="input-label">No. of Rooms</span>
<input ng-model="newBooking.rooms" type="number">
</label>
<button class="button button-full button-positive" ng-click="createBooking(newBooking)">Create</button>
</div>
</ion-content>
</ion-modal-view>
</script>
</ion-content>
</ion-view>
You can try this code.The header has a class by default, if you don't explicitly specify one, then the back button won't show up. you can use bar-light or bar-royal in your class.
<ion-nav-bar class="bar-royal">
<ion-nav-back-button>Back</ion-nav-back-button>
</ion-nav-bar>
for more, You can see here
I have a login page. Its fixed now, but I want to enable scroll when I focus on any of one text box. How to do it?
<ion-view>
<ion-content class="background">
<div class="loginscreen">
<div class="row">
<div class="col-80 col-offset-10">
<div class="appheader-frame">
<span>
<img src="img/clock.png" alt="clock" class="clockwidth"></img>
</span>
<h1 class="timesheettext">
<b>Timesheet Tracking</b>
</h1>
</div>
</div>
</div>
<div class="row">
<div class=" formpadding col-80 col-offset-10">
<form novalidate name="loginForm" ng-submit="doLogin(loginForm)">
<label class="item item-input labelusername">
<i class="icon placeholder-icon"><img src="img/user.png" alt="" style="width:20px;height:20px;"/></i>
<input name="UserName" type="text" ng-model="User.UserName" placeholder="Username or Email" ng-focus="hidefooter()" required>
</label>
<p ng-show="loginForm.UserName.$error.required && loginSubmitted" class="usernameerror">
Please provide username
</p>
<label class="item item-input labelpassword">
<i class="icon placeholder-icon"><img src="img/password.png" alt="" style="width:20px;height:20px;"/></i>
<input type="password" name="password" id="password" ng-model="User.Password" placeholder="Password" ng-focus="hidefooter()" required>
</label>
<p ng-show="loginForm.password.$error.required && loginSubmitted" class="usernameerror">
provide Password
</p>
<p ng-show="myflag">
wrong credentials
</p>
<button class="button button-block button-lightgreen" type="submit">
<p class="login">
<b>submit</b>
</p>
</button>
</form>
</div>
</div>
</div>
<div class="bar bar-footer bar-inherit myfooter hide-on-keyboard-open">
<div class="title">
<p id="footer" class="byxyz" ng-show=footerflag>By xyz Software Pvt Ltd</p>
</div>
</div>
</ion-content>
</ion-view>
Is that possible in ionic framework? Then how to do it? Please explain.And don't remove anything in the page and don't add anymore details to make it scroll.I simply want to enable scroll in it but the page should be same as it is right now
simply added overflow-scroll="false" in ion-content.
<ion-content class="background" overflow-scroll="false" >
//code
</ion-content>
I am using copy paste code from ionic docs for header inputs
http://ionicframework.com/docs/components/#bar-inputs
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
<button class="button button-clear">
Cancel
</button>
</div>
But I am not seeing it.
I only want my header to be a search bar in one view.
Heres the views code beginning:
<ion-view>
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
<button class="button button-clear">
Cancel
</button>
</div>
<ion-content>
...
You can add Header Inputs two way
1) Add in index.html
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
<button class="button button-clear">
Cancel
</button>
</div>
<ion-nav-view></ion-nav-view>
2) Add in index.html
<ion-nav-view></ion-nav-view>
and in your template page(e.g. template/home.html)
<ion-view>
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
<button class="button button-clear">
Cancel
</button>
</div>
<ion-content>
...
</ion-content>
</ion-view>
Demo
<ion-view>
<div class="bar bar-header bar-dark">
<h1 class="title">Welcome</h1>
</div>
<ion-content class="has-header">
<form ng-submit="doLogin()">
<div class="list">
<label class="item item-input">
<span class="input-label">手机号</span>
<input type="text" ng-model="phonenumber" placeholder="这里输入手机号" maxlength="11">
<button class="button button-dark" style="margin-right: 16px;" ng-click="getVerifyCode(111)">获取验证码</button>
</label>
<label class="item item-input">
<span class="input-label">验证码</span>
<input type="password" ng-model="verifycode">
</label>
<label class="item">
<button class="button button-block button-dark" ng-click="getVerifyCode(111)">登 陆</button>
</label>
</div>
</form>
</ion-content>
</ion-view>
why the button(获取验证码) inside label tag doesnt work?
but the button(登 陆) outside label tag work fine, why?
please help me to fixed this. I need to make a response when click
the button(获取验证码)
working demo
The solution is simply not to use a label for the item. Instead just use a div
html
<form ng-submit="doLogin()">
<div class="list">
<div class="item item-input">
<span class="input-label">手机号</span>
<input type="text" ng-model="phonenumber" placeholder="这里输入手机号" maxlength="11">
<!-- <input ></input> -->
<button class="button button-dark" style="margin-right: 16px;" ng-click="getVerifyCode(111)">获取验证码</button>
</div>
<label class="item item-input">
<span class="input-label">验证码</span>
<input type="password" ng-model="verifycode">
</label>
<label class="item">
<button class="button button-block button-dark" ng-click="getVerifyCode(111)">登 陆</button>
</label>
</div>
</form>
I have researched stackoverflow to make a drop-down button with login form stay open when completing the form. Right now as soon as you try to type, the login form closes. Here is my code:
<div class="top-nav">
<div class="btn-group pull-right dropdown-toggle"> <a class="btn btn-login" href="#"><i class="icon-user icon-white"></i> Login</a> <a class="btn btn-login dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<form class="form-horizontal dropdown-menu">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox">
Remember me </label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
At the end of my code just before the body tag I entered this script:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script language="javascript">
$('.dropdown-toggle').dropdown();
$('.dropdown-menu').find('form').click(function (e) {
e.stopPropagation();
});
</script>
I was able to reproduce the issue using your code. Removing .find('form') from the JavaScript fixed the problem.