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\',
Related
I want to delete user with bootbox dialog window but when i click remove button the bootbox dialog window doesn't show. I wrote a simple program. Here is my codes:
Before i confirm in libraries:
<head>
<title>Adminstration</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootbox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
My html code like this:
<form id="form1" action="footer.php">
<div class="body-wrap" id="wrapper" style="overflow: auto;">
<div class="container" id="container" style=" margin-top: 40px;">
<div class="well col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2" id="well">
<?php $arr = array(1, 2, 3, 4); foreach ($arr as $value)
{ $value = $value * 2;
?>
<div class="row user-row" style="border-bottom: 1px solid #ddd;">
<div class="col-xs-8 col-sm-9 col-md-10 col-lg-10">
<strong><?php echo $value ?></strong><br>
<span class="text-muted">Value: <?php echo $value; ?> </span>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 dropdown-user pull-right" data-for=".<?php echo $value; ?>">
<i class="glyphicon glyphicon-chevron-down text-muted "></i>
</div>
</div>
<div class="row user-infos <?php echo $value; ?>" id="user-infos">
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 col-xs-offset-0 col-sm-offset-0 col-md-offset-1 col-lg-offset-1" id="col-xs">
<div class="panel panel-primary" id="panel">
<div class="panel-heading">
<h2 class="panel-title" style="text-align: center;">user info</h2>
</div>
<div class="panel-body">
<div class="row-fluid">
<div class="span6">
<h3> <?php echo $value ?> </h3><br>
</div>
</div>
</div>
<div class="panel-footer clearfix" id="footer">
<span>
<a class="delete_user btn btn-danger btn-sm pull-right" id="del" href="" data-toggle="tooltip" title="Delete user"><span class="glyphicon glyphicon-remove"></span></a>
</span >
</div>
</div>
</div>
</div><?php } ?>
</div>
</div>
</div>
</form>
And js code:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
/************************USERS********************************/
$(document).ready(function() {
var panels = $('.user-infos');
var panelsButton = $('.dropdown-user');
panels.hide();
//Click dropdown
panelsButton.click(function() {
//get data-for attribute
var dataFor = $(this).attr('data-for');
var idFor = $(dataFor);
//current button
var currentButton = $(this);
idFor.slideToggle(400, function() {
//Completed slidetoggle
if(idFor.is(':visible'))
{
currentButton.html('<i class="glyphicon glyphicon-chevron-up text-muted"></i>');
}
else
{
currentButton.html('<i class="glyphicon glyphicon-chevron-down text-muted"></i>');
}
})
});
});
/********************************************************/
/************************DELETE USERS*************************************/
$(document).ready(function(){
$('.delete_user#del').click(function(e){
e.preventDefault();
bootbox.dialog({
message: "<i class='fa fa-warning fa-2x' style='color: orange;'></i><span style='font-size:16px; position: absolute; margin-left: 5px; margin-top: 5px;'>Are you sure to delete this user?</span>",
title: "<i class='glyphicon glyphicon-trash'></i> Delete user!",
buttons: {
danger: {
label: "Delete!",
className: "btn-danger",
callback: function() {/*some code*/}
},
success: {
label: "No",
className: "btn-success",
callback: function() {
$('.bootbox').modal('hide');
}
}
}
});
});
});
/*******************************************************************/
This js code for bootbox dialog is work another php file but doesn't work for this php file.
I'm a newbie in CodeIgniter and I'm trying to pass my form inputs from the view to the controller. I was able to pass it, and was able to insert it on the database. However, I want to use Ajax for this so the whole page won't reload when I press the submit button. I have watched and tried this youtube tutorial: https://www.youtube.com/watch?v=IURutxKvukA, but it doesn't work for me. :( Thank you in advance!
This is my controller, Teacher.php
public function insert_quiz($quiztitle, $quizdescription, $value="")
{
$data = $this->input->post();
$numData = count($data);
$response = array();
$stringChoices = "";
if($numData > 1)
{
for ($i=4; $i < $numData; $i++)
{
$num = $i-3;
$offset = "inputChoice$num";
if ($i == 4)
{
$stringChoices = $data[$offset];
}
else if ($i != 4)
{
$stringChoices = $stringChoices . "," . $data[$offset];
}
}
}
$quizitems = array('Question' => $data['inputQuestion'], 'Choices' => $stringChoices, 'Correct' => $data['correctanswer'], 'NumSequence' => $data['questionnumber']);
$quizitemid = $this->Teacher_model->insertQuizItemOnQuizItems($quizitems);
if (count($quizitemid) == 1)
{
$quizdeedid = $this->Teacher_model->getQuizDeedId($quiztitle);
$quizdatasetitem = array('QuizSet' => $data['quizsetnumber'], 'QuizItemID' => $quizitemid, 'QuizDeedID' => $quizdeedid);
$quizdatasetid = $this->Teacher_model->insertQuizOnQuizDataSet($quizdatasetitem);
if(count($quizdatasetid) == 1)
{
$response = array(
'status' => "success"
);
echo json_encode($response);
}
}
}
and this is my quiz form, in quizView.php
<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical
nav-pf-persistent-secondary">
<div class="row row-cards-pf">
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="card-pf">
<div class="card-pf-heading">
<h1 align="center">
<strong><?php echo str_replace("%20", " ", $quizTitle); ?></strong>
</h1>
<h2 class="card-pf-title" align="center">
<label><?php echo str_replace("%20", " ", $quizDescription); ?></label>
</h2>
</div>
<div class="card-pf-body" id="divquizset" style="height: 50px">
<div class="col-sm-2">
</div>
<div class="col-sm-9" id="divquizset">
<div class="col-sm-3">
<p align="right"> QUIZ SET: </p>
</div>
<div class="col-sm-4">
<input align="center" type="text" id="quizset" class="form-control"></input>
</div>
<button class="btn btn-default col-sm-2" align="left" onclick="saveQuizSet()">Save</button>
</div>
<div class="col-sm-1">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="col-sm-12">
<div id="status">
</div>
</div>
</div>
</div>
<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical
nav-pf-persistent-secondary" id="list1" style="padding-top: 0px">
<!-- LIST VIEW PART 1 -->
<div id = "div1" style="padding-top: 0px">
<?php echo form_open("Teacher/insert_quiz/$quizTitle/$quizDescription", "id='myForm'", $hidden= array()); ?>
<div>
<div class="list-group list-view-pf list-view-pf-view">
<div class="list-group-item">
<div class="list-group-item-header" id="div2">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-view-pf-checkbox">
<input type="text" name="questionnumber" id="inputquestionnumber1" class="form-control">
<!-- <b id="questionnumber" name="questionlabel" for="inputQuestion">Question 1: </b> -->
<input type="hidden" name="quizsetnumber" id="quizsetnum" class="form-control" value="">
</div>
<div class="list-view-pf-actions">
<?php echo form_submit('submit', 'Save', $attributes=array("class" => "btn btn-default")); ?>
<!-- <button class="btn btn-default" style="width: 100px">Save</button> -->
<button class="btn btn-default" style="width: 100px">Edit</button>
<button class="btn btn-default" style="width: 100px">Delete</button>
</div>
<div class="list-view-pf-main-info">
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-text form-group">
<input type="text" name="inputQuestion" id="input1" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item-container container-fluid hidden" id="containerDiv">
<div class="close">
<span class="pficon pficon-close"></span>
</div>
<div class="row">
<!-- LIST VIEW SUB VIEW -->
<div class="col-md-12">
<form class="form-horizontal" style="padding-left: 100px">
<div class="form-group">
<div class="col-sm-7" align="center">
<dt> CHOICES </dt>
</div>
<div class="col-sm-5" align="center">
<dt> CORRECT ANSWER </dt>
</div>
<div class="col-sm-7">
<div id="divCorrect" style="padding-top: 10px">
<input type="text" name="correctanswer" id="inputcorrectanswer1" class="form-control">
</div>
</div>
<div class="col-sm-5" id="divChoiceContainer1">
<div id="divChoice" style="padding-top: 10px">
<input type="text" name="inputChoice1" id="inpChoice1" class="form-control">
</div>
</div>
<div class="col-sm-7" id="otherDivChoiceContainer1">
</div>
<div class="col-sm-7" align="center" style="padding-top: 20px">
<button type="button" class="btn btn-primary btn-lg btn-block col-xs-9" id = "1" align="center" onclick="addChoiceFunction(this.id)" >Add Choices</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<?= form_close() ?>
</form>
</div>
</div>
</div>
<div class="col-sm-3 container-fluid container-cards-pf container-pf-nav-pf-vertical nav-pf-persistent-secondary">
<button type="button" class="btn btn-primary btn-lg btn-block col-md-9" align="center" onclick="addQuestionFunction()">Add Question</button>
</div>
These are the scripts I used, they're also in the quizView.php:
<script>
jQuery(document).ready(function($) {
$('#myForm').ajaxForm({
beforeSubmit: function(formData, jqForm, options){
$("div#status").html('');
},
success: function(response){
var result = $.parseJSON(response);
$("div#status").html('<div class="alert alert-' + result.status + '" role="alert"> HI </div>');
}
});
});
</script>
<script>
$(document).ready(function () {
// click the list-view heading then expand a row
$(".list-group-item-header").click(function(event){
if(!$(event.target).is("button, a, input, .fa-ellipsis-v")){
$(this).find(".fa-angle-right").toggleClass("fa-angle-down")
.end().parent().toggleClass("list-view-pf-expand-active")
.find(".list-group-item-container").toggleClass("hidden");
} else {
}
})
// click the close button, hide the expand row and remove the active status
$(".list-group-item-container .close").on("click", function (){
$(this).parent().addClass("hidden")
.parent().removeClass("list-view-pf-expand-active")
.find(".fa-angle-right").removeClass("fa-angle-down");
})
});
</script>
<script>
function addQuestionFunction() {
$num = $('div .list-view-pf-view').length + 1;
$divId = "#" + $num;
$toClone = $('#div1').clone(true).find("input").val("").end();
$($toClone).find("#containerDiv").addClass("hidden").end();
$($toClone).find("#otherDivChoiceContainer1").attr("id", "otherDivChoiceContainer"+ $num);
$($toClone).find("#otherDivChoiceContainer" + $num).find("#divChoice").remove().end();
$($toClone).find("#1").attr("id", $num);
$($toClone).find("#questionnumber").text("Question " + $num + ": ");
if($($toClone).find("span").hasClass("fa-angle-down")) {
$($toClone).find(".fa-angle-right").removeClass("fa-angle-down").end();
}
$('#list1').append($toClone);
}
function addChoiceFunction(clicked_id) {
$num = parseInt(clicked_id);
$divId = "#otherDivChoiceContainer" + $num;
$numChoice = $($divId + " input").length + 2;
$toClone = $('#divChoice').clone(true).find("input").val("").end();
$toClone.find("#inpChoice1").attr("id", "inpChoice" + $numChoice).attr("name", "inputChoice" + $numChoice);
// $toClone.find("#inpChoice" + $num).attr("name", $("#inpChoice"+$num).attr("name").replace(/\\[\d+\\]/,"inputChoice" + $num));
//alert($numChoice);
$($divId).append($($toClone));
}
function saveQuizSet() {
$('#quizsetnum').val($('#quizset').val());
$quizsetval = $('#quizset').val();
$('#divquizset').empty();
$('#divquizset').append(' <p align="center"> QUIZ SET: '+ $quizsetval + '</p>');
// $('#divquizset').append(" <p align="center"> QUIZ SET: A </p>");
}
</script>
And for my script sources I used these:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
<script src="http://www.patternfly.org/components/jquery/dist/jquery.min.js"></script>
<script src="http://www.patternfly.org/components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="http://www.patternfly.org/components/patternfly-bootstrap-combobox/js/bootstrap-combobox.js"></script>
<script src="http://www.patternfly.org/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
<script src="http://www.patternfly.org/components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="http://www.patternfly.org/components/d3/d3.min.js"></script>
<script src="http://www.patternfly.org/components/c3/c3.min.js"></script>
<script src="http://www.patternfly.org/components/datatables/media/js/jquery.dataTables.js"></script>
<script src="http://www.patternfly.org/components/google-code-prettify/bin/prettify.min.js"></script>
<script src="http://www.patternfly.org/components/clipboard/dist/clipboard.min.js"></script>
<script src="http://www.patternfly.org/components/patternfly/dist/js/patternfly.min.js"></script>
<script src="http://www.patternfly.org/components/jquery-match-height/dist/jquery.matchHeight-min.js"></script>
<script src="http://www.patternfly.org/assets/js/patternfly-site.min.js"></script>
<link rel="canonical" href="http://www.patternfly.org/pattern-library/navigation/vertical-navigation/vertical-navigation.html">
This is what my form looks like
quizviewform
And this is what it's returning
returnpage
It's inserting on my database, but it doesn't return on the page and ajax doesn't work. :( I hope someone can help me here. Thanks!
I can print it but the output is wrong. This is my script for print:
<script type="text/javascript">
function printDiv(divName)
{
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
And this is for the view:
<div class="accordion-body collapse in body" id="printableArea">
<div class="col-lg-12">
<span class="text-left"><h4><b>Course Code-Section: </b><?php echo $class;?></h4></span>
<span class="text-left"><h4><b>Course Description: </b><?php echo $description;?></h4></span>
<span class="text-left"><h4><b>School Year-Semester: </b><?php echo $schoolyearsemester;?></h4></span>
<span class="text-left"><h4><b>Day-Time: </b><?php echo $daytime;?></h4></span>
<span class="text-left"><h4><b>Room: </b><?php echo $room;?></h4></span>
<br>
</div>
<ul class="draglist" style="width:{{config.width * config.col}}px;" ng-cloak>
<li ng-repeat="obj in chairs" ng-drop="false" ng-drop-success="onDropComplete($index, $data,$event)" ng-cloak>
<div ng-drag="false" ng-drag-data="obj" ng-class="obj" ng-cloak>
<span class="student-name">{{obj.length > 3 ? obj: ''}}</span>
</div>
</li>
</ul>
<div class="form-actions">
<h3 class="text-center">Professor's Table</h3>
</div>
</div>
<input type="button" onclick="printDiv('printableArea')" value="Print Seatplan" />
And this is the image or output that displaying:
And this is the one that I am printing, a drag and drop seatplan:
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
}
})();
Hello i'm trying to change a string value replace with selectbox.
So there are my codes. It shows what i want to do.
These are codes that i want to change.
<div id="a">
<div id="a1">{box}</div>
<div id="a2">{box}</div>
</div>
<div id="b">
<div id="b1">{box}</div>
<div id="b2">{box}</div>
</div>
can i replace as shown at below:
<div id="a">
<div id="a1"><select id="a1_box">...</select></div>
<div id="a2"><select id="a2_box">...</select></div>
</div>
<div id="b">
<div id="b1"><select id="b1_box">...</select></div>
<div id="b2"><select id="b2_box">...</select></div>
</div>
Here is the jQuery -
$('div').each(function() {
var currentText = $(this).text();
if('{box}' == currentText){
var newID = $(this).attr('id') + '_box';
var newHTML = '<select id=' + newID + '></select>';
$(this).html(newHTML);
}
});
EXAMPLE
Yes you can . See the below code .
function convert(){
$(".box").each(function(){
var id=$(this)[0].id;
var select='<select id="'+id+'_box"><option>item</option></select>';
$(this).html(select);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="a" >
<div id="a1" class="box">{box}</div>
<div id="a2" class="box">{box}</div>
</div>
<div id="b">
<div id="b1" class="box">{box}</div>
<div id="b2" class="box">{box}</div>
</div>
<button onClick='convert()'> convert</button>