Pop up window automatically on page load - html

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

ajax is not working even though I pressed the button which is allocated for the function

<%# 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="아이디 입력" />
&nbsp
<!-- <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(){

How to apply form validation in codeigniter4 with controller and view?

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.

Html link loads but doesn't function

<!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)

Using Icecuim but hangs to load json file

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>

In jquery-mobile how do you programmatically add page elements that have all the css?

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.