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>
Related
I have created a simple form page for people to submit change requests and am struggling to get the invalid validation working for the input field where type="file".
I have written a function to run the object through custom validation (similar to how I handle Email validation), but I never receive the red outline and error message like I do for email. I am logging my "Not valid" message successfully when I try to upload more than 5 files, but still receive a green outline and the valid message on the input.
I think I've tried so much at this point I'm just confusing myself. I was able to get both valid and invalid messages at one point, but nothing beyond that.
I am trying to avoid validating every input individually if possible.
Thanks for any help in advance!
<!DOCTYPE html>
<html lang="en" class="vh-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="AWright" />
<link rel="icon" href="##URL_FAV_ICON##" />
<title>Change Request Form</title>
<!-- Bootstrap 5 CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- /Bootstrap 5 CSS-->
<!-- Axios Library -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- /Axios Library -->
<style></style>
<script src="https://cdn.jsdelivr.net/npm/vue#3.0.11"></script>
</head>
<body>
<div id="awApp" class="d-flex flex-column vh-100">
<!-- FIXED NAVBAR AND/OR HEADER -->
<header>
<nav
class="navbar navbar-expand-md navbar-light fixed-top bg-light"
></nav>
</header>
<!-- / HEADER/NAVBAR -->
<!-- MAIN CONTENT -->
<main role="main" class="flex-shrink-0">
<div class="container">
<div class="row mt-5 pt-5">
<div class="col-md-8 offset-md-2">
<h2 class="mt-5 text-center" style="font-size: 3rem">
Program Change Request Form
</h2>
<p class="text-center">
Please complete the below form to submit your program change
request:
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="card shadow p-3 my-5">
<div class="card-body">
<form
novalidate
class="needs-validation"
name="mainForm"
#submit="submitForm"
method="post"
ref="requestForm"
>
<div class="row mb-2">
<div class="col-md-6 mb-3">
<label for="firstname" class="form-label mb-0"
>First Name*</label
>
<input
id="firstname"
type="text"
name="firstname"
class="form-control"
v-model="contact.firstName"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a first name.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastname" class="form-label mb-0"
>Last Name*</label
>
<input
id="lastname"
type="text"
name="lastname"
class="form-control"
v-model="contact.lastName"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a last name.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="email" class="form-label mb-0"
>Email Address*</label
>
<input
id="email"
type="text"
name="email"
class="form-control"
v-model="contact.email"
pattern="\b[a-zA-Z0-9._%-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,100}\b"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a valid email.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="name" class="form-label mb-0"
>Name of Request*</label
>
<input
id="name"
type="text"
name="RequestName"
class="form-control"
v-model="contact.name"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a name for the change request being made.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="description" class="form-label mb-0"
>Description of Request*</label
>
<textarea
id="description"
type="text"
name="RequestDetails"
class="form-control"
v-model="contact.description"
required
></textarea>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a description for the request being made.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="due_date" class="form-label mb-0"
>Estimated Due Date*</label
><br />
<em
><small
>Please note that this subject to change.</small
></em
>
<input
id="due_date"
type="text"
name="CompletionDate"
class="form-control"
v-model="contact.dueDate"
v-maska="dateMask"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a desired due date for the change request
in MM/dd/yyyy format.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="files" class="form-label mb-0"
>Please attach any assets (images, font files, etc)
here to upload*:</label
><br />
<small
><em
>*Maximum of 5 files can be uploaded at a time</em
></small
>
<input
type="file"
class="form-control"
id="files"
name="files"
#change="handleFilesUpload( $event )"
multiple
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please do not upload more than 5 files at a time.
</div>
</div>
</div>
<button
type="submit"
class="btn btn-primary px-4 py-2"
value="Submit"
>
Submit
</button>
<div>
<small class="form-text text-muted">
<em>* Denotes a required field.</em>
</small>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- /MAIN CONTENT -->
</div>
<!--Bootstrap 5 JS-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<!--/Bootstrap 5 JS-->
<!-- Maska JS -->
<script src="https://cdn.jsdelivr.net/npm/maska#latest/dist/maska.js"></script>
<!-- /Maska JS -->
<!-- VUE APP CODE -->
<script>
const app = Vue.createApp({
data() {
return {
currentYear: new Date().getFullYear(),
now: new Date().toISOString(),
contact: {
firstName: "##firstname##",
lastName: "##lastname##",
email: "##email##",
name: "",
description: "",
dueDate: "",
},
files: "",
};
},
methods: {
submitForm(e) {
const isValid =
this.contact.firstName &&
this.contact.lastName &&
this.contact.email &&
this.contact.name &&
this.contact.description &&
this.contact.dueDate &&
this.validEmail(this.contact.email) &&
this.files.length <= 5 &&
this.multipleFilesValidation(this.files);
e.target.classList.add("was-validated");
if (!isValid) {
e.preventDefault();
console.log("Not valid");
} else {
e.preventDefault();
this.postToZapier();
console.log("Success");
}
},
multipleFilesValidation: function (files) {
if (this.files.length > 5) {
console.log(this.files);
return false;
} else {
return true;
}
},
handleFilesUpload(event) {
this.files = event.target.files;
},
postToZapier() {
console.log(this.files);
var formData = new FormData();
for (var i = 0; i < this.files.length; i++) {
let file = this.files[i];
formData.append("files[" + i + "]", file);
}
console.log(formData);
var url = "https://hooks.zapier.com/hooks/catch/159749/b9h6kww/";
var requestForm = this.$refs.requestForm;
console.log(requestForm);
axios
.post(url, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then(function () {
console.log("Success!");
setTimeout(function () {
requestForm.submit();
}, 0);
})
.catch(function () {
console.log("Fail.");
});
},
validEmail: function (email) {
const re = /\b[a-zA-Z0-9._%-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,100}\b/;
return re.test(email);
},
},
computed: {
dateMask: function () {
return "##/##/####";
},
},
});
app.directive("maska", Maska.maska);
app.mount("#awApp");
</script>
<!-- /VUE APP CODE-->
</body>
</html>
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 have a simple modal form to get comment. When the Submit button or the Close button is clicked, the modal form is supposed to close, but it doesn't.
The following is code snippet from my controller:
$ionicModal.fromTemplateUrl('templates/sharing-comment.html', {
scope: $scope
}).then(function (modal) {
$scope.commentForm = modal;
});
// Triggered in the comment modal to close it
$scope.closeCommentForm = function () {
$scope.commentForm.hide();
};
// Open the comment modal
$scope.showCommentForm = function () {
$scope.commentForm.show();
$scope.popover.hide();
};
The following is code snippet from my modal form:
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Submit Comment on Sharing</h1>
<div class="buttons">
<button class="button button-clear" ng-
click="closeCommentForm()">Close</button>
</div>
</ion-header-bar>
<ion-content>
<form id="commentForm" name="commentForm" ng-submit="submitComment()">
<div class="list">
<label class="item item-input">
<span class="input-label">Your Comment</span>
<textarea type="text" ng-model="mycomment.comment"></textarea>
</label>
<label class="item">
<button class="button button-block button-positive"
type="submit">Submit</button>
</label>
</div>
</form>
</ion-content>
</ion-modal-view>
Try this, I made codepen for you
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('templates/modal.html', {
scope: $scope
}).then(function(modal) {
$scope.commentForm = modal;
});
$scope.createContact = function() {
$scope.commentForm.hide();
};
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Modal</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="AppCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Contacts</h1>
<div class="buttons">
<button class="button button-icon ion-compose" ng-click="commentForm.show()">
</button>
</div>
</ion-header-bar>
<script id="templates/modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">New Contact</h1>
<button class="button button-clear button-primary" ng-click="commentForm.hide()">Cancel</button>
</ion-header-bar>
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">First Name</span>
<input ng-model="newUser.firstName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Last Name</span>
<input ng-model="newUser.lastName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
<input ng-model="newUser.email" type="text">
</label>
<button class="button button-full button-positive" ng-click="createContact(newUser)">Create</button>
</div>
</ion-content>
</ion-modal-view>
</script>
</body>
</html>
Ionic:
I have a list item like this:
<label class="item item-select item-button-left">
<button class="button button-positive" ng-click="something()" >
<i class="icon ion-android-add-circle" ></i>
</button>
<label>My Label</label>
<select>
<option ng-repeat="x in xs" value="{{ x.id }}">{{ x.name }}</option>
</select>
</label>
Whenever I click button, something() is being called but something is called when I click on anything (label or dropdown). And dropdown not working.
Also, the html structure might not be correct. My requirement is to "add" a new item if there is no required item in dropdown. I know we can add "Add new one" as first element of select and when we click it, it will let me add (using ng-change function). But I feel that having a + icon is much better. What do you say ?
How about this examples?
(Note that button must be outside the <label class="item-input item-select"> element)
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.addItem = function() {
var i = $scope.xs.length;
$scope.xs.push({ id: i, name: "item"+i });
};
$scope.xs = [];
for (var i=0; i<5; i++) {
$scope.xs.push({ id: i, name: "item"+i });
}
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic List Directive</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic Delete/Option Buttons</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<!-- first example -->
<div class="item item-button-left">
<button class="button button-positive" ng-click="addItem()">
<i class="icon ion-android-add-circle"></i>
</button>
<label class="item-input item-select">
<div class="input-label">
My Label
</div>
<select>
<option ng-repeat="x in xs" value="{{ x.id }}">{{ x.name }}</option>
</select>
</label>
</div>
<!-- second example -->
<div class="item item-input-inset">
<button class="button button-positive" ng-click="addItem()">
<i class="icon ion-android-add-circle"></i>
</button>
<label class="item-input-wrapper item-select">
<div class="input-label">
My Label
</div>
<select>
<option ng-repeat="x in xs" value="{{ x.id }}">{{ x.name }}</option>
</select>
</label>
</div>
<hr/>
<pre>xs.length = {{xs.length|json}}</pre>
</div>
</ion-content>
</body>
</html>
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.