I am developing an application in which i need to send notification to all connected clients in real time. I have used nodejs for real time notification send to connected clients.
Problem is this is working fine on server, While connected clients are not able to display popup notification. While total numbers of notification is increasing as per notification inserted to database on server and clients also. Only problem no popup notification.
code : index.php
<?php
include_once( dirname( __FILE__ ) . '/class/Database.class.php' );
include_once( dirname( __FILE__ ) . '/class/HelperClass.php' );
$pdo = Database::getInstance()->getPdoObject();
$helper = new HelperClass();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VegFru | Notification</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/pnotify.custom.min.css" rel="stylesheet">
<!-- Custom styling plus plugins -->
<link href="css/custom.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<i class="fa fa-paw"></i> <span>VegFru</span>
</div>
<div class="clearfix"></div>
<!-- menu prile quick info -->
<div class="profile">
<div class="profile_pic">
<img src="images/img.jpg" alt="..." class="img-circle profile_img">
</div>
<div class="profile_info">
<span>Welcome,</span>
<h2>Ashish Singh</h2>
</div>
</div>
<!-- /menu prile quick info -->
<br />
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<ul class="nav side-menu">
<li>Push Notification <i class="fa fa-dashboard pull-right"></i></li>
<li>
<form action="ajax/insertNewMessage.php" id="notification">
<div class="form-group" style="margin-left: 16px; width: 83%">
<input type="checkbox" onclick="client.gerateRandomNotification(this)"/>
<label class="control-label" for="notification-input">Generate Random</label>
</div>
<div class="form-group" style="margin-left: 16px; width: 83%">
<label class="control-label" for="notification-input">Notification Message</label>
<input type="text" id="notification-input" class="form-control" placeholder="Notification Message"><br/>
</div>
<button type="submit" class="btn btn-success" style="margin-left: 16px;">Send Push Notification</button>
</form>
</li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
</div>
</div>
<!-- top navigation -->
<div class="top_nav">
<div class="nav_menu">
<nav class="" role="navigation">
<!-- <div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
-->
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<img src="images/img.jpg" alt="">Ashish Singh
</a>
</li>
<li role="presentation" class="dropdown">
<a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-envelope-o"></i>
<span class="badge bg-green"></span>
</a>
</li>
<li role="presentation" class="dropdown">
<?php
$query = $pdo->prepare( 'SELECT * FROM notification WHERE status = 0 ORDER BY id DESC' );
$query->execute();
$notifications = $query->fetchAll( PDO::FETCH_OBJ );
?>
<a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-bell-o"></i>
<span class="badge bg-green"><?= count($notifications) > 0 ? count($notifications): '' ?></span>
</a>
<ul class="dropdown-menu list-unstyled msg_list animated fadeInDown" style="right: -120px !important; border-top-left-radius: 7px; border-top-right-radius: 7px; margin-top: 10px;" role="menu">
<li style="background-color: white">
<div class="text-center">
<a>
<strong><a href="inbox.html">Notification (<?= count($notifications) ?>)</strong>
</a>
</div>
</li>
<div id="notifications-container">
<?php foreach( $notifications as $notification):?>
<li data-id="<?= $notification->id ?>" onclick="client.openNotification(this)">
<a>
<span class="image">
<img src="images/img.jpg" alt="Profile Image" />
</span>
<span>
<span>Ashish Singh</span>
<span class="time"><?php echo $helper->time_elapsed_string($notification->created_at) ?></span>
</span>
<span class="message">
<?php echo $notification->notification ?>
</span>
</a>
</li>
<?php endforeach; ?>
</div>
<li>
<div class="text-center">
<a>
<strong><a href="inbox.html">See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<!-- /top navigation -->
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/pnotify.custom.min.js"></script>
<script src="js/node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js"></script>
<script src="js/nodeClient.js"></script>
</body>
</html>
nodeserver.js
var socket = require( 'socket.io' );
var express = require( 'express' );
var http = require( 'http' );
var app = express();
var server = http.createServer( app );
var io = socket.listen( server );
io.sockets.on( 'connection', function( client ) {
console.log( "New client" );
client.on( 'notification', function( data ) {
console.log( 'Notification received ' + data.notification);
//client.broadcast.emit( 'message', { name: data.name, message: data.message } );
io.sockets.emit( 'notification', { notification: data.notification, serverData: data.serverData } );
});
});
server.listen( 8082 );
nodeclient.js
var client = (function () {
var socket = io.connect('http://192.168.2.8:8082');
var interval; //for random notification generation
function init() {
buttonClicked();
socketNotificationUpdate();
}
function buttonClicked() {
$("#notification").on('submit', function (e) {
e.preventDefault(); //Preventing default submit action
var $cacheDom = $(this); //Caching the dom so that jQuery doesn't always need to search in the page
var url = $cacheDom.attr('action'); //Grabbing url of the form
var notification = $cacheDom.find('div:nth-child(2) input').val();
$cacheDom.find('div').removeClass('has-error').addClass('has-success').val('');
if (notification.length == 0) {
$cacheDom.find('div').removeClass('has-success').addClass('has-error');
return false;
}
//Ajax call to save data
saveAjaxNotification(notification, url);
});
}
function socketNotificationUpdate() {
socket.on('notification', function (data) {
var $cacheDom = $('#notifications-container');
var actualContent = $cacheDom.html(); //All notification
var $notificationCount = $cacheDom.parent().prev().find('span'); //Header notification count selector
var notificationCount = $notificationCount.text(); //Header Notification count
$notificationCount.text(Number(notificationCount) + 1); //Incrementing after one notification
var newMsgContent = '<li data-id="' + data.serverData.lastInsertId + '" onclick="client.openNotification(this)"><a><span class="image"><img src="images/img.jpg" alt="Profile Image" /></span><span><span>Ashish Singh</span><span class="time">0 seconds ago</span></span><span class="message">' + data.notification + '</span></a></li>';
$cacheDom.html(newMsgContent + actualContent);
});
}
function openNotification(that) {
var notificationId = $(that).attr('data-id');
$.post('./ajax/readNotification.php', {notification_id: notificationId}, function () {
$(that).remove(); //removing the clicked notification (optional as it should take the user to new page)
var $notificationCount = $('#notifications-container').parent().prev().find('span');
var notificationCount = $notificationCount.text();
$notificationCount.text(Number(notificationCount) - 1);
alert('Notification Link will be opened'); //Just for message
location.href = ""; //Reloading the page as on clicking the notification will take the user to notifications page where all the notification will be shown (read or unread)
});
}
function saveAjaxNotification(notification, url) {
$.ajax({
url: url,
type: "POST",
data: {notification: notification},
success: function (data) {
var serverData = JSON.parse(data);
socket.emit('notification', {notification: notification, serverData: serverData});
PNotify.desktop.permission();
(new PNotify({
title: 'Ashish Singh',
text: notification,
desktop: {
desktop: true,
icon: 'images/img.jpg'
}
})).get().click(function (e) {
if ($('.ui-pnotify-closer, .ui-pnotify-sticker, .ui-pnotify-closer *, .ui-pnotify-sticker *').is(e.target))
return;
alert('http://vegfru.com/imrealashu/notification/' + serverData.link);
});
}
});
}
function gerateRandomNotification(that) {
var url = $(that).parent().parent().attr('action');
var count = 1;
if ($(that).is(':checked')) {
interval = setInterval(function () {
saveAjaxNotification('notification' + count, url);
count++
}, 3000);
} else {
clearInterval(interval);
}
}
init();
return {
openNotification: openNotification, //Revealing the openNotification function as it will be used in DOM
gerateRandomNotification: gerateRandomNotification
}
})();
Related
I am a beginner and trying to follow some tutorial videos for my school project. I am stuck when the data not inserted into the database. I double-check the code to tutorial and nothing wrong. There's no error message or notification too. I really appreciate your help.
action.php
<!--action.php-->
<?php
require 'config.php';
if(isset($_POST['pid'])){
$pid = $_POST['pid'];
$pname = $_POST['pname'];
$pprice = $_POST['pprice'];
$pimage = $_POST['pimage'];
$pcode = $_POST['pcode'];
$pqty = 1;
$stmt = $conn->prepare("SELECT product_code FROM cart WHERE product_code=?");
$stmt->bind_param("s",$pcode);
$stmt->execute();
$res = $stmt->get_result();
$r = $res->fetch_assoc();
$code = $r['product_code'];
if(!$code){
$query = $conn->prepare("INSERT INTO cart (product_name,product_price,product_image,qty,total_price,produk_code) VALUES (?,?,?,?,?,?)");
$query->bind_param("sssiss",$pname,$pprice,$pimage,$pqty,$pprice,$pcode);
$query->execute();
echo '<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Item added to cart!</strong>
</div>';
}
else{
echo '<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Item already added to your cart!</strong>
</div>';
}
}
?>
index.php
<!--index.php-->
<!DOCTYPE html>
<html>
<head>
<title>Map Store</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/fc847822ba.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="fontawesome/css/all.min.css"/>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="index.php">Map Store</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="index.php">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.php">Checkout</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.php"><i class="fas fa-shopping-cart text-white"> <span id="cart-item" class="badge badge-danger">0</span> </i></a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row mt-2">
<div id="message">
</div>
<?php
include 'config.php';
$stmt = $conn->prepare("SELECT * FROM product");
$stmt->execute();
$result = $stmt->get_result();
while($row = $result->fetch_assoc()):
?>
<div class="col-lg-3">
<div class="card-deck">
<div class="card p-2 border-secondary mb-2">
<img src="<?= $row['product_image'] ?>" class="card-img-top" height="250">
<div class="card-body p-1">
<h4 class="card-title text-center text-info"><?= $row['product_name']?></h4>
<h5 class="card-text text-center text-danger"><?= number_format($row
['product_price'],2) ?>/-</h5>
</div>
<div class="card-footer p-1">
<form action="#" class="form-submit">
<input type="hidden" class="pid" value="<?= $row['id']?>">
<input type="hidden" class="pname" value="<?= $row['product_name']?>">
<input type="hidden" class="pprice" value="<?= $row['product_price']?>">
<input type="hidden" class="pimage" value="<?= $row['product_image']?>">
<input type="hidden" class="pcode" value="<?= $row['product_code']?>">
<button class="btn btn-info btn-block addItemBtn"><i class="fas fa-cart-plus "></i>Add to cart</button>
</form>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".addItemBtn").click(function(e){
e.preventDefault();
var $form = $(this).closest(".form-submit");
var pid = $form.find(".pid").val();
var pname = $form.find(".pname").val();
var pprice = $form.find(".pprice").val();
var pimage = $form.find(".pimage").val();
var pcode = $form.find(".pcode").val();
$.ajax({
url: 'action.php',
method: 'post',
data: {pid:pid,pname:pname,pprice:pprice,pimage:pimage,pcode:pcode},
success:function(response){
$("message").html(response);
}
});
});
});
</script>
</body>
</html>
config.php
<!--config.php-->
<?php
$conn = new mysqli("localhost","root","","checkout_system");
if($conn->connect_error){
die("Connection Failed!".$conn->connect_error);
}
?>
sorry i am new here and this my first post
The HTML elements in your form must have a name attribute to be available in $_POST, you set only a class :
<input type="hidden" name="pid" class="pid" value="<?= $row['id']?>">
Good afternoon,
I am working on a website for a friend's gaming fansite. Utilizing a URI function and ajax URL loads, I'm setting it up so when they visit a page, the URL changes and that page's content loads, while leaving the top portion of the website static. The logo, radio box and navigation bar is the static portion.
Everything is working as intended so far, but when a page is used that's using a specific ID, it loads up a blank page. I'll show what I've done with the Badges page for an example.
Here's my HTACCESS:
Header set Access-Control-Allow-Origin *
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "*"
Options -MultiViews
RewriteEngine On
RewriteRule ^badges/([0-9]+)/?$ badges.php?id=$1 [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php [QSA,L]
Here's the URI script:
<?php
function getCurrentUri() {
$basepath = implode('/', array_slice(explode('/', $_SERVER['SCRIPT_NAME']), 0, -1)) . '/';
$uri = substr($_SERVER['REQUEST_URI'], strlen($basepath));
if (strstr($uri, '?')) $uri = substr($uri, 0, strpos($uri, '?'));
$uri = '/' . trim($uri, '/');
return $uri;
}
$base_url = getCurrentUri();
$routes = array();
$routes = explode('/', $base_url);
foreach($routes as $route) {
if(trim($route) != '')
array_push($routes, $route);
}
if ($base_url == "/" || $base_url == "/home") {
$page = "home";
} elseif ($base_url == "/about") {
$page = "about";
} elseif ($base_url == "/badges") {
$page = "badges";
}
?>
Here's my AJAX call:
$(document).ready(function() {
$.ajax({
url: '<?php echo $page; ?>.php',
success: function(content) {
$("#contfill").html(content);
history.pushState(null, '', '<?php echo $page; ?>');
homePageInit();
}
});
});
When www.domain.com/badges is used, it loads the page correctly as shown here:
The first badge's ID is 324. When www.domain.com/badges/324 is used, it loads the data correctly, but the page is blank as shown here:
Does anyone know why this would be?
EDIT
I added in a alert('$base_url'); to see what it would be. When using www.domain.com/badges, it shows as /badges. When using www.domain.com/badges/324 no alert pops up, so it seems that it's going directly to badges.php. Is that due to the HTACCESS?
SECOND EDIT
Here is my badges.php script:
<?php require('../panel/includes/config.php'); ?>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading bg-color-blue">
<h3 class="panel-title"><i class="fa fa-newspaper-o" aria-hidden="true"></i> Badge Guides</h3>
</div>
<div class="panel-body">
<p>
<img src="assets/images/1badge_guides.png" alt="Guides" class="img-responsive img-center">
<?php
if (isset($_GET["id"])) {
$id = $_GET["id"];
$newsQuery = $dbh->prepare("SELECT * FROM news WHERE id=:id");
$newsQuery->execute(array(":id"=>$id));
$newsQueryData = $newsQuery->fetch(PDO::FETCH_ASSOC);
?>
<br>
Tweet
<br>
<?php
echo htmlspecialchars_decode($newsQueryData['article']);
} else {
$reqInfo2 = $dbh->prepare("SELECT n.id,
n.image,
n.title,
n.category,
n.description,
n.article,
n.active,
n.level,
n.available,
n.author,
n.stamp,
c.cat_num,
c.cat_name,
a.active_num,
a.active_name,
av.avail_num,
av.avail_name,
l.level_num,
l.level_name
FROM news n
INNER JOIN news_cat c
ON n.category = c.cat_num
INNER JOIN active_cat a
ON n.active = a.active_num
INNER JOIN avail_cat av
ON n.available = av.avail_num
INNER JOIN level_cat l
ON n.level = l.level_num
WHERE n.category = 10 AND n.active = 1
ORDER BY n.stamp DESC");
$reqInfo2->execute();
?>
<p class="text-center">
<strong>BADGE GUIDES</strong>
</p>
<table class="table table-striped">
<thead>
<tr>
<th>Badge</th>
<th>Title</th>
<th>Description</th>
<th>Level</th>
<th>Availability</th>
</tr>
</thead>
<tbody>
<?php
while ($reqInfoData = $reqInfo2->fetch(PDO::FETCH_ASSOC)) {
?>
<tr class="bg-success">
<td><?php echo "<img src=\"{$reqInfoData['image']}\" class=\"img-responsive\">"; ?></td>
<td><?php echo "{$reqInfoData['title']}"; ?></td>
<td><?php echo $reqInfoData['description']; ?></td>
<td><?php echo $reqInfoData['level_name']; ?></td>
<td>
<?php
if ($reqInfoData['avail_name'] == "Available") {
echo "<span style=\"color: green;\">{$reqInfoData['avail_name']}</span>";
} else {
echo "<span style=\"color: red;\">{$reqInfoData['avail_name']}</span>";
}
?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
<?php
}
?>
</p>
</div>
</div>
</div>
</div>
Here is the index.php page:
<?php
function getCurrentUri() {
$basepath = implode('/', array_slice(explode('/', $_SERVER['SCRIPT_NAME']), 0, -1)) . '/';
$uri = substr($_SERVER['REQUEST_URI'], strlen($basepath));
if (strstr($uri, '?')) $uri = substr($uri, 0, strpos($uri, '?'));
$uri = '/' . trim($uri, '/');
return $uri;
}
$base_url = getCurrentUri();
$routes = array();
$routes = explode('/', $base_url);
foreach($routes as $route) {
if(trim($route) != '')
array_push($routes, $route);
}
if ($base_url == "/" || $base_url == "/home") {
$page = "home";
} elseif ($base_url == "/about") {
$page = "about";
} elseif ($base_url == "/badges") {
$page = "badges";
}
require('../panel/includes/config.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Habbfinity</title>
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/ie10-viewport-bug-workaround.css">
<link rel="stylesheet" type="text/css" href="assets/css/custom.css">
</head>
<body>
<div id="wrapper" class="container well">
<header>
<section id="brand" class="row">
<div class="col-md-8">
<img src="assets/images/habbfinitylogo.png" alt="Habbfinity" class="img-responsive img-center">
</div>
<div class="col-md-4">
<div class="panel panel-default radpan">
<div class="panel-body">
<?php
date_default_timezone_set('Europe/London');
$timecheck = date("H:00");
$timecheckwhour = strtotime($timecheck) + 60*60;
$newtimecheck = date("H:00", $timecheckwhour);
$daycheck = date("N");
$djQuery = $dbh->prepare("SELECT * FROM timetable WHERE day=:day AND time=:time");
$djQuery->execute(array(":day"=>$daycheck, ":time"=>$timecheck));
$djQueryData = $djQuery->fetch(PDO::FETCH_ASSOC);
if (isset($djQueryData) || $djQueryData != "") {
$djQuery2 = $dbh->prepare("SELECT * FROM users WHERE djname=:dj");
$djQuery2->execute(array(":dj"=>$djQueryData['dj']));
$djQueryData2 = $djQuery2->fetch(PDO::FETCH_ASSOC);
}
$djQuery3 = $dbh->prepare("SELECT * FROM timetable WHERE day=:day AND time=:time");
$djQuery3->execute(array(":day"=>$daycheck, ":time"=>$newtimecheck));
$djQuery3Data = $djQuery3->fetch(PDO::FETCH_ASSOC);
if (isset($djQuery3Data) || $djQuery3Data != "") {
$djQuery4 = $dbh->prepare("SELECT * FROM users WHERE djname=:dj");
$djQuery4->execute(array(":dj"=>$djQuery3Data['dj']));
$djQueryData4 = $djQuery4->fetch(PDO::FETCH_ASSOC);
}
$djSays = $dbh->prepare("SELECT * FROM dj_says ORDER BY id DESC LIMIT 1");
$djSays->execute();
$djSaysData = $djSays->fetch(PDO::FETCH_ASSOC);
?>
<audio autoplay id="player">
<source src="http://procyon.shoutca.st:8930/stream" type="audio/mp4">
<source src="http://procyon.shoutca.st:8930/stream" type="audio/ogg">
</audio>
<form method="post">
<p class="text-center">
<button type="button" class="btn btn-trans" onclick="document.getElementById('player').play()"><i class="fa fa-play galaxy" aria-hidden="true"></i></button>
<button type="button" class="btn btn-trans" onclick="document.getElementById('player').pause()"><i class="fa fa-pause galaxy" aria-hidden="true"></i></button>
<button type="button" class="btn btn-trans" onclick="javascript:ajaxpage('requests.php', 'contfill');"><i class="fa fa-comment galaxy" aria-hidden="true"></i></button>
<button type="submit" class="btn btn-trans" value="like" name="like"><i class="fa fa-heart galaxy" aria-hidden="true"></i></button>
</p>
<p>
<div class="row">
<div class="col-md-3">
<img src="https://www.habbo.com/habbo-imaging/avatarimage?hb=image&user=augmented_Runes&headonly=0&direction=4&head_direction=2&action=wav&gesture=&size=m" class="img-responsive img-center">
</div>
<div class="col-md-9">
<i class="fa fa-music" aria-hidden="true"></i> <span id="cc_strinfo_song_Habbfinity00" class="cc_streaminfo"></span>
<br>
<i class="fa fa-headphones" aria-hidden="true"></i> <span id="cc_strinfo_listeners_Habbfinity00" class="cc_streaminfo"></span> Listeners
<br>
<i class="fa fa-user" aria-hidden="true"></i> <span id="cc_strinfo_title_Habbfinity00" class="cc_streaminfo"></span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="marquee2">
<span><?php echo $djSaysData['message']; ?></span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12" style="margin-top: 20px;">
<input id="vol-control" class="myrange" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
</div>
</div>
</p>
</form>
<?php
if (isset($_POST['like']) && isset($djQueryData2['habbo']) && $djQueryData2['habbo'] != "") {
$dj = $djQueryData2['habbo'];
$ip = $_SERVER['REMOTE_ADDR'];
$cur_time = time();
$djLikes = $dbh->prepare("SELECT * FROM djlikes WHERE dj=:dj AND likedip=:ip");
$djLikes->execute(array(":dj"=>$dj, ":ip"=>$ip));
$djLikesData = $djLikes->fetch(PDO::FETCH_ASSOC);
if ($djLikesData['likedip'] != "") {
$lasttime = $djLikesData['lastliked'];
$diff = abs($cur_time - $lasttime);
if ($diff > 3600) {
$AddLikes = $dbh->prepare("UPDATE djlikes SET likes = likes + 1 WHERE likedip=:ip");
$AddLikes->execute(array(":ip"=>$ip));
echo "Thank you for liking the DJ!";
} else {
echo "Please wait an hour before liking the DJ again!";
}
} else {
$AddLikes = $dbh->prepare("INSERT INTO djlikes VALUES (:habbo, :time:, :ip, 1)");
$AddLikes->execute(array(":habbo"=>$djQueryData2['habbo'], ":time"=>$cur_time, ":ip"=>$ip));
echo "Thank you for liking the DJ!";
}
}
?>
</div>
<div class="radimageoverdiv"><i class="fa fa-rocket galaxyl" aria-hidden="true"></i></div>
</div>
</div>
</section>
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><i class="fa fa-home" aria-hidden="true"></i> HOME</li>
<li class="dropdown">
<i class="fa fa-info-circle" aria-hidden="true"></i> HABBFINITY <span class="caret"></span>
<ul class="dropdown-menu">
<li>About Us</li>
<li>Our Team</li>
<li>Contact Us</li>
<li>Site News</li>
<li>Follow Our Twitter!</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-newspaper-o" aria-hidden="true"></i> QUEST <span class="caret"></span>
<ul class="dropdown-menu">
<li>Badge Guides</li>
<li>Wired Guides</li>
<li>News</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-gamepad" aria-hidden="true"></i> EVENTS <span class="caret"></span>
<ul class="dropdown-menu">
<li>Events Timetable</li>
<li>How To Play</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-headphones" aria-hidden="true"></i> RADIO <span class="caret"></span>
<ul class="dropdown-menu">
<li>Radio Timetable</li>
<li>Request Line</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-star" aria-hidden="true"></i> GOODIES <span class="caret"></span>
<ul class="dropdown-menu">
<li>Habbo Imager</li>
</ul>
</li>
<li><i class="fa fa-comments" aria-hidden="true"></i> FORUM</li>
</ul>
</div>
</nav>
</header>
<div id="contfill">
</div>
<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return on the top page" data-toggle="tooltip" data-placement="left"><span class="glyphicon glyphicon-chevron-up"></span></a>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="HabboImager">
<div class="modal-dialog modal-lg" 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">Habbo Imager</h4>
</div>
<div class="modal-body">
<?php include 'imager.php'; ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/respond.min.js"></script>
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="imagerscript.js"></script>
<script language="javascript" type="text/javascript" src="https://procyon.shoutca.st/system/streaminfo.js"></script>
<script>
window.SetVolume = function(val) {
var player = document.getElementById('player');
player.volume = val / 100;
}
function homePageInit() {
$('[data-toggle="tooltip"]').tooltip();
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function() {
$('#back-to-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
$('#back-to-top').tooltip('show');
var badgeUrl = 'http://habboo-a.akamaihd.net/c_images/album1584/';
$.getJSON( 'http://habboemotion.com/api/badge', function( badges ) {
$.each( badges.list, function( key, badge ) {
$('div#badges').append('<img src="'+badgeUrl+badge.code+'.gif" class="thumbnail aleft" alt="Badge" data-toggle="tooltip" data-placement="top" title="'+badge.name+' - '+badge.desc+'">');
return (key !== 11);
});
});
$.getScript('https://platform.twitter.com/widgets.js', function() {
});
$.getScript('http://habbfinity.ca/forum/external.php?type=js', function() {
var str = "";
for (x = 0; x < 4; x++) {
str += ""+threads[x].title+" <br>(Posted By: "+threads[x].poster+")<br><br />";
}
$("#habbfinity_forum").html(str);
console.log(str);
});
}
$(document).ready(function() {
$.ajax({
url: '<?php echo $page; ?>.php',
success: function(content) {
$("#contfill").html(content);
history.pushState(null, '', '<?php echo $page; ?>');
homePageInit();
}
});
$('#home').on("click", function(event) {
$.ajax({
url: 'home.php',
success: function(content) {
$("#contfill").html(content);
history.pushState(null, '', 'home');
homePageInit();
}
});
event.preventDefault();
});
$('#about').on("click", function(event) {
$.ajax({
url: 'about.php',
success: function(content) {
$("#contfill").html(content);
history.pushState(null, '', 'about');
homePageInit();
}
});
event.preventDefault();
});
$('#badges').on("click", function(event) {
$.ajax({
url: 'badges.php',
success: function(content) {
$("#contfill").html(content);
history.pushState(null, '', 'badges');
homePageInit();
}
});
event.preventDefault();
});
});
</script>
</body>
</html>
After discussing in chat, the solution was to remove the RewriteRule ^badges/([0-9]+)/?$ badges.php?id=$1 [L] from the htaccess. Any url that doesn't have a .php renders only the content portion of #contfill.
We then needed to modify the url the ajax uses in index.php, to convert the route from '/badges/324' to '/badges.php?id=324'
I am new to php. I have a sign up page that takes in few user details and makes an account. On running the code I get this error:
Parse error: syntax error, unexpected end of file on line 347
I have seen few other posts related to the same issue but I didnt find any of those helpful for my code. I have reviewed the code many times to see what I have done wrong but couldn't find my mistake. Please help with the statement or point where I have gone wrong. Thanks in advance.
My code is below:
sign-up.php
<!DOCTYPE html>
<html>
<head>
<title>My Trip Planner | Sign Up </title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Xtreme Travel Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/styles.css?v=1.6" rel="stylesheet">
<!-- js -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/scripts.js?v=1.7"></script>
<!-- //js -->
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<script type="text/javascript">
function formValidation()
{
var uid = document.registration.userid;
var passid = document.registration.passid;
var uemail = document.registration.email;
if(userid_validation(uid,5,12))
{
if(passid_validation(passid,7,12))
{
if(ValidateEmail(uemail))
{
}
}
}
return false;
}
function userid_validation(uid,mx,my)
{
var uid_len = uid.value.length;
if (uid_len == 0 || uid_len >= my || uid_len < mx)
{
alert("User Id should not be empty / length be between "+mx+" to "+my);
uid.focus();
return false;
}
return true;
}
function passid_validation(passid,mx,my)
{
var passid_len = passid.value.length;
if (passid_len == 0 ||passid_len >= my || passid_len < mx)
{
alert("Password should not be empty / length be between "+mx+" to "+my);
passid.focus();
return false;
}
return true;
}
function ValidateEmail(uemail)
{
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(uemail.value.match(mailformat))
{
//alert("You have entered a valid email address!");
return true;
}
else
{
alert("You have entered an invalid email address!");
uemail.focus();
return false;
}
}
</script>
<!-- start-smoth-scrolling -->
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Comfortaa:400,300,700' rel='stylesheet' type='text/css'>
</head>
<?php
session_start();
if(!empty($_POST)) {
class MyDB extends SQLite3
{
function __construct()
{
$this->open('mytrip.db');
}
}
$db = new MyDB();
if(!$db){
echo $db->lastErrorMsg();
} else {
}
$id=null;
$pass=null;
$email=null;
$fname=null;
$lname=null;
$id_exists=false;
if (isset($_POST['uid'])) {
$id = $_POST['uid'];
}
if (isset($_POST['passid'])) {
$pass = $_POST['passid'];
}
if (isset($_POST['uemail'])) {
$email = $_POST['uemail'];
}
if (isset($_POST['first'])) {
$fname = $_POST['first'];
}
if (isset($_POST['last'])) {
$lname = $_POST['last'];
$result= "SELECT COUNT(*) FROM Users WHERE ID = '".$id. "';" ;
$count= $db->querySingle($result);
if ($count > 0)
{
$id_exists = true;
echo "This id is not available. Please enter a valid id. ";
}
else
{
$sql= " INSERT INTO Users (ID, PASSWORD, EMAIL, FNAME, LNAME)
VALUES ('$id','$pass','$email', '$fname', '$lname'); " ;
$ret = $db->query($sql);
$_SESSION['Id'] = $id;
header("location:index.php");
}
$db->close();
}
?>
<body>
<!-- banner -->
<div class="banner1">
<div class="navigation">
<div class="container-fluid">
<nav class="pull">
<ul class="nav">
<li> Home</li>
<li> About</li>
<li>Popular Places<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></li>
<ul class="nav-sub">
<li>Place 1</li>
<li>Place 2</li>
<li>Place 3</li>
</ul>
<script>
$( "li a.menu" ).click(function() {
$( "ul.nav-sub" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<li> Events</li>
<li> Mail us</li>
</ul>
</nav>
</div>
</div>
<div class="header-top">
<div class="container">
<div class="head-logo">
<span>M</span>y Trip Planner<i>Feeling Amazing Tour</i>
</div>
<div class="top-nav">
<div class="hero fa-navicon fa-2x nav_slide_button" id="hero">
<img src="images/menu.png" alt="">
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- banner -->
<!-- sign-in -->
<div class="sign-in">
<div class="container">
<div class="in-form">
<h3>Register Here</h3>
<p class="use">Having hands on experience in creating innovative
designs,I do offer design solutions which harness.</p>
<div class="sign-in-form">
<div class="in-form Personal">
<h4>Personal Information</h4>
<form method="post" name='registration' onSubmit="return formValidation();">
<input type="text" placeholder="Firstname*" required=" " name="first">
<input type="text" placeholder="Lastname*" required=" " name="last">
<input type="text" placeholder="Emailaddress*" required=" " name="uemail">
<h4 class="kij">Login Information</h4>
<input type="text" placeholder="Id*" required=" " name="uid">
<input type="password" placeholder="Password*" required=" " name="passid">
<input type="password" placeholder="Confirm Password*" required=" ">
<input type="submit" value="submit">
</form>
</div>
</div>
</div>
</div>
</div>
<!-- //sign-in -->
<!-- footer-top -->
<div class="footer-top">
<div class="container">
<div class="col-md-3 footer-top-grid">
<h3>About <span> My Trip Planner</span></h3>
<p>Lets you plan the finest trips.</p>
</div>
<div class="col-md-3 footer-top-grid">
<h3>THE <span>TAGS</span></h3>
<div class="unorder">
<ul class="tag2">
<li>pool</li>
<li>gym</li>
<li>beach</li>
</ul>
<ul class="tag2">
<li>asian</li>
<li>thai</li>
<li>chinese</li>
<li>american</li>
</ul>
<ul class="tag2">
<li>theme park</li>
<li>wildlife</li>
<li>heritage</li>
</ul>
<ul class="tag2">
<li>shopping malls</li>
<li>local shops</li>
<li>boutiques</li>
</ul>
</div>
</div>
<div class="col-md-3 footer-top-grid">
<h3> User <span> Reviews</span></h3>
<ul class="twi">
<li>Location is close to empire state building and near bus stop. Staff was pleasant on check in.
<span></span></li>
<li>Outstanding food and service. Would return without hesitation.
<span></span></li>
<li>My wife and I love walking around and exploring cities. and New York is one of the few cities in USA you can enjoy doing that. SoHo has a great vibe about it, and we enjoyed walking around, grabbing a quick bite, and doing some shopping.
<span></span></li>
</ul>
</div>
<div class="col-md-3 footer-top-grid">
<h3> Popular <span> Destinations</span></h3>
<div class="flickr-grids">
<div class="flickr-grid">
<img src="images/minar.jpg" alt=" " class="img-responsive" />
</div>
<div class="flickr-grid">
<img src="images/bad.jpg" alt=" " class="img-responsive" />
</div>
<div class="flickr-grid">
<img src="images/kua1.jpg" alt=" " class="img-responsive" />
</div>
<div class="clearfix"> </div>
<div class="flickr-grid">
<img src="images/kua.jpg" alt=" " class="img-responsive" />
</div>
<div class="flickr-grid">
<img src="images/newyork.jpg" alt=" " class="img-responsive" />
</div>
<div class="flickr-grid">
<img src="images/can1.jpg" alt=" " class="img-responsive" />
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- //footer-top -->
<!-- footer -->
<div class="footer">
<div class="container">
<div class="footer-left">
<ul>
<li><i>M</i>y Trip Planner<span> |</span></li>
<!-- <li><p>The awesome agency. <span>0800 (123) 4567 // Australia 746 PO</span></p></li> -->
</ul>
</div>
<div class="footer-right">
<p>© 2017 My Trip Planner. All rights reserved | </p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- //footer -->
<!-- here stars scrolling icon -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!-- //here ends scrolling icon -->
</body>
</html>
you have this error because you miss "}" at line 141:
if (isset($_POST['last'])) {
$lname = $_POST['last'];
Add a closing bracket to line 141, so that the code is:
if (isset($_POST['last'])) {
$lname = $_POST['last'];
}
I tested your code locally and this is what fixed the syntax error.
What IDE or text editor do you use to write your code? I would suggest you something what points out such simple mistakes. For example netbeans for php or php storm, netbeans is free, php storm is not. Both of these editors will show to you your mistakes like this.
http://phpcodechecker.com/ says that 'Notification' is a (T_STRING) in my code. What should I replace ' to?
<?php
$Query = $this->DBase('Query', array( 0 => "SELECT * FROM `factions`" ));
while ($FACTIONS = $Query->fetch_object()) {
$this->FACTION->FACTIONSLIST .=
'<tr class="even pointer">
<td width="1%" class="a-center "><input type="checkbox" class="flat" name="table_records"></td>
<td width="10%">{$FACTIONS->id}</td>
<td>{$FACTIONS->Name} </td>
<td width="5%" class="last">
<a href="{SITE_CMS_ROOT}?factions&edit={$FACTIONS->id}">
<i class="fa fa-pencil"></i>
</a>
<a href="#" onclick="new TabbedNotification([
title: 'Notification',
text: 'Faction 123 successfully deleted!, page will be updated shortly.',
type: 'Error',
sound: false
]);">
<i class="fa fa-trash-o"></i>
</a>
</td>
</tr>';
}
?>
Here is the HTML with the onClick script.
The {SITE_FACTIONS} is the php script with the onClick function.
<body class="nav-md">
<div class="container body">
<div class="main_container">
{SITE_SIDEBAR}
{SITE_NAVIGATION}
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3> </h3>
</div>
<div class="title_right">
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="clearfix"></div>
{SITE_FACTIONS}
</div>
</div>
</div>
{SITE_FOOTER}
</div>
</div>
<div id="custom_notifications" class="custom-notifications dsp_none">
<ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group">
</ul>
<div class="clearfix"></div>
<div id="notif-group" class="tabbed_notifications"></div>
</div>
<!-- jQuery -->
<script src="{SITE_CMS_ROOT}vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="{SITE_CMS_ROOT}vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="{SITE_CMS_ROOT}vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="{SITE_CMS_ROOT}vendors/nprogress/nprogress.js"></script>
<!-- bootstrap-progressbar -->
<script src="{SITE_CMS_ROOT}vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<!-- iCheck -->
<script src="{SITE_CMS_ROOT}vendors/iCheck/icheck.min.js"></script>
<!-- PNotify -->
<script src="{SITE_CMS_ROOT}vendors/pnotify/dist/pnotify.js"></script>
<script src="{SITE_CMS_ROOT}vendors/pnotify/dist/pnotify.buttons.js"></script>
<script src="{SITE_CMS_ROOT}vendors/pnotify/dist/pnotify.nonblock.js"></script>
<!-- Custom Theme Scripts -->
<script src="{SITE_CMS_ROOT}build/js/custom.min.js"></script>
<!-- Custom Notification -->
<script>
$(document).ready(function() {
var cnt = 10;
TabbedNotification = function(options) {
var message = "<div id='ntf" + cnt + "' class='text alert-" + options.type + "' style='display:none'><h2><i class='fa fa-bell'></i> " + options.title +
"</h2><div class='close'><a href='javascript:;' class='notification_close'><i class='fa fa-close'></i></a></div><p>" + options.text + "</p></div>";
if (!document.getElementById('custom_notifications')) {
alert('doesnt exists');
} else {
$('#custom_notifications ul.notifications').append("<li><a id='ntlink" + cnt + "' class='alert-" + options.type + "' href='#ntf" + cnt + "'><i class='fa fa-bell animated shake'></i></a></li>");
$('#custom_notifications #notif-group').append(message);
cnt++;
CustomTabs(options);
}
};
CustomTabs = function(options) {
$('.tabbed_notifications > div').hide();
$('.tabbed_notifications > div:first-of-type').show();
$('#custom_notifications').removeClass('dsp_none');
$('.notifications a').click(function(e) {
e.preventDefault();
var $this = $(this),
tabbed_notifications = '#' + $this.parents('.notifications').data('tabbed_notifications'),
others = $this.closest('li').siblings().children('a'),
target = $this.attr('href');
others.removeClass('active');
$this.addClass('active');
$(tabbed_notifications).children('div').hide();
$(target).show();
});
};
CustomTabs();
var tabid = idname = '';
$(document).on('click', '.notification_close', function(e) {
idname = $(this).parent().parent().attr("id");
tabid = idname.substr(-2);
$('#ntf' + tabid).remove();
$('#ntlink' + tabid).parent().remove();
$('.notifications a').first().addClass('active');
$('#notif-group div').first().css('display', 'block');
});
});
</script>
<!-- /Custom Notification -->
chnage this:
title: 'Notification',
text: 'Faction 123 successfully deleted!, page will be updated shortly.',
type: 'Error',
to:
title: "Notification",
text: "Faction 123 successfully deleted!, page will be updated shortly.",
type: "Error",
When you are using ' (single quote) between two ' (single quote), you must escape the single quote. Try like this:
title: \'Notification\',
text: \'Faction 123 successfully deleted!, page will be updated shortly.\',
type: \'Error\',
I have built a mobile application for Android using Phonegap, the data is stored within a MySQL table and the data is fetched via ajax request, this works fine however, when trying to create a search query to filter the data literally after typing 2 letters my application is crashing? - Any idea?
<!-- Remote call to Server -->
<script type="text/javascript">
// Call the server for content
$.ajax({
url: 'https://www.ppl-support.co.uk/ratchetserver/getdata', // URL -> load the data
crossDomain: true,
success: function(data){
$(".list").html(data).show();
}
});
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='') {
$.ajax({
type: "POST",
url: "https://www.ppl-support.co.uk/ratchetserver/newgetdata.php",
data: dataString,
cache: false,
success: function(data) {
$(".list").html(data);
}
});
}else{
$.ajax({
url: 'https://www.ppl-support.co.uk/ratchetserver/getdata.php', //load data
success: function(data){
$(".list").html(data);
}
});
}
return true;
});
});
function Reload(){
location.reload(); // Reload the page onclick
}
// Send user to Home Screen
function Home(){
location.assign('index.html');
}
</script>
</head>
<body class="is-ump"><br><br>
<div id="users">
<!-- Load abbreviations markup -->
<ul class="table-view" style="padding-left:0px;" id="theList">
<ul class="list" style="padding-left:0px;">
<li class="table-view-cell media" >
<a class="navigate-right">
<img class="media-object pull-left" src="img/P1.png" style="width:50px;" alt="" >
<div class="media-body">
<h4 align="center">
Downloading contents, please wait...
</h4>
</div>
</a>
</li>
</ul>
</ul>
<!-- Search functionality --->
<div class="ump">
<div class="ump-widget-container">
<div class="ump-widget ump-search-widget ump-hidden" id="ump-search-widget">
<form action="#" method="POST">
<input class="search" style="font-family:exo;" value="" placeholder="Search Abbreviations.." /><!--
<button class="ump-button" style="color:white;background:#ffda00;font-family:exo;font-shadow:white;">Search</button> -->
</form>
</div>
<div class="ump-clear"></div>
</div>
<!-- navigational panel -->
<div class="ump-bar">
<div class="ump-clear">
Pocket Pilot
<div class="ump-icons">
<i class="fa fa-envelope"></i>
<i class="fa fa-search"></i>
<div class="ump-clear"></div>
</div>
</div>
<div class="ump-overlay"></div>
</div>
<nav>
<div class="ump-nav-container">
<div class="ump-header">
<img src="img/1.png" alt="" class="ump-header-background-image">
<a href="#" title="UMP - Ultra Menu Pro">
<img src="img/logo.png" alt="">
</a>
</div>
<div class="ump-nav">
<ul class="ump-default">
<li>
<a><h4 onclick="Home()">Home</h4></a>
</li>
<li>
<a><h4>About</h4></a>
</li>
</ul>
<ul class="ump-social">
<li>
<i class="fa fa-facebook"></i>
</li>
<li>
<i class="fa fa-google-plus"></i>
</li>
<li>
<i class="fa fa-twitter"></i>
</li>
<li>
<i class="fa fa-instagram"></i>
</li>
<li>
<i class="fa fa-youtube-play"></i>
</li>
</ul>
</div>
</div>
<a class="ump-toggle">
<i class="fa fa-times ump-close"></i>
<i class="fa fa-bars ump-open"></i>
</a>
</nav>
</div>
</div>
</body>
And this is my PHP file (Search)
<?php
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
$str = '';
if($_POST['search'] && $_POST['search'] != "") {
$q = $_POST['search'];
include_once('dbconnection.php');
$sql = "SELECT * FROM `co_abbreviation` WHERE `acronym` LIKE = '%$q%'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {
$str .= "<div class='card' style='border-radius:0px;'>
<ul class='table-view'>
<ul class='list' style='padding-left:0px;'>
<li class='table-view-cell media'>
<a class='navigate-right'>
<div class='media-body'>
<h3 class='name'>
<b>
".$row['acronym']."
</b>
</h3>
<h4 class='born' style='color:#1e404e;'>
<i>
".$row['meaning']."
</i>
</h4>
<p class='mean' align='left'>
CAA Source: ".$row['source']."
</p>
</div>
</a>
</li>
</ul>
</ul>
</div>";
}
}
echo $str;
?>
App screen
You may just return the array in a formatted form(ex. in json format) and return it. When you create the HTML code in server and send it to client, then create the HTML code in JS function in client. Sending HTML code takes a lot bigger time than sending the result array( as you said there is approximately 1k data) .Moreover it will creates more data traffic also.