I'm trying to allow a pop up to display always when a user is basically unregistered and wishes to view the certain page. I saw an example of how to do it but I am completely stuck it's not appearing on my page. Any ideas?
Thanks!
Image: http://puu.sh/cr1Zz/1b5da28635.png
My code on that page(CSS is listed in the image above)
<?php
session_start();
include ('../includes/config.php');
include ('../includes/header.php');
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Honda | </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--start lightbox -->
<link rel="stylesheet" type="text/css" href="../css/jquery.lightbox.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.lightbox.js"></script>
<script>
// Initiate Lightbox
$(function() {
$('.gallery1 a').lightbox();
});
</script>
</head>
<body>
<div class='modalDialog'>You cannot view this page! Please register</div>
<!--start header-->
<div class="h_bg">
<div class="wrap">
<div class="wrapper">
<div class="header">
<div class="logo">
<img src="../images/logo.png">
</div>
<div class="cssmenu">
<ul>
<li><span>Home</span></li>
<li><span>About</span></li>
<li class="active" class="has-sub"><span>Gallery</span>
</li>
<li class="last"><span>Contact</span></li>
<div class="clear"></div>
<div class="search">
<h2>search</h2>
<form>
<input type="text" value="" placeholder="Enter Your search...">
<input type="submit" value="">
</form>
</div>
<?php
if(isset($_POST["submit"])){
if(!empty($_POST['user']) && !empty($_POST['pass'])) {
$user=$_POST['user'];
$pass=$_POST['pass'];
$pass = strip_tags($pass);
$pass = md5($pass); // md5 is used to encrypt your password to make it more secure.
$query=mysql_query("SELECT * FROM login WHERE username='".$user."' AND password='".$pass."'");
$numrows=mysql_num_rows($query);
if($numrows!=0)
{
while($row=mysql_fetch_assoc($query))
{
$dbusername=$row['username'];
$dbpassword=$row['password'];
}
if($user == $dbusername && $pass == $dbpassword)
{
session_start();
$_SESSION['sess_user']=$user;
/* Redirect browser */
header("Location: member.php");
}
} else {
echo "<div class='results'>Invalid username or password!</div>";
}
} else {
echo "All fields are required!";
}
}
?>
<div class="search1">
<h2>login/Register</h2>
<form action="" method="POST">
<label>Username:</label>
<input type="text" name="user" required />
<label>Password:</label>
<input type="password" name="pass" required />
<input type="submit" value="Login" name="submit" class="submit" />
<br><br>
<center>
<h2><p>Register</p></h2>
</center>
</form>
</div>
</div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- start content -->
<div class="footer_bg">
<div class="wrap">
<div class="wrapper">
<div class="footer2">
<div class="copy">
<p class="w3-link">© </p>
</div>
<div class="f_nav">
<ul>
<li>Skype</li>
<li>Linked in</li>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Although you include jQuery, the modal dialog is part of the jQueryUI. But that on its own won't solve your problem. You have declared a div with the class modalDialog, so I suppose this is the line to be shown in the dialog. I would suggest you to use id's instead of classes because a class covers multiple document objects, and you really want to show one dialog here. From the jQueryUI docs:
<div id="dialog" title="Please register">
<p>You cannot view this page! Please register</p>
</div>
Add the jQuery call:
$(function() {
$( "#dialog" ).dialog();
});
And that should work just fine
If you decide to go with the lightbox modal dialog your code should look like:
<div id="test-modal" class="white-popup-block mfp-hide">
<h1>lease register</h1>
<p>You cannot view this page! Please register</p>
<p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>
To call the code use:
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
preloader: false,
focus: '#username',
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
Related
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>회원가입</title>
<style type="text/css">
div{
background-image: "../img/space.jpeg"
}
</style>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$("#ajax_idDuplicate").click(function(){
// userID 변수에 id의 입력된 값을 가져오게 함
var id = $("#id").val();
$.ajax({
type: "POST", // GET or POST 전송방법
url: "../UserIdCheckServlet", // 이쪽으로 보낸다(호출URL)
data: {"id": id}, // userID 이름에 userID 데이터 값을 넣어서 보낸다
success: function(result){ // 만약 성공적으로 수행되었다면 result로 값반환
if(result == 1){ // id가 checkMessage인 것에 아래 텍스트 출력
$('#checkMessage').html('사용할 수 있는 아이디입니다.');
} else {
$('#checkMessage').html('사용할 수 없는 아이디입니다.');
}
// id 가 exampleModal인 모달함수 실행시켜서 모달 실행시키기 위해
$('#checkModal').modal("show");
},
error: function(xhr,status,error){
alert(error);
}
});
});
</script>
</head>
<body>
<div id="join-box">
<div>
<a href="<%=request.getContextPath()%>/MainServlet"><img src="
<%=request.getContextPath()%>/img/joinForm/x_button.jpg" border="0" width="15" height="15"
align="right"></a>
<br>
<h2>회원가입</h2><br/>
<span style="color: red;">${msg }</span>
<form action="<%=request.getContextPath()%>/JoinServlet" method="post">
<input type="text" name="name" class="name" placeholder="이름" /><br>
<input type="text" name="id" id="id" class="id" placeholder="아이디 입력" />
 
