As a beginning coder, I could use some help understanding what's involved in building a listview populated from a database with rows that can expand and collapse, providing more information, with embedded buttons for controls? I'd like to use mostly bootstrap and python or PHP and replicate this: http://preview.iatistandard.org/index.php?url=http%3A//iati.oxfam.org.uk/xml/oxfamgb-lb.xml
Answers to similar questions are too high-level. Can someone please map out the example's basic components and functions at least and where the database scripts go and what they do? Thanks!
Here is the DEMO that you required
$('.collapse').on('shown.bs.collapse', function (e) {
//Get the id of the collapsible which is opened
var id = $(this).attr("id");
//Set the minus icon as this collapsible is now opened
$('a[href="#'+ id +'"]').find("span.glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
//You know now which collapsible is clicked, so get the data for this id which is in attribute data-collapisbleId
var collapsibleDataId = $(this).data("collapisbleId");
//Now we have the id of the collapisble whihc we can use to get the deatails for this id, and then we will insert that into the detail section
}).on('hide.bs.collapse', function (e) {
var id = $(this).attr("id");
$('a[href="#'+ id +'"]').find("span.glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
var collapsibleDataId = $(this).data("collapisbleId");
$.ajax({
//Make hit to get the detials using ajax and on success of that insert the data in the dic with id = $(this).attr("id"); whihc is current div
});
});
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Here I have just added the hardwired collapisbles, you have to make here loop to make these
for example. You got here the list of the collapisable heading and then you are making loop to make the collapisble
I have used here ASP.Net MVC as am not good in PHP or Python but the logic will go same here. Think as the below div are created using this loop
#(for var i= 0; i> Model.Count(); i++){
<div>
<a class="btn btn-link" role="button" data-toggle="collapse" href="#link#(i+1)" aria-expanded="false" aria-controls="collapseExample">
<span class="glyphicon glyphicon-plus"></span> Link 1
</a>
<div class="collapse" id="link#(i+1)" data-collapisbleId="#Model.Id">
//Detials section
</div>
</div>
} -->
<div>
<a class="btn btn-link" role="button" data-toggle="collapse" href="#link1" aria-expanded="false" aria-controls="collapseExample">
<span class="glyphicon glyphicon-plus"></span> Link 1
</a>
<div class="collapse" id="link1" data-collapisbleId="1">
<!--Detials section-->
Link 1
</div>
</div>
<div>
<a class="btn btn-link" role="button" data-toggle="collapse" href="#link2" aria-expanded="false" aria-controls="collapseExample">
<span class="glyphicon glyphicon-plus"></span> Link 2
</a>
<div class="collapse" id="link2" data-collapisbleId="2">
<!--Detials section-->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
**Complete DEMO**
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.collapse').on('shown.bs.collapse', function (e) {
//Get the id of the collapsible which is opened
var id = $(this).attr("id");
//Set the minus icon as this collapsible is now opened
$('a[href="#'+ id +'"]').find("span.glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
//You know now which collapsible is clicked, so get the data for this id which is in attribute data-collapisbleId
var collapsibleDataId = $(this).data("collapisbleId");
//Now we have the id of the collapisble whihc we can use to get the deatails for this id, and then we will insert that into the detail section
}).on('hide.bs.collapse', function (e) {
var id = $(this).attr("id");
$('a[href="#'+ id +'"]').find("span.glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
var collapsibleDataId = $(this).data("collapisbleId");
$.ajax({
//Make hit to get the detials using ajax and on success of that insert the data in the dic with id = $(this).attr("id"); whihc is current div
});
});
});
</script>
</head>
<body>
<!-- Here I have just added the hardwired collapisbles, you have to make here loop to make these
for example. You got here the list of the collapisable heading and then you are making loop to make the collapisble
I have used here ASP.Net MVC as am not good in PHP or Python but the logic will go same here. Think as the below div are created using this loop
#(for var i= 0; i> Model.Count(); i++){
<div>
<a class="btn btn-link" role="button" data-toggle="collapse" href="#link#(i+1)" aria-expanded="false" aria-controls="collapseExample">
<span class="glyphicon glyphicon-plus"></span> Link 1
</a>
<div class="collapse" id="link#(i+1)" data-collapisbleId="#Model.Id">
//Detials section
</div>
</div>
} -->
<div>
<a class="btn btn-link" role="button" data-toggle="collapse" href="#link1" aria-expanded="false" aria-controls="collapseExample">
<span class="glyphicon glyphicon-plus"></span> Link 1
</a>
<div class="collapse" id="link1" data-collapisbleId="1">
<!--Detials section-->
Link 1
</div>
</div>
<div>
<a class="btn btn-link" role="button" data-toggle="collapse" href="#link2" aria-expanded="false" aria-controls="collapseExample">
<span class="glyphicon glyphicon-plus"></span> Link 2
</a>
<div class="collapse" id="link2" data-collapisbleId="2">
<!--Detials section-->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
</body>
</html>
Related
I am building a chat application and when I click the available users list (which is generated from a php while loop) the chat area is supposed to carry the information of that user and previous chat history (if any). However, for some reason ajax onclick keeps returning just the first user on the list into the chat area.
I have tried different methods of getting each user's id from the users-list (a separate php file) and passing it to the active-chat area (another php file) using ajax. I believe I'm missing something or doing something wrong. Every suggestion or different approach will be very much appreciated.
User's List PHP Code:
<?php
// this php is an include in another php file if certain conditions are met.
while($users = mysqli_fetch_assoc($sql)){
// the list of users generated into the home page
$output .= '<li id="contact" class="get-user-chats">
<input type="hidden" id="getUserId" value="'.$users['user_id'].'"/>
<span class="avatar"><img src="'.$users['display_pic'].'" height="42" width="42" alt="Generic placeholder image" />
<span class="'.$users['online_status'].'"></span>
</span>
<div class="chat-info flex-grow-1">
<h5 class="mb-0">'.$users['full_name'].'</h5>
<p class="card-text text-truncate">
This is just a test message to see if the truncate feature works
</p>
</div>
<div class="chat-meta text-nowrap">
<small class="float-end mb-25 chat-time">4:14 PM</small>
<span class="badge bg-danger rounded-pill float-end">3</span>
</div>
</li>';
}
?>
Ajax Code:
$(document).ready(function(){
$('.users-list').click(function(){
//users-list is a class from the home page where the users list displays in a div
var $container = $(this).find(".get-user-chats");
var chatid = $container.find("#getUserId").val();
$.ajax({
url: './code/active-chat.php',
type: 'POST',
data: {
chatuserid: chatid
},
success: function(response){
//alert(chatid)
$('.get-active-chat-user').html(response);
},
dataType: 'text'
});
});
});
active-chat.php
<?php
// active-chat.php
session_start();
define('BASEPATH', true);
require "../../../../private/engine.php";
$chatid = $_POST['chatuserid'];
$sql = "SELECT * FROM users WHERE user_id = '{$chatid}'";
$fetchdata = mysqli_query($connection, $sql);
while($sub = mysqli_fetch_array($fetchdata)){
?>
<header class="chat-header">
<div class="d-flex align-items-center">
<div class="sidebar-toggle d-block d-lg-none me-1">
<i data-feather="menu" class="font-medium-5"></i>
</div>
<div class="avatar avatar-border user-profile-toggle m-0 me-1">
<img src="<?php echo $sub['display_pic']; ?>" alt="avatar" height="36" width="36" />
<span class="<?php echo $sub['online_status']; ?>"></span>
</div>
<h6 class="mb-0"><?php echo $sub['full_name'] ?></h6>
</div>
<div class="d-flex align-items-center">
<i data-feather="phone-call" class="cursor-pointer d-sm-block d-none font-medium-2 me-1"></i>
<i data-feather="video" class="cursor-pointer d-sm-block d-none font-medium-2 me-1"></i>
<!-- <i data-feather="search" class="cursor-pointer d-sm-block d-none font-medium-2"></i> -->
<div class="dropdown">
<button class="btn-icon btn btn-transparent hide-arrow btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i data-feather="more-vertical" id="chat-header-actions" class="font-medium-2"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="chat-header-actions">
<a class="dropdown-item" href="#">View Contact</a>
<a class="dropdown-item" href="#">Mute Notifications</a>
<a class="dropdown-item" href="#">Block Contact</a>
<a class="dropdown-item" href="#">Clear Chat</a>
<a class="dropdown-item" href="#">Report</a>
</div>
</div>
</div>
</header>
<?php } ?>
Screenshot of the Chat Screen:
Chat Screen
I have researched on related topics but none of them seems to address my specific issue.
I am trying to implement a simple food tracker for my restaurant website which updates food status. What I want to do is that whenever I update the food status for an order, the icon becomes green for that stage. I need to perform a query from my website and get the food status value and update it without page refresh. How do I do that? Please help me, it is very important
<div class="progressbar">
<ul >
<li>
<img style="width:130px;height:130px;margin-left:100px"src="foodStatusImages/waiting.png">
<i style="margin-left:150px" class="fa fa-check" id="iconstatus"></i>
<h5 style="margin-left:80px;display: inline-block;white-space: nowrap;">Waiting for
confirmation</h5>
</li>
<li>
<img style="width:130px;height:130px;margin-left:200px;"src="foodStatusImages/confirmed.png">
<i style="margin-left:250px" class="fa fa-check" id="iconstatus"></i>
<h5 style="margin-left:190px;display: inline-block;white-space: nowrap;">Order Confirmed</h5>
</li>
<li>
<img style="width:130px;height:130px;margin-left:350px"src="foodStatusImages/preparing.png">
<i style="margin-left:400px"class="fa fa-check" id="iconstatus"></i>
<h5 style="margin-left:350px;display: inline-block;white-space: nowrap;">In preparation...
</h5>
</li>
<li>
<img style="width:130px;height:130px;margin-left:530px;"src="foodStatusImages/Ready.png">
<i style="margin-left:590px" class="fa fa-check" id="iconstatus"></i>
<h5 style="margin-left:520px;display: inline-block;white-space: nowrap;">Your order is
ready</h5>
</li>-->
<ul>
</div>
<script>
$(document).ready(function()
{
$(function()
{
$("ul li:nth-child(1) i.fa").css("background","#148e14");
var icons = $('#iconstatus'); //does not work
console.log(icons);
$.ajax({
url:"action.php",
data:{icons:icons},
cache:false,
method:"POST",
sucess:function(result)
{
}
});
}
);
});
</script>
PHP Code:
<td>
<div class="dropdown">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="demolist">
<a class="dropdown-item " id="achieve" value="<?php echo $value['user_login_id'] ?>">Achivements</a>
<a class="dropdown-item" id="skill" value="<?php echo $value['user_login_id'] ?>">Skills</a>
<!--
<a class="dropdown-item">Remove</a>
<a class="dropdown-item">View Applicant</a>
-->
</div>
</div>
</td>
Here I have a dropdown button in each row where each dropdown has a list of achievements / skills. When clicking an achievement or skill I want to pass that row's id to ajax.
How should I send with ajax?
Using this method you can easily get the dropdown value:
Pass the id or class by using the .value method.
var submitForm = function() {
var name = document.querySelector('.name').value;
console.log(name);
}
document.querySelector('.btn').addEventListener('click', submitForm);
<input type="text" placeholder="name" class="name"><button class="btn" value="submit">Submit</button>
I have solution like this code i think you enough smart to understand it but let me know if you cant get it.
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="demolist">
<a class="dropdown-item achivementClass" id="achieve" value="value1">Achivements</a>
<a class="dropdown-item" id="skill" >Skills</a>
<a class="dropdown-item">Remove</a>
<a class="dropdown-item">View Applicant</a>
</div>
This your script code
<script>
$(function() {
$('.achivementClass').click(function(){
id =$(this).attr('value');
console.log(id);
});
});
</script>
I want to implement a jump to functionality. It is basically like a breadcrums but not exactly. It is a dropdown and can have left and right button. Please see my code below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="btn-group" role="group" aria-label="...">
←
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Jump to
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Assignment1</li>
<li>Quiz2</li>
<li>Quiz4</li>
<li>Assignment2</li>
</ul>
</div>
→
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Controller
$course = Course::with([
'assignments' => $undeleted,
'quizzes' => $undeleted,
'add_links' => $undeleted
])->findOrFail($course_id);
$course_items = collect($course->assignments);
$course_items = $course_items->merge(collect($course->quizzes));
$course_items = $course_items->merge(collect($course->add_links));
$course_items = $course_items->sortBy('item_number');
Result want:
If the $course loops, it can list the items sort by item_number. If you are click the first item, then there should be no left arrow, same with the last item, if you click the last item, there should be no right arrow. The list of items are listed in the dropdown I've created.
Problem
I don't have any idea how can I add a condition if the item is the first item so I can remove the left button, and same with the last item.
Note: I'm using laravel 5.1
i think you mean in the template:
you can use
#foreach ($users as $user)
<p>This is user {{ $user->id }}</p>
#endforeach
inside the "foreach" loop you has the variable loop
#foreach ($users as $user)
#if ($user == reset($users ))
This is the first iteration.
#endif
#if ($user == end($users))
This is the last iteration.
#endif
<p>This is user {{ $user->id }}</p>
#endforeach
so you can see if first or last item
more:
http://php.net/manual/en/function.reset.php
http://php.net/manual/en/function.end.php
Hello Try this
it will start with no prev button, when you click on any thing has prev, prev will be shown, also when you click on anything has no nex the next will be hidden.. and so on..
give id="next" to next and id="prev" to prev buttons
Please run this snippet
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="btn-group" role="group" aria-label="...">
←
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Jump to
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Assignment1</li>
<li>Quiz2</li>
<li>Quiz4</li>
<li>Assignment2</li>
</ul>
</div>
→
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$('#prev').hide();
$(".dropdown-menu li").click(function(){
if($(this).next('li').length <= 0) {
$('#next').hide();
} else {
$('#next').show();
}
if($(this).prev('li').length <= 0) {
$('#prev').hide();
} else {
$('#prev').show();
}
});
</script>
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
}
})();