I have included datatables cdn but it is not working - javascript

I have created only one file index.php
in the header part I have included CSS link form the datatables.net
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<title>Crud application</title>
</head>
I have given the id as table in body section
<table class="table" id="mytable">
<thead>
<tr>
<th scope="col">Sno</th>
<th scope="col">Title</th>
<th scope="col">Descriptioin</th>
<th scope="col">Action</th>
</tr>
</thead>
I have included JS CDN from datables.net and also the function at the end of the body tag
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</body>
but the tables are displaying as shown in the datatables.net.
there are no errors in the console.
full code
<?php
//INSERT INTO `note` (`sno`, `title`, `description`, `tstamp`) VALUES (NULL, 'Buy fruits', 'buy fruits now', current_timestamp());
$insert = false;
$server = "localhost";
$user = "root";
$password = "";
$dbase = "notes";
// create a connection
$conn = mysqli_connect($server, $user, $password, $dbase);
// die connection if not connected
if(!$conn){
die("sorry connection not established".mysqli_connect_error());
}
// updating the database
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$title = $_POST['title'];
$description = $_POST['description'];
}
global $title; global $description;
// adding the query
$sqld = "INSERT INTO `note` (`title`, `description`) VALUES ('$title', '$description')";
$resultd = mysqli_query($conn, $sqld);
// checking the query wether updated
if($resultd){
//echo "success";
$insert = true;
}
else{
echo "not success". mysqli_connect_error();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<title>Crud application</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">PHP Crud</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<?php
if($insert){
echo"<div class='alert alert-success alert-dismissible fade show' role='alert'>
<strong>Success</strong> your notes submitted successfully.
<button type='button' class='close' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>";
}
?>
<div class="container my-4">
<form action="/crud/index.php" method="POST">
<h2>Add a note</h2>
<div class="form-group">
<label for="title">Note title</label>
<input type="text" class="form-control" id="title" name="title" aria-describedby="emailHelp" placeholder="note">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="description">note description</label>
<textarea class="form-control" id="description" name="description" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Add note</button>
</form>
</div>
<div class="container">
<table class="table" id="mytable">
<thead>
<tr>
<th scope="col">Sno</th>
<th scope="col">Title</th>
<th scope="col">Descriptioin</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM `note`";
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_assoc($result)){
echo "<tr>
<th scope='row'>". $row['sno']."</th>
<td>". $row['title']."</td>
<td>". $row['description']."</td>
<td>Actions</td>
</tr>";
}
?>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</body>
</html>
6) screenshot
screentshot of tables


(1) Change $('#myTable').DataTable(); to $('#mytable').DataTable();
this worked fine for me and displayed my search table

Related

Unable to properly add TR to HTML from JS script

I keep getting an indexing error while trying to add TR tags to my HTML using the innerHTML attribute. This is what the JS script looks like.
var myTbody = document.querySelector(".table");
var button = document.querySelector(".add-stock");
var input = document.querySelector(".stock-input");
button.addEventListener("click", function () {
var td = document.querySelectorAll("td");
var row = myTbody.insertRow(td.length + 1);
var cell_univeral = row.insertCell(td.length - 1);
cell_univeral.innerHTML = input.value;
});
And this is the related html document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Technical</title>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="{{url_for('static', filename='css/technical.css')}}"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Home</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="#">Technical</a>
<a class="nav-link" href="#">Alpha-Beta</a>
<a class="nav-link" href="#">Partition</a>
<a class="nav-link disabled">More</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="content">
<div class="top-form">
<form action='#' method="post">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"
>Ticker Symbols</label
>
<input
type="text"
class="form-control stock-input"
id="exampleInputEmail1"
aria-describedby="emailHelp"
name="nm"
/>
<div id="symbol" class="form-text">Add stocks one at a time</div>
</div>
<div class="buttons">
<div class="add-button">
<button type="button" class="btn btn-success add-stock">Add</button>
</div>
<div class="submit-button">
<button type="submit" class="btn btn-primary submit-btn">
Submit
</button>
<div class="spinner-border my-spinner hidden" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</form>
</div>
<div class="bottom-from">
<table class="table table-hover">
<thead>
<th>Symbol <span class="counter"></span></th>
</thead>
<tbody class="table-body">
</tbody>
</table>
<div class="alert alert-warning" role="alert">
It may take longer for multiple stocks
</div>
</div>
</div>
</div>
<script src="{{url_for('static', filename='script/technical.js')}}"
/></script>
</body>
</html>
Note that for the first two click events i have no problems whatsoever though i get this error when i click again
Uncaught DOMException: Index or size is negative or greater than the allowed amount
It seems like I'm trying to change the innerHTML of an item that is out of range but i honestly don't know what the actual problem is and how to fix it. Thank you for your help