<!-- <button class="duplicate_check">중복확인</button> -->
<!-- 부트스트랩 테스트 -->
<!-- Button trigger modal -->
<button type="button" value="중복확인" id="ajax_idDuplicate" class="social-signin" data-bs-toggle="modal"data-bs-target="#checkModal">
중복확인
</button>
<!-- Modal -->
<div class="modal fade" id="checkModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">아이디 중복 확인</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="checkMessage">
<!-- 적을 내용 (알람창) -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
</div>
</div>
</div>
</div>
<!-- 부트스트랩 테스트 -->
<input type="password" name="pw" placeholder="비밀번호 입력" /><br>
연락처 : <br/><select name="phone1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="018">018</option>
<option value="019">019</option>
</select>
-<input type="text" class="phone" name="phone2">
-<input type="text" class="phone" name="phone3"><br>
성별 :
남자 <input type="radio" name="gender" value="man">
여자 <input type="radio" name="gender" value="woman"><br>
</div>
<div>
<input type="submit" name="signup_submit" value="회원가입" />
</form>
<br>
<br>
<img src=" <%=request.getContextPath()%>/img/home.png" border="0" width="30" height="30" align="center">
</body>
</html>
I am trying to use AJAX, and I am struggling with a problem which I can't find anymore.
Even though I press the button which has id of ajax_idDuplicate, the function which I decided to activate through the button is not working.
and there is no error in a console window and on my web browser. Could you guys help me for a while?
Dom needs to be loaded before you call your function
<script type="text/javascript">
$(document).ready(function() {
$("#ajax_idDuplicate").click(function(){
Here is defined codeigniter4 controller with form validation and view file. How can be reflected on view pages with errors.
Controller code is not reflected on view page . Could anyone clarify the issue of codeigniter4 validation.
Controller
public function register_user(){
helper(['form', 'url']);
$this->validation = \Config\Services::validation();
$validation = $this->validation;
$rules = [
'user_name' => [
'required' => 'All accounts must have usernames provided',
],
];
$this->validation->setRules([
'user_name' => 'required|min_length[2]',
],
$rules
);
if (! $this->validate($rules))
{
$validationErrors = $this->validation->getErrors();
return redirect()->back()->withInput()->with('errors', $validationErrors);
}
}
View
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login Registration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title">
</head>
<body>
<style type="text/css">
.error{color: red;}
</style>
<span style="background-color:red;">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Please do Registration here</h3>
</div>
<div class="panel-body">
<form role="form" method="post" action="<?php echo base_url('user/register_user'); ?>">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Please enter Name" name="user_name" type="text" autofocus>
<span class="error"><?php echo $validation->getError('user_name'); ?></span>
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Register" name="register" >
</fieldset>
</form>
<center><b>You have Already registered ?</b> <br></b> Please Login</center>
</div>
</div>
</div>
</div>
</div>
</span>
</body>
</html>
Following is the current result:
you can try this controller
public function register_user(){
helper('form');
if (! $this->validate([
'user_name' => 'required|min_length[3]|max_length[255]'
]))
{
echo view('user/login');
}
else{
echo view('user/login_view');
}
}
and this view:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login Registration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title">
</head>
<body>
<h2></h2>
<style type="text/css">
.error{color: red;}
</style>
<span style="background-color:red;">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Please do Registration here</h3>
</div>
<div class="panel-body">
<form role="form" method="post" action="<?php echo base_url('user/register_user'); ?>">
<fieldset>
<div class="form-group">
<?= esc($user_name); ?>
<span class="error"><?= \Config\Services::validation()->listErrors(); ?></span>
<input class="form-control" placeholder="Please enter Name" name="user_name" type="text" autofocus>
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Register" name="register" >
</fieldset>
</form>
<center><b>You have Already registered ?</b> <br></b> Please Login</center>
</div>
</div>
</div>
</div>
</div>
</span>
</body>
</html>
Dont forget to add route if this use:
$routes->add('/login', 'Login::login');
$routes->add('/user/register_user', 'User::register_user');
This post is not validated but the response of Wandi Tiger is ok for me.
With several rules you can do simply :
$validation = $this->validate([
'user_name' => 'required|min_length[10]|max_length[255]',
'user_pass' => 'required|min_length[10]|max_length[255]'
]);
if($validation)
{
echo view('user/login');
}
else{
echo view('user/login_view');
}
// Keep the old input values upon redirect so they can be used by the old() function
return redirect()->back()->withInput();
// Set a flash message
return redirect()->back()->with('foo', 'message');
You have combined both in your example which will not work
because the variable $validation which you are trying to access in view doesn't contain any data because you have not assigned any data to it
So you have to replace
if (! $this->validate($rules))
{
$validationErrors = $this->validation->getErrors();
return redirect()->back()->withInput()->with('errors', $validationErrors);
}
with this code:
if (! $this->validate($rules))
{
$data['validation'] = $this->validatior;
return view('view-name',$data); //note don't forget to replace view-name.
}
Don't change anything in the view file.
<!DOCTYPE html>
<html>
<head>
<title>Astro Tools</title>
<meta charset="utf-8">
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<link rel="stylesheet" href="js/jquery.mobile-1.4.3.min.css" type="text/css"/>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.3.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Astrophoto Tools</h1>
</div>
<div data-role="content">
<p>
Welcome to Astrophoto Tools. These simple calcualting tools will help you to avoid Star Trials.
</p>
<ul data-role="listview" data-inset="true">
<li>Basic Tool</li>
<li>Advanced Tool</li>
<li>Help</li>
<li>About</li>
</ul>
</div>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
///////////////////////////////////////////////////////////////////////////////
Here is the basic.html
////////////////////////
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title>jQuery Mobile Web App</title>
<link rel="stylesheet" href="js/jquery.mobile-1.4.3.min.css" type="text/css"/>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.3.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#lens").on("keyup", function () {
var lens = $(this).val();
//var fullframe = 0; // initialize the sum to zero
var fullframe = 600 / lens;
$('#fullframe').val(fullframe.toFixed(2));
var apsccanon = 600 / (lens * 1.6);
$('#apsccanon').val(apsccanon.toFixed(2));
var apscnikon = 600 / (lens * 1.5);
$('#apscnikon').val(apscnikon.toFixed(2));
var apscolympus = 600 / (lens * 2.0);
$('#apscolympus').val(apscolympus.toFixed(2));
});
});
</script>
<style type="text/css">
body,td,th {
color: #CCC;
}
</style>
</head>
<body>
<div data-role="page" id="page" data-theme="b">
<div data-role="header">
<h3 style="color:#3CF">Astrophoto Tool</h3>
</div>
<div data-role="content">
<div align="center" style="color:#0F0">No Star Trails Exposure</div>
<p align="center" style=" color:#FFFF00">Rule 600 </p>
</div>
<div data-role="content" data-theme="b">
<form action="">Lens: Focal Length (mm)
<br>
<input type='text' id='lens' style="color:#FF6"/>
<br>Full Frame: (Time in Seconds)
<br>
<input type='text' id='fullframe' value="" style="color:#0F0" readonly>
<br>APS-C (Canon): (Time in Seconds)
<br>
<input type='text' id='apsccanon' value="" style="color:#0F0" readonly />
<br>APS - C (Nikon/Sony/Pentax): (Time in Seconds)
<br>
<input type='text' id='apscnikon' value="" style="color:#0F0" readonly />
<br>APS - C (Olympus/Panasonic): (Time in Seconds)
<input type='text' id='apscolympus' value="" style="color:#0F0" readonly />
<input name="Reset" type="reset" value="Reset">
</form>
</div>
<div data-role="footer">
<h4 style="color:#3CF">© Ranjan Mitra 2015</h4>
</div>
</div>
</div>
</body>
</html>
When I run the basic.html it works without a problem but whenever I click the link to basic.html in the index.html the calculations do not work at all. Where am I going wrong? please help.
////////////////////////////////////////////////////////////////////////
You are missing the value=""in your first <input>
<input type='text' id='lens' ???? style="color:#FF6"/>
<br>Full Frame: (Time in Seconds)
I am using the icenium weather example from telerik platorm icenium.com to load a data file json for an test app I am doing
my json is as follows
[
{
"screen_id": "course_outline",
"screen_title": "NICMA Child Minding App - Course Outline",
"screen_display_type": "/json_schema/P14_navigation.schema.json",
"updated": "1371030938",
"author": [
{
"author_name": "Andrew Moran",
"author_url": "http://people.learningpool.com/user/id"
}
],
"comments": "authoring tool metadata, not used in app",
"authoring_tool": {
"version": "x.x",
"href": ""
},
"copyright": "2013 - Learning Pool",
"screen_content": {
"screen_title": "Child Minding Navigation",
"start_text": "Text at the start of the screen",
"navigation_items": [
{
"screen_id": "food_hygiene_legislation_doc",
"screen_display_type": "/json_schema/P03_content_screen.schema.json",
"display_text": "Home"
}
],
"end_text": ""
}
]
I just made a copy of the weather funciton and named it course-outline.js
and added it into my scripts
(function (global) {
var WeatherViewModel,
app = global.app = global.app || {};
WeatherViewModel = kendo.data.ObservableObject.extend({
weatherDataSource: null,
init: function () {
var that = this,
dataSource;
kendo.data.ObservableObject.fn.init.apply(that, []);
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "data/course_outline.json",
dataType: "json"
}
}
});
that.set("weatherDataSource", dataSource);
}
});
app.weatherService = {
viewModel: new WeatherViewModel()
};
})(window);
But for some reason when i click the weather button now it hangs even though ive told the template to find screen_title any ideas
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script src="scripts/course-outline.js"></script>
<script src="scripts/login.js"></script>
<script src="scripts/location.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<!--Home-->
<div id="tabstrip-home"
data-role="view"
data-title="Home">
<div class="view-content">
<h1>Welcome!</h1>
<a id="skin-change" data-role="button" data-click="app.changeSkin">Flat</a>
<p>
Icenium™ enables you to build cross-platform device applications regardless of your
development platform by combining the convenience of a local development toolset with the
power and flexibility of the cloud.
</p>
<div class="img"></div>
</div>
</div>
<!--Login-->
<div id="tabstrip-login"
data-role="view"
data-title="Login"
data-model="app.loginService.viewModel">
<div class="view-content">
<div class="logo"></div>
<h3 data-bind="invisible: isLoggedIn">Enter your credentials:</h3>
<h1 class="welcome" data-bind="visible: isLoggedIn">Welcome, <span data-bind="text: username"></span>!
</h1>
<div class="buttonArea">
<input type="submit" id="logout" data-role="button" data-bind="click: onLogout, visible: isLoggedIn" class="login-button" value="Logout" />
</div>
<form data-bind="events: { keyup: checkEnter }">
<ul data-role="listview" data-style="inset" data-bind="invisible: isLoggedIn">
<li>
<label>
Username
<input type="text" data-bind="value: username" />
</label>
</li>
<li>
<label>
Password
<input type="password" data-bind="value: password" />
</label>
</li>
</ul>
<div class="buttonArea">
<input type="submit" id="login" data-role="button" data-bind="click: onLogin, invisible: isLoggedIn" class="login-button" value="Login" />
</div>
</form>
</div>
</div>
<!--Location-->
<div id="tabstrip-location"
data-role="view"
data-title="Location"
data-init="app.locationService.initLocation"
data-show="app.locationService.show"
data-hide="app.locationService.hide"
data-model="app.locationService.viewModel"
data-stretch="true">
<div id="no-map" data-bind="invisible: isGoogleMapsInitialized">
Location requires internet connection to display the map.
</div>
<div id="map-search-wrap" data-bind="visible: isGoogleMapsInitialized">
<button id="map-navigate-home" data-bind="click: onNavigateHome"></button>
<form onsubmit="return false;">
<input id="map-address" type="search" data-bind="value: address" placeholder="Address" />
<input id="map-search" type="submit" value="" data-bind="click: onSearchAddress" />
</form>
</div>
<div id="map-canvas" data-bind="visible: isGoogleMapsInitialized"></div>
</div>
<!--Weather-->
<div id="tabstrip-weather"
data-role="view"
data-title="Weather"
data-model="app.weatherService.viewModel">
<div class="weather">
<p class="weather-title">Course Title</p>
<div class="separator">
<div class="dark"></div>
<div class="light"></div>
</div>
<ul class="forecast-list"
data-role="listview"
data-bind="source: weatherDataSource"
data-template="weather-forecast-template">
</ul>
</div>
</div>
<!--Weather forecast template-->
<script type="text/x-kendo-tmpl" id="weather-forecast-template">
<div>
<div class="position-left">
<span class="weather-info date">${screen_title}</span>
</div>
<div class="position-right">
<span class="weather-info temperature high">${screen_title}<sup>°</sup></span>
<span class="weather-info temperature low">${screen_title}<sup>°</sup></span>
</div>
</div>
</script>
<!--Layout-->
<div data-role="layout" data-id="tabstrip-layout">
<!--Header-->
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<!--Footer-->
<div data-role="footer">
<div data-role="tabstrip">
Home
Login
Location
Weather
</div>
</div>
</div>
</body>
</html>
When this code runs you can see it doesn't render the programmatically added input field as a mobile styled element. I could force it to by adding all the classes that get put in when a page is rendered (commented out). Is there an easier way?
http://jsfiddle.net/mckennatim/KKTr4/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
</head>
<body>
<div id="thelists" data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<h3>Add List</h3>
<form>
<div data-role="controlgroup" id="addwhat">
<input type="text" name="inp0" class="inp" />
</div>
<div data-role="controlgroup" data-type="horizontal" class="aisubmit">
<input type="submit" data-theme="b" id="addinput" value="Add Input"/>
</div>
</form>
</div><!-- /content -->
</div><!-- /page -->
<script>
var ct =0;
$('body').on('click', "#addinput", function (e) {
ct++;
e.stopImmediatePropagation();
e.preventDefault();
//to add form elemnt you have to add all the class css stuff
//$('#addwhat').append('<input type="text" name="list' + ct + '" class="inp ui-input-text ui-body-c ui-corner-all ui-shadow-inset" />');
$('#addwhat').append('<input type="text" name="list' + ct + '"/>');
});
</script>
</body>
</html>
$('#thelists').trigger('create');
should do the trick.