I have tried to re-do some stuff, trying to get working code and then to modify it with what I need it to be once I get something working. Problem is, I've tried to copy Fancybox's #5 example, and titleshow is set to false, yet the title shows, as well as #login_error is supposed to be hidden, yet it shows from the start.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox-1.3.1.css" media="screen" />
</head>
<script type="text/javascript">
$(document).ready(function() {
$("#tip5").fancybox();
});
$("#tip5").fancybox({
'scrolling' : 'no',
'titleShow' : false,
'onClosed' : function() {
$("#login_error").hide();
}
});
$("#login_form").bind("submit", function() {
if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
$("#login_error").show();
$.fancybox.resize();
return false;
}
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : "/data/login.php",
data : $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});
return false;
});
</script>
</head>
<body>
<div>
<a id="tip5" title="Login" href="#login_form">Login</a>
</div>
<div style="display:none">
<form id="login_form" method="post" action="">
<p id="login_error">Please, enter data</p>
<p>
<label for="login_name">Login: </label>
<input type="text" id="login_name" name="login_name" size="30" />
</p>
<p>
<label for="login_pass">Password: </label>
<input type="password" id="login_pass" name="login_pass" size="30" />
</p>
<p>
<input type="submit" value="Login" />
</p>
</form>
</div>
</body>
</html>
Any suggestions?
The demonstration here worked to solve the problem. It created another problem, but that is for another question. I believe that was your demo, JFK, so thank you.
Related
Hi I have a forgot password link on login page, but while clicking it does not redirect to the specified page.
//login.html
<div ng-controller="forgotPasswordController"><h6 class="forget-password"><a ng-click="forgetPassword()">Forgot Password ?</a></h6></div>
//app.js
.state('forgotpassword', {
url: '/forgotpassword',
templateUrl: 'templates/forgotpassword.html',
controller: 'forgotPasswordController'
})
//Controller.js
app.controller('forgotPasswordController',function($scope,$state,$location,for gotPasswordService,$ionicLoading,Flash, $http, $ionicPopup, sessionService)
{
$scope.data = {};
$scope.userDetails = sessionService.get('userDetails');
$scope.forgetPassword = function() {alert("qqq");
$state.go('forgotpassword');
//$location.path( "/forgotpassword" );
//$location.url('/forgotpassword');
}});
Please anyone can assist me what is the issue with this. I have spent lots of time for this
Thanks in advance
instead of calling the function in html page use this. it will use your angular routing.
app.js
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginController'
})
.state('forgotPassword', {
url: '/forgotPassword',
templateUrl: 'forgotpassword.html',
controller: 'forgotPasswordController'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
})
LoginController.$inject = ['$scope', '$state'];
function LoginController($scope, $state) {
$scope.Login = function () {
$state.go('login');
}
}
angular.module('starter').controller('LoginController', LoginController);
forgotPasswordController.$inject = ['$scope', '$state'];
function forgotPasswordController($scope, $state) {
}
angular.module('starter').controller('forgotPasswordController', forgotPasswordController);
forgotPassword.html
html code
<ion-view view-title="Forgot Password">
<ion-content ng-controller="forgotPasswordController">
test
</ion-content>
</ion-view>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-stable nav-title-slide-ios7"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
login.html
<ion-view view-title="login">
</ion-header-bar>
<ion-content class="has-header" ng-controller="LoginController">
<div class="hero no-header flat">
<div class="content">
<div class="app-icon"></div>
</div>
</div>
<br/>
<form name="signinForm" novalidate="" class="login" ng-submit="login(signinForm)">
<div class="col col-center">
<div class="list list-inset1">
<label class="item item-input item-select slct-spc" ng-class="{ 'has-error' : signinForm.userrole.$invalid && signinForm.$submitted, 'valid-lr' : signinForm.userrole.$valid && signinForm.$submitted}">
<span class="item item-input item-select1"> <i class="icon ion-ios-people login-icon" style="color:white"></i></span>
</label>
<div class="form-errors" ng-show="signinForm.userrole.$error && signinForm.$submitted" ng-messages="signinForm.userrole.$error">
<div class="form-error" ng-message="required">This field is required</div>
</div>
<label class="item item-input input-field" ng-class="{ 'has-error' : signinForm.username.$invalid && signinForm.$submitted, 'valid-lr' : signinForm.username.$valid && signinForm.$submitted}">
<i class="icon ion-person-stalker login-icon"></i> <input type="text" name="username" placeholder="Email/Mobile" ng-model="data.username" ng-minlength="10" ng-maxlength="40" maxlength="40" required>
</label>
<div class="form-errors" ng-show="signinForm.username.$error && signinForm.$submitted" ng-messages="signinForm.username.$error">
</div>
<label class="item item-input input-field" ng-class="{ 'has-error' : signinForm.password.$invalid && signinForm.$submitted, 'valid-lr' : signinForm.password.$valid && signinForm.$submitted}">
<i class="icon ion-locked login-icon"></i> <input type="password" name="password" placeholder="Password" ng-model="data.password" ng-minlength="1" ng-maxlength="15" required>
</label>
<div class="form-errors" ng-show="signinForm.password.$error && signinForm.$submitted" ng-messages="signinForm.password.$error">
</div>
</div>
</div>
<div class="clear"></div>
<div class="padding">
<button style="background-color:red;" class="button button-full button-assertive ink" type="submit">Login</button>
</div>
<h6 class="forget-password">Forgot Password ?</h6>
</form>
</ion-content>
</ion-view>
I need help with bootstrap datepicker
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>
The code works, however it shows date instead of time.
You need to edit the format option to show time only:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm'
});
});
</script>
</div>
</div>
$(document).ready(function(){
$("#datetimepicker").datetimepicker({
pickDate: false,
minuteStep: 15,
pickerPosition: 'bottom-right',
format: 'HH:ii p',
autoclose: true,
showMeridian: true,
startView: 1,
maxView: 1,
});
$(".datetimepicker").find('thead th').remove();
$(".datetimepicker").find('thead').append($('<th class="switch">').text('Pick Time'));
$('.switch').css('width','190px');
});
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet">
</head>
<body>
<div class="form-group">
<input class="form-control" type="text" id="datetimepicker" readonly>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
</body>
</html>
this works in my application:
$("#datetimepicker").datetimepicker({format: 'HH:mm:ss', pickDate:false });
You should try this
<div class="well">
<div id="datetimepicker3" class="input-append">
<input data-format="hh:mm:ss" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker3').datetimepicker({
pickDate: false
});
});
</script>
Add to
showSeconds:false
$('#kt_timepicker_2').timepicker({
minuteStep: 1,
format: 'HH:mm',
defaultTime: '',
showMeridian: false,
snapToStep: true,
showSeconds:false});
Download the zip file in https://www.malot.fr/bootstrap-datetimepicker/demo.php
It has the Time only picker code.
I have also copied it here
<div class="form-group">
<label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>
<div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
<input type="hidden" id="dtp_input3" value="" /><br/>
</div>
<script>
$('.form_time').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 1,
minView: 0,
maxView: 1,
forceParse: 0
});
</script>
I am trying to create a hotspot portal on a Microtik HAP RB951Ui-2nD. I can add users and remove them and it works fine, but the problem is that I want to use it with facebook authentication basically, everything should be working fine, with apache in my localhost it seems to work perfectly fine, but when I actually use it in mikrotik the facebook features that my login should have, are not there.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WIFI-KECE</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
$(if chap-id)
<form name="sendin" action="$(link-login-only)" method="post">
<input type="hidden" name="username" />
<input type="hidden" name="password" />
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
</form>
<script type="text/javascript" src="/md5.js"></script>
<script type="text/javascript">
<!--
function doLogin() {
document.sendin.username.value = document.login.username.value;
document.sendin.password.value = hexMD5('$(chap-id)' + document.login.password.value + '$(chap-challenge)');
document.sendin.submit();
return false;
}
//-->
</script>
$(endif)
<div class="container">
<div class="col-md-offset-4 col-md-4">
<div class="login-box">
<header>
<h1>Welcome</h2>
<small>Login now! </small>
</header>
$(if error) <p style="color:#ff0000;text-align:center;"><small>$(error)</small> $(endif)
<form class="login" name="login" action="$(link-login-only)" method="post"
$(if chap-id) onSubmit="return doLogin()" $(endif)>
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
<div class="form-group">
<input class="form-control" name="username" type="text" value="$(username)" placeholder="Username" required/>
</div>
<div class="form-group">
<input class="form-control" name="password" type="password" placeholder="Password" />
</div>
<button type="submit" class="btn btn-default btn-block">LOGIN</button>
$(if trial == 'yes')
<div class="second-login text-center">Or you can log in a way like our facebook page.</div>
<div style="margin: 0 auto; width: 150px;">
<div class="fb-like" data-href="https://www.facebook.com/zeroumit" data-layout="button_count" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
<div id="fb-root"></div>
</div>
<script>
window.fbAsyncInit = function() {
FB.init({ appId: '1271642732875588',
status: true,
cookie: true,
xfbml: true,
oauth: true,
version: 'v2.5'});
FB.Event.subscribe('edge.create',
function(response) {
window.location = "$(link-login-only)?dst=$(link-orig-esc)&username=T-$(mac-esc)";
}
);
FB.Event.subscribe('edge.remove',
function(response) {
window.location = "$(link-logout)";
}
);
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
$(endif)
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
<!--
document.login.username.focus();
//-->
</script>
</body>
This is my login.html
Basically the like button, share etc is not there.
You must allow in walled-garden the FB domains
/ip hotspot walled-garden
add dst-host=*facebook* action=allow
add dst-host=*fbcdn* action=allow
add dst-host=*fb* action=allow
add dst-host=*akamai* action=allow
You can try cloud radius billing and social login for mikrotik at www.cloud-hotspot.com
There is nothing wrong with the following piece of mootools code. What I would like to do rewrite it with onsubmit event and without domready as on the second code block. Thanks.
<html>
<head>
<title>Simplest Form Ajax</title>
<script type="text/javascript" src="../mootools/mootools-core-1.3.2fc.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
$('myForm').addEvent('submit', function(e) {
e.stop();
this.set('send', {
onComplete: function(response) {
$('log_res').set('html', response);
}
});
this.send();
});
});
</script>
</head>
<body>
<h3>Send a Form with Ajax</h3>
<form id="myForm" action="ajaxRes.php" method="post">
<div>
<p>Enter something:
<input type="text" name="something" value="John" />
<input type="submit" />
</p>
</div>
</form></br></br>
<h3>Ajax Response</h3>
<div id="log_res"></div>
</body>
</html>
Unfinished code:
<html>
<head>
<title>Simplest Form Ajax</title>
<script type="text/javascript" src="../mootools/mootools-core-1.3.2fc.js"></script>
<script type="text/javascript">
function loadMe() {
...
});
</script>
</head>
<body>
<h3>Send a Form with Ajax</h3>
<form id="myForm" action="ajaxRes.php" onsubmit="loadMe()" method="post">
<div>
<p>Enter something:
<input type="text" name="something" value="John" />
<input type="submit" />
</p>
</div>
</form></br></br>
<h3>Ajax Response</h3>
<div id="log_res"></div>
</body>
</html>
you can use the action attribute of a form with the javascript: prefix (http://jsfiddle.net/mT7WB/)
Here could be a possible implementation (code not tested):
<html>
<head>
<title>Simplest Form Ajax</title>
<script type="text/javascript" src="../mootools/mootools-core-1.3.2fc.js"></script>
<script type="text/javascript">
function submit() {
var obj = {};
["something","somethingElse"].each(function(n) {
obj[n] = ("myForm").getElement("input[name="+n+"]").get("value");
});
new Request.HTML({"url" : "ajaxRes.php"}).addEvent("success", function(resp) {$("log_res").adopt(resp);}).post(obj);
});
</script>
</head>
<body>
<h3>Send a Form with Ajax</h3>
<form id="myForm" action="javascript:submit()" method="post">
<div>
<p>Enter something:
<input type="text" name="something" value="John" />
<input type="text" name="somethingElse" value="John" />
<input type="submit" />
</p>
</div>
</form></br></br>
<h3>Ajax Response</h3>
<div id="log_res"></div>
</body>
</html>
Cheers !
in the following, I am using filter('input:text,textarea') to set input fields as read only, (and make them opaque). However, this selector is selecting only the text inputs, and not the textarea. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>setReadOnly() Test</title>
<link rel="stylesheet" type="text/css" href="../styles/core.css">
<link rel="stylesheet" type="text/css" href="test.setReadOnly.css">
<script type="text/javascript" src="../scripts/jquery-1.4.js"></script>
<script type="text/javascript" src="../scripts/jqia2.support.js"></script>
<script type="text/javascript">
(function($){
$.fn.setReadOnly = function(readonly) {
return this.filter('input:text,textarea')
.attr('readOnly',readonly)
.css('opacity', readonly ? 0.5 : 1.0)
.end();
};
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
$('#sameAddressControl').click(function(){
var same = this.checked;
$('#billAddress').val(same ? $('#shipAddress').val():'');
$('#billCity').val(same ? $('#shipCity').val():'');
$('#billState').val(same ? $('#shipState').val():'');
$('#billZip').val(same ? $('#shipZip').val():'');
$('#bill_random_field').val(same ? $('#ship_random_field').val():'');
$('#billingAddress input').setReadOnly(same);
});
});
</script>
</head>
<body>
<div data-module="Test setReadOnly()">
<form name="testForm">
<div>
<label>First name:</label>
<input type="text" name="firstName" id="firstName"/>
</div>
<div>
<label>Last name:</label>
<input type="text" name="lastName" id="lastName"/>
</div>
<div id="shippingAddress">
<h2>Shipping address</h2>
<div>
<label>Street address:</label>
<input type="text" name="shipAddress" id="shipAddress"/>
</div>
<div>
<label>City, state, zip, random_field:</label>
<input type="text" name="shipCity" id="shipCity"/>
<input type="text" name="shipState" id="shipState"/>
<input type="text" name="shipZip" id="shipZip"/>
<textarea name="random_field" rows="2" cols="20" id="ship_random_field"></textarea>
</div>
</div>
<div id="billingAddress">
<h2>Billing address</h2>
<div>
<input type="checkbox" id="sameAddressControl"/>
Billing address is same as shipping address
</div>
<div>
<label>Street address:</label>
<input type="text" name="billAddress"
id="billAddress"/>
</div>
<div>
<label>City, state, zip, random_field:</label>
<input type="text" name="billCity" id="billCity"/>
<input type="text" name="billState" id="billState"/>
<input type="text" name="billZip" id="billZip"/>
<textarea name="random_field" rows="2" cols="20" id="bill_random_field"></textarea>
</div>
</div>
</form>
</div>
</body>
</html>
Try to change the line $('#billingAddress input').setReadOnly(same); to $('#billingAddress input,textarea').setReadOnly(same);
Update
Actually, must be like you said in the comment: $('#billingAddress input,#billingAddress textarea').