datatables is not working when fetching data from database

I am using DataTables to have a pagination.
I think I set the script correctly, since I followed the instruction in their website. But feel free to pinpoint if there's any wrong/mistake to the indicated script link
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin Reservation Management</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/datepicker3.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$('#myTable').DataTable();
});
</script>
<!--Custom Font-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style type="text/css">
td,tr {
white-space: nowrap;
width: 45%;
}
th{
text-align: center;
}
form {
display: inline;
}
</style>
</head>
And now this is my table and stuff, I am fetching the datas from my database.
I did some research here in Stackoverflow, regarding to this issue and the results that I've found was they did not put and which I included, but feel free to pinpoint if I haven't included any.*
php
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<div class="row">
<ol class="breadcrumb">
<li> <em class="fa fa-home"></em></li>
<li class="active">Manage Room</li>
</ol>
</div>
<div class="row">
<div class="col-lg-12">
<br>
<h3> Super Admin Reservation Management </h3>
<hr>
<!-- ################### FUNCTIONALITY ####################### -->
<!-- ################### FUNCTIONALITY ####################### -->
<div class="container">
</div>
<br>
<div class="container">
<table class="table table-bordered" id="myTable" style="background-color: white;" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th> Room Number</th>
<th> Room Availability </th>
<th> Action </th>
</tr>
</thead>
<!-- ############################################# FETCHING DATA FROM THE DATABASE ######################################################### -->
<?php
$connection = mysqli_connect("localhost", "root");
$db = mysqli_select_db($connection, 'db_hotelreservation');
$query = "SELECT * FROM tbl_reservation WHERE room_status = 'Pending' OR room_status ='Booked'";
$query_run = mysqli_query($connection, $query);
$resultCheck = mysqli_num_rows($query_run);
if($resultCheck > 0)
{
while($row = mysqli_fetch_assoc($query_run))
{
?>
<tbody>
<tr>
<td style="display: none;"> <?php echo $row['ID'];?> </td>
<td> <?php echo $row['room_number']; ?></td>
<td> <?php echo $row['room_status'];?></td>
<td style="display: none;"> <?php echo $row['room_type'];?> </td>
<td style="display: none;"> <?php echo $row['first_name'] . " " .$row['last_name']?> </td>
<td style="display: none;"> <?php echo $row['check_in'];?> </td>
<td style="display: none;"> <?php echo $row['check_out'];?> </td>
<td style="display: none;"> <?php echo $row['contact_number'];?> </td>
<td style="display: none;"> <?php echo $row['numberof_days'] ." ". "day/s";?> </td>
<td style="display: none;"> <?php echo $row['calculated_price'];?> </td>
<td>
<form action="approve.php" method="POST" onclick="return confirm('Are you sure you want to Approve this Booking?');">
<input type="hidden" name="id" value="<?php echo $row['ID'] ?>" style="">
<input type="submit" name="update" class="btn btn-success" value="Approve">
</form>
<button type="button" class="btn btn-primary viewbtn">View Details</button>
</td>
</tr>
</tbody>
<?php
}
}
else{
echo "No Records Found";
}
?>
</table>
</div>
</div>
</div>
</div>

This might be because of delayed data binding, you can try datatable ajax approach to bind the data. Refer datatable option.

Return page issue when click back button in Chrome browser

I am making a portal of games where different games are showing on index page.
There are two procedures of playing games:
When user opens the index page and clicks on any game, if he is not logged-in already, then login form is showing on play.php; when user logs in then game will start
When user opens the index page and if he/she is already logged-in then login form will not appear. He can directly play a game.
Issue is that when a game is running on play.php, after playing user clicks back button in browser to return to the index page. But browser is showing play.php first and user has to click back button again to see index.php
Is there any way when click on back button then directly show index.php not show play.php again
index.php
<?php
$i=0;
$Res_games=mysqli_query($con, "SELECT * from tbl_games where
category_id=".$Row_Cat['id']);
while($Row_games = mysqli_fetch_array($Res_games)){
$img = $Row_games['icon_large'];
$game_url = $Row_games['url'];
$game_name = $Row_games['title'];
$formid=$Row_Cat['prefix'].$i;
?>
<div class="productCarousel-slide">
<article class="card ">
<figure class="card-figure">
<form id="<?php echo $formid; ?>" method="post" action="play.php">
<input type="hidden" name="url" value="<?php echo $game_url; ?>">
</form>
<a href="#" onclick="document.forms['<?php echo $formid; ?>'].submit();" title="<?php echo $game_name1; ?>">
<img class="card-image" src="<?php echo $img; ?>" alt="<?php echo $game_name;?>" title="<?php echo $game_name;?>">
</a>
<figcaption class="card-figcaption">
<div class="card-figcaption-body">
<div class="card-buttons">
</div>
<div class="card-buttons card-buttons--alt">
</div>
</div>
</figcaption>
</figure>
<div class="card-body">
<h4 class="card-title" style="text-align: center !important;">
<?php echo $game_name;?>
</h4>
</div>
</article>
</div>
<?php
$i++;
}
?>
Play.php
<?php
include('assets/db_connect.php');
$url1 = urlencode($_REQUEST['url']);
header("Cache-Control: no cache");
session_cache_limiter("private_no_expire");
if(isset($_SESSION['loginid'])){
?>
<html>
<head>
<style>
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}}
</style>
</head>
<body>
<div class="resp-container">
<iframe class="resp-iframe" src="page1.php?url=<?php echo $url1;?>" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</body>
</html>
<?php } else { ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="assets/images/blue_logo.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/iconic/css/material-design-iconic-font.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/animate/animate.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/css-hamburgers/hamburgers.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/animsition/css/animsition.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/select2/select2.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/daterangepicker/daterangepicker.css">
<link rel="stylesheet" type="text/css" href="assets/css/util.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body>
<?php
if($_SESSION['loginid']!='' && !isset($_REQUEST['login'])){ ?>
<script>location.replace("index.php");</script>
<?php
}
if(isset($_POST['login'])){
$msisdn = $_REQUEST['msisdn'];
//Check Mobile No.
$chk_Zero= substr($msisdn, 0, 1);
$chk_92= substr($msisdn, 0, 3);
if ($chk_Zero==0){
$msisdn = substr($msisdn, 1);
$msisdn = '92'.$msisdn;
}
if($chk_92=='923'){
$msisdn = $msisdn;
}
$cdate = date("Y-m-d H:i:s");
$rows=0;
$SQL1="SELECT * FROM tbl_useraccount where msisdn='$msisdn' and status=1";
$result = mysqli_query($con,$SQL1);
$GetRows=mysqli_fetch_array($result);
if($GetRows['msisdn']==$msisdn)
{
$ID=$GetRows['id'];
//Store OTP
/* $otp= rand(1000,9999);
$OTP_Insert=mysqli_query($con,"Update tbl_usersotp set otp='$otp', modify_date='$cdate' where userid='$ID' and msisdn = '$msisdn' and sms_status=1");
$Message="Dear User,\n\nYour Verification Code is $otp. \n\nTelenor Games";
file_get_contents("http://115.186.146.246:13013/cgi-bin/sendsms?username=tester&password=foobar&to=".$msisdn."&text=".urlencode($Message));
*/
$_SESSION['loginid']=$ID;
$_SESSION['msisdn']=$msisdn;
//Login Attempt Information
$userid=$ID;
$localIP = getHostByName(getHostName());
$server_ip=$_SERVER['REMOTE_ADDR'];
$session_id = session_id(); $_SESSION['session_id'] = $session_id;
$CInsert=mysqli_query($con,"INSERT INTO tbl_login_attempt (userid, date_time, local_ip, server_ip, login_status, session_id) VALUES ('$userid', '$cdate', '$localIP', '$server_ip', '1', '$session_id')");
if(isset($_REQUEST['game_url'])){
?>
<form id="frm_url1" action="play.php" method="post">
<input type="hidden" name="url" value="<?php echo $_REQUEST['game_url'];?>" />
</form>
<script type="text/javascript">
document.getElementById("frm_url1").submit();
</script>
<?php } ?>
<?php }else{$message = "<font color='#bb0000'>Invalid Mobile Number. Please re-enter the details and login again.</font>";}
}
?>
<div class="limiter">
<div class="container-login100" style="background-color:#000000">
<!-- background-image: url('assets/images/bg-01.jpg'); -->
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<form class="login100-form validate-form" action="play.php" method="post" enctype="multipart/form-data">
<?php echo $message; ?>
<input type="hidden" name="game_url" value="<?php echo urldecode($url1);?>" />
<span class="login100-form-title p-b-49">
<img class="logo-responsive" src="assets/images/logo-white.png"/>Login
</span>
<div class="wrap-input100 validate-input m-b-23" data-validate = "Mobile Number is required">
<span class="label-input100">Mobile Number</span>
<input class="input100 allownumericwithoutdecimal" type="text" name="msisdn" placeholder="03XX1234567">
<span class="focus-input100" data-symbol=""></span>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn" type="submit" name="login">
Login
</button>
</div>
</div>
<br><br><br>
<!--<div class="txt1 text-center p-t-54 p-b-20">
<span>
Or Login Using
</span>
</div>
<div class="flex-c-m">
<a href="#" class="login100-social-item bg1">
<i class="fa fa-facebook"></i>
</a>
</div>-->
<div class="flex-col-c p-t-155">
<span class="txt1 p-b-17">
Not registered?
</span>
<a href="register.php" class="txt2">
Register
</a>
</div>
</form>
</div>
</div>
</div>
<div id="dropDownSelect1"></div>
<script src="assets/vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="assets/vendor/animsition/js/animsition.min.js"></script>
<script src="assets/vendor/bootstrap/js/popper.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/vendor/select2/select2.min.js"></script>
<script src="assets/vendor/daterangepicker/moment.min.js"></script>
<script src="assets/vendor/daterangepicker/daterangepicker.js"></script>
<script src="assets/vendor/countdowntime/countdowntime.js"></script>
<script src="assets/js/main.js"></script>
<script>
$(".allownumericwithoutdecimal").on("keypress keyup blur",function (event) {
$(this).val($(this).val().replace(/[^\d].+/, ""));
if ((event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
</script>
</body>
</html>

Creating a popup

I am real noob and I want to learn but I got stuck on creating a pop up..
This is my code
<!DOCTYPE html>
<html lang="en">
<link rel="shortcut icon" href="https://sols-rpg.com/home/favicon.png" type="image/x-icon"/>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="height=device-height, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>LA-RP - Home</title>
<script type="text/javascript">
//<![CDATA[
try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:1482933530,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"76d6adaf2e1ad169990326f51d43e159",petok:"4520fa4333a7ead90224eaba558cbb032249d63d-1483805698-1800",zone:"sols-rpg.com",rocket:"0",apps:{"abetterbrowser":{"ie":"7","opera":null,"chrome":null,"safari":null,"firefox":null}}}];!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=f2befc48d1/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){};
//]]>
</script>
<link href="css/main.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="border-bottom: #0d79c9 3px solid;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-logo"><img src="img/logov3.png"></div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" style="margin-top:6px;">
<li>
<span class="glyphicon glyphicon-home"></span> <b>Acasa</b>
</li>
<li>
<span class="glyphicon glyphicon-globe"></span> <b>Forum</b>
</li>
<li>
</li>
<li>
<span class="glyphicon glyphicon-shopping-cart"></span> <b>Magazin</b>
</li>
<li>
<span class="glyphicon glyphicon-info-sign"></span> <b>Anunturi</b>
</li>
</ul>
</div>
</div>
</nav>
<div class="banner">
<h1>Bine ai venit pe <font style="color:#0d79c9;">Los Angeles Roleplay</font>!</h1>
<h6><b>Serverul este bazat pe viata din Los Angeles.</b></a>.</h6>
<h6><b><font style="color:#0d79c9;"><span class="glyphicon glyphicon-star"></span></font> Mai multe informatii pe <font style="color:#0d79c9;">forum</font>! <font style="color:#0d79c9;"><span class="glyphicon glyphicon-star"></span></font></b></a></h6>
<div class="spacer1"> </div>
<div class="spacer1"> </div>
<button id="popup" onclick="div_show()"><span class="glyphicon glyphicon-pencil"></span> Inregistreaza-te </button> <button class="btn-transparent"><span class="glyphicon glyphicon-share-alt"></span> Logheaza-te</button><br>
<div class="spacer1"> </div>
<button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-play"></span> Conecteaza-te</button>
<div class="spacer1"> </div>
<button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-cloud-download"></span> Descarca SA-MP</button>
<div class="spacer1"> </div>
<button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-headphones"></span> Vorbeste pe TeamSpeak</button>
<div class="footer">
<a href="https://www.positivessl.com"><img src="img/comodo_secure_seal_113x59_transp.png" align="left"/>
<img src="img/ytbutton.png" align="right" hspace="5"/> <a href="https://www.facebook.com/roleplaylarp/"><img src="img/fbbutton.jpg" align="right"/>
<p>
Copyright © Los Angeles Roleplay 2017
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I want when pressing this button
<button id="popup" onclick="div_show()"><span class="glyphicon glyphicon-pencil"></span> Inregistreaza-te </button>
A pop up will appear with a nice animation on the user screen and the background would get a bit blurred, I'd like to put a form in that pop up but what I need is just the pop up please..
I've made a popup and a phpscript to send the inputs to my email but it is not working, I don't get any emails.
<?php
$your_email ='andreigames9#gmail.com';// <<=== update to your email address
session_start();
$errors = '';
$name = '';
$visitor_email = '';
$nastere = '';
$forumname = '';
$parola = '';
$poveste = '';
$mgpg = '';
if(isset($_POST['submit']))
{
$name = $_POST['field5'];
$visitor_email = $_POST['field4'];
$nastere = $_POST['field2'];
$forumname = $_POST['field1'];
$parola = $_POST['field3'];
$poveste = ['field6'];
$mgpg = ['field7'];
///------------Do Validations-------------
if(empty($name)||empty($visitor_email))
{
$errors .= "\n Name and Email are required fields. ";
}
if(IsInjected($visitor_email))
{
$errors .= "\n Bad email value!";
}
if(empty($_SESSION['6_letters_code'] ) ||
strcasecmp($_SESSION['6_letters_code'], $_POST['6_letters_code']) != 0)
{
//Note: the captcha code is compared case insensitively.
//if you want case sensitive match, update the check above to
// strcmp()
$errors .= "\n The captcha code does not match!";
}
if(empty($errors))
{
//send the email
$to = $your_email;
$subject="Creare caracter $name";
$from = $your_email;
$ip = isset($_SERVER['REMOTE_ADDR']) ? $_SERVER['REMOTE_ADDR'] : '';
$body = "A user $forumname submitted the contact form:\n".
"Nume Forum: $forumname\n".
"Email: $visitor_email \n".
"IP: $ip\n";
"Nume Caracter: $name\n ".
"Parola: #parola\n".
"Data Nasterii: $nastere\n".
"Poveste Caracter:\n $poveste \n".
"Definitii MG si PG:\n $mgpg ".
$headers = "From: $from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
mail($to, $subject, $body,$headers);
header('Location: thank-you.html');
}
}
// Function to validate against any email injection attempts
function IsInjected($str)
{
$injections = array('(\n+)',
'(\r+)',
'(\t+)',
'(%0A+)',
'(%0D+)',
'(%08+)',
'(%09+)'
);
$inject = join('|', $injections);
$inject = "/$inject/i";
if(preg_match($inject,$str))
{
return true;
}
else
{
return false;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<link rel="shortcut icon" href="https://sols-rpg.com/home/favicon.png" type="image/x-icon"/>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="height=device-height, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>LA-RP - Home</title>
<script type="text/javascript">
//<![CDATA[
try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:1482933530,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"76d6adaf2e1ad169990326f51d43e159",petok:"4520fa4333a7ead90224eaba558cbb032249d63d-1483805698-1800",zone:"sols-rpg.com",rocket:"0",apps:{"abetterbrowser":{"ie":"7","opera":null,"chrome":null,"safari":null,"firefox":null}}}];!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=f2befc48d1/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){};
//]]>
</script>
<link href="css/main.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="border-bottom: #0d79c9 3px solid;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-logo"><img src="img/logov3.png"></div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" style="margin-top:6px;">
<li>
<span class="glyphicon glyphicon-home"></span> <b>Acasa</b>
</li>
<li>
<span class="glyphicon glyphicon-globe"></span> <b>Forum</b>
</li>
<li>
</li>
<li>
<span class="glyphicon glyphicon-shopping-cart"></span> <b>Magazin</b>
</li>
<li>
<span class="glyphicon glyphicon-info-sign"></span> <b>Anunturi</b>
</li>
</ul>
</div>
</div>
</nav>
<div class="banner">
<h1>Bine ai venit pe <font style="color:#0d79c9;">Los Angeles Roleplay</font>!</h1>
<h6><b>Serverul este bazat pe viata din Los Angeles.</b></a>.</h6>
<h6><b><font style="color:#0d79c9;"><span class="glyphicon glyphicon-star"></span></font> Mai multe informatii pe <font style="color:#0d79c9;">forum</font>! <font style="color:#0d79c9;"><span class="glyphicon glyphicon-star"></span></font></b></a></h6>
<div class="spacer1"> </div>
<div class="spacer1"> </div>
<button id="show" onclick="div_show()" class="btn-transparent"><span class="glyphicon glyphicon-pencil"></span> Inregistreaza-te </button> <button class="btn-transparent"><span class="glyphicon glyphicon-share-alt"></span> Logheaza-te</button><br>
<div class="spacer1"> </div>
<button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-play"></span> Conecteaza-te</button>
<div class="spacer1"> </div>
<button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-cloud-download"></span> Descarca SA-MP</button>
<div class="spacer1"> </div>
<button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-headphones"></span> Vorbeste pe TeamSpeak</button>
<div class="footer">
<a href="https://www.positivessl.com"><img src="img/comodo_secure_seal_113x59_transp.png" align="left"/>
<img src="img/ytbutton.png" align="right" hspace="5"/> <a href="https://www.facebook.com/roleplaylarp/"><img src="img/fbbutton.jpg" align="right"/>
<dialog id="window">
<form class="form-style-9">
<ul>
<li>
<input type="text" name="field1" class="field-style field-split align-left" placeholder="Nume Forum" />
<input type="text" name="field2" class="field-style field-split align-right" placeholder="Data Nasterii" />
</li>
<li>
<input type="text" name="field3" class="field-style field-split align-left" placeholder="Parola" />
<input type="email" name="field4" class="field-style field-split align-right" placeholder="Email" />
</li>
<li>
<input type="text" name="field5" class="field-style field-full align-none" placeholder="Nume_Prenume" />
</li>
<li>
<textarea name="field6" class="field-style" placeholder="Poveste Caracter"></textarea>
</li>
<li>
<textarea name="field7" class="field-style" placeholder="Defineste ce inseamna Metagaming si Powergaming plus exemple"></textarea>
</li>
<li>
<input type="submit" name="submit" value="TRIMITE" />
</li>
</ul>
</form>
<button id="exit" class="btn-transparent">Close Dialog
</dialog>
</div>
<p class="copyright">Copyright © Los Angeles Roleplay 2017</p>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/my_js.js"></script>
<script src="scripts/gen_validatorv31.js"></script>
<script src="scripts/validationAndCaptcha.js"></script>
</body>
</html>

Below is the bootstrap modal with simple button click pop-up:
Refer link for more information.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

First off, make sure you keep these two references to script codes on the head of the document, it is bad practice.
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
You can look at examples online to make your very own prototype. Make sure to take a look at this site if you want to know all about HTML globals (or at the very least references for what you are making).
This is how I would style my document header:
<head>
<title> // 1x Title Tag
<meta> // Subsequently, meta tags
// which honestly I have not much experience using and I
// assume are for dynamic styling on mobile devices, and SEO
<link href> // link tags to css
// and finally
<script src="js/jquery.js"></script> // script tags
<script src="js/bootstrap.min.js"></script> // and script code
<script type="text/javascript">
//<![CDATA[
try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:1482933530,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"76d6adaf2e1ad169990326f51d43e159",petok:"4520fa4333a7ead90224eaba558cbb032249d63d-1483805698-1800",zone:"sols-rpg.com",rocket:"0",apps:{"abetterbrowser":{"ie":"7","opera":null,"chrome":null,"safari":null,"firefox":null}}}];!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=f2befc48d1/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){};
//]]>
</script>
</head>
Since I consider myself to be somewhat resourceful, I was going to suggest doing it pure javascript+css, with no extra libraries, unless you wish to write one yourself in the future. You can do it in jQuery, like somebody else suggested.
Even though I don't usually recommend w3schools, here is another way to do it: http://www.w3schools.com/howto/howto_css_modals.asp
Maybe you'd like to learn how they do it and will end up outsmarting them. If you are still curious, add a comment on my post so I can know to link you to a CSS tutorial or HTML follow through.

jQuery mobile + php post problems

Dears I've got a very strange problem with jQuery Mobile and PHP, I need do something very simple, I've a form with two inputs values (name and pass), and the form is submitted to "questions.php" but when I print the post (print_r($_POST)) this is empty, but if I erase some script of jQuery mobile, the post come with the information that I need and I don't know why it Doesn't work with the 3 scripts.
inicio.php
<?php include("header.php");?>
<?php include("conexion.php");?>
<?php
$query = "select * from usuario, categoria where usuario.id_categoria = categoria.categoria_id";
$result = $conn->query($query);
?>
<body>
<!-- Pagina Inicio (login) -->
<div data-role="page" id="home">
<div data-role="main" class="ui-content">
<div id="inicio">
<div id="logo"><img src="images/logo.png" alt="logo" width="100%" height="" /></div>
<form method="post" action="preguntas.php" data-ajax="false">
<label for="user">Selecciona tu usuario Pop Up Info</label>
<!-- Pop Up Usuario-->
<div data-role="popup" id="usuario">
Close
<p>Seleciona tu nombre e ingresa tu </p>
<p>contraseña para registrar tu puntaje</p>
</div>
<!-- FIN Pop Up Usuario-->
<select name="user" id="user">
<?php while($row = $result->fetch_assoc()){ ?>
<optgroup label="<?=$row['categoria']?>">
<option value="<?=$row['id']?>"><?=$row['nombre']?> <?=$row['apellido']?></option>
</optgroup>
<?php }?>
</select>
<br><br>
<label for="pswd">Ingresa tu contraseña</label>
<input type="password" name="passw" id="pswd" data-clear-btn="true">
<button type="submit" class="ui-btn ui-icon-home ui-btn-icon-left" id="home" data-transition="slide" value="Ingresar">Ingresar</button>
</form>
</div>
</div>
<div data-role="footer" style="text-align:center; background: transparent; border: 0;" data-position="fixed">
<div data-role="controlgroup" data-type="horizontal" style="margin:0">
Juego
Ranking
Videos
</div>
</div>
</div>
questions.php
<?php
include "conexion.php";
$id = $_POST['user'];
$query = "SELECT * FROM categoria, preguntas,usuario where usuario.id_categoria = categoria.categoria_id and categoria.categoria_id = preguntas.id_categoria and usuario.id = '$id' order by rand()";
$result = $conn->query($query);
?>
<!DOCTYPE html>
<html lang="es">
<head>
<title>Sky Icargo - El Juego</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="mobile/addtohomescreen.css">
<script src="//use.typekit.net/eev7vgf.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<script src="mobile/addtohomescreen.js"></script>
<script>
addToHomescreen();
</script>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="images/custom_icon.png">
<meta name="apple-mobile-web-app-title" content="Sky iCargo">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
<div data-role="page" id="pagetwo">
<div data-role="header">
<div data-role="header">
Home
<h1 id="loguito"><img src="images/loguito.png" alt="logo" width="100%" height="" /></h1>
</div>
</div>
<div data-role="main" class="ui-content">
<?php while($row = $result->fetch_assoc()){ ?>
<form method="post" action="puntaje">
<div>
<?php echo $row['pregunta'];?>
<?php }?>
</div>
</form>
</div>
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup" data-type="horizontal">
Juego
Ranking
Videos
</div>
</div>
</div>
if I erase <script src="mobile/jquery.mobile-1.4.5.min.js"></script> in questions.php or another of the three works, but if I leave the three doesn't work, If someone can help me please.

Categories