Weird behavior after using jQuery load function in IE 9 - php

So i have this code that works in all my browsers but has a weird behavior in IE.
$(document).ready(function () {
//$.ajaxSettings.cache = false;
var refresh = setInterval(function () {
$('div#top_right').load('refresh.php?randval=' + Math.random() * 99999);
}, 5000);
$.ajaxSetup({
// Disable caching of AJAX responses
cache: false
});
});
This reloads my user panel div and checks if there is any new messages and such (and as you can see I tried modifying in for IE caching). This works well with all browsers, even IE, but in IE after the first reload it removes all the href attributes to the links (such as the messages link) in the user panel div. I have no clue why this is happening. Please help?
This is the code for refresh.php:
<?php
session_start();
include_once 'functions.php';
$user = $_SESSION['user'];
$new_message = FALSE;
$new_friend = FALSE;
$new_reply = FALSE;
$query = "SELECT status FROM messages WHERE recip='$user'";
$result = queryMysql($query, "divs");
while($row=mysql_fetch_assoc($result)){
if($row['status']=='new') $new_message=TRUE;
}
$query2 = "SELECT status from friends WHERE user='$user'";
$result2 = queryMysql($query2, "nezworld");
while($row2=mysql_fetch_assoc($result2)){
if($row2['status']=='pending') $new_friend=TRUE;
}
$query3 = "SELECT status from replies WHERE recip='$user'";
$result3 = queryMysql($query3, "divs");
while($row3=mysql_fetch_assoc($result3)){
if($row3['status']=='new') $new_reply = TRUE;
}
?>
<div id="top_right"><ul id="login2">
<li class="user_nav"><?php echo $user; ?></li>
<abbr title="Home"><a href="index.php" class='white'><li class='icons home'>N</li></a></abbr>
<abbr title="Messages"><a href="message.php?view=<?php echo $user; ?>" class='white'><?php if($new_message){?><li class='icons2 messages2'><?php }else{?><li class='icons2 messages'><?php }?>M</li></a></abbr>
<abbr title="Replies"><a href="replies.php?view=<?php echo $user; ?>" class='white'><?php if($new_reply){?><li class='icons2 replies4'><?php }else{?><li class='icons2 replies2'><?php }?>R</li></a></abbr>
<abbr title="Friend Requests"><a href="friends.php?view=<?php echo $user; ?>" class='white'><?php if($new_friend){?><li class='icons2 friends2'><?php }else{?><li class='icons2 friends'><?php }?>F</li></a></abbr>
<li><a class="submit" class='white' href="logout.php">LOGOUT</a>
</form>
</li>
</ul></div>

Related

Why does the php code show in my website page? [duplicate]

This question already has answers here:
PHP code is not being executed, but the code shows in the browser source code
(35 answers)
Closed 6 years ago.
I am still new with using PHP, so i am having a problem which is when i run this code, the PHP show in my browser.
I tried saving the file. html and this is the result
and if I tried to save it .php, this is the result
and here is my code
Can anyone help me ?!
Code:
<?php
include_once ("php_includes/check_login_status.php");
//If user is already logged in, header it away
if ($member_ok == true)
{
header ("location: Member.php?u=".$_SESSION["Username"]);
exit();
}
?>
<?php
//AJAX calls this part to be executed
if ( isset($_POST["e"]))
{
$e = mysqli_real_escape_string($db_conx, $_POST['e']);
$sql = "SELECT MmeberID, Username FROM Member WHERE Email='$e' AND activated='1' LIMIT 1";
$query = mysqli_query($db_conx, $sql);
$numrows = mysqli_num_rows($query);
if ($numrows > 0) // The member exists
{
while($row = mysqli_fetch_array($query, MYSQLI_ASSOC))
{
$id = $row["id"];
$u = $row["username"];
}
$emailcut = substr($e, 0, 4); //Cut the first 4 character of their mail
$randNum = rand(10000,99999); // generate 5 digits random number
$tempPass = "$emailcut$randNum"; //concatinate these two var to make the new random pass
$hashTempPass = md5($tempPass); //hash this new random password
$sql = "UPDATE Member SET temp_pass='$hashTempPass' WHERE Username='$u' LIMIT 1"; //Update the member table with the new password
$query = mysqli_query($db_conx, $sql);
$to = "$e";
$from = "IT_Department#8bits.com";
$headers ="From: $from\n";
$subject ="yoursite Temporary Password";
$msg = '<h2>Hello '.$u.'</h2>
<p> Somebody recently asked to reset your Facebook password. Didnt request this change? If you didnt request a new password.</p>
<p>We can generated a temporary password for you to log in with, then once logged in you can change your password to anything you like.</p>
<p>After you click the link below your password to login will be:<br /><b>'.$tempPass.'</b></p>
<p>Click here now to apply the temporary password shown below to your account</p>
<p>If you do not click the link in this email, no changes will be made to your account. In order to set your login password to the temporary password you must click the link above.</p>';
if(mail($to,$subject,$msg,$headers))
{
echo "success";
exit();
}
else
{
echo "email_send_failed";
exit();
}
}
else
{
echo "no_exist";
}
exit();
}
?>
<!DOCTYPE html>
<html>
<header id = "PageHeader">
<script type="text/javascript" src = "Index.js"> </script>
<meta charset="utf-8">
<!-- The website title -->
<TITLE> 8 BITES </TITLE>
<!-- Include the CSS file with this HTML file-->
<link rel="icon" type="iamge/x-icon" href="C:/Users/hp1/Desktop/Website/Pictures/Logo.jpg">
<link rel="stylesheet" type="text/css" href="Style.css">
<img id = "HeaderLogo" src = "C:/Users/hp1/Desktop/Website/Pictures/T_Logo.jpg" alt="Logo" style="width:46px; height:46px;">
<h2 id = "HeaderQuote"> 8BITS </h2>
</header>
<body id ="ForgetPasswordPageBody">
<?php include_once("template_pageTop.php"); ?>
<h1> Generate temporary log in password </h1>
<p> Note: This password will last only for 24 hours. In orde to obtain a new valid password please contact us! </p>
<form id = "ForgotPassForm">
<div id = "Step1"> Step 1: Enter your Email! </div>
<input id = "Email" type="Email" onfocus="_('status').innerHTML ='';" maxlength="100">
<br/>
<button id = "ForgotPass" onclick="ForgotPass()"> Generate </button>
<p id = "status"> </p>
</form>
<script>
function ForgotPass()
{
var email = ("Email").value;
if (email == " ")
{
_("status").innerHTML = "Type your Email address!";
}
else
{
_("ForgotPass").style.display = "none";
_("status").innerHTML = 'Please wait...';
var ajax = ajaxObj ("POST", "forgot_pass.php");
ajax.onreadystatechange = function ()
{
if (ajaxRetrun (ajax) == true)
{
var response = ajax.responseText;
if (response == "success")
{
_("ForgotPassForm").innerHTML = '<h3> Step 2. Check your Email inbox please </h3>';
}
else if (response == "no_exist")
{
_("status").innerHTML = "This is Email is not registered!";
}
else if (response =="email_send_falied")
{
_("status").innerHTML = "Mail falid to be sent!";
}
else
{
_("status").innerHTML = "An unknow error occured!";
}
}
}
ajax.send ("e=" +e);
}
}
</script>
<?php include_once("template_pageBottom.php"); ?>
</body>
<footer id = "PageFooter">
<div id = "Info">
<ul id = "InfoLinks">
<li> About </li>
<li> Help </li>
<li> Terms </li>
<li> Privacy </li>
<li> <a href ="CookiesPage.html" target="_blank" > Cookies </a> </li>
<li> Adds Info </li>
<li> #2017 8Bits </li>
</ul>
</div>
<div id = "Media">
<ul id = "MediaLinks">
<li> <img src = "C:/Users/hp1/Desktop/Website/Pictures/Facebook.jpg" alt="Facebook" style="width:40px;height:40px;"> </li>
<li> <img src = "C:/Users/hp1/Desktop/Website/Pictures/YouTube.jpg" alt="YouTube" style="width:40px;height:40px;"> </li>
<li> <img src = "C:/Users/hp1/Desktop/Website/Pictures/Instagram.jpg" alt="Instagram" style="width:40px;height:40px;"> </li>
<li> <img src = "C:/Users/hp1/Desktop/Website/Pictures/Twitter.jpg" alt="Twitter" style="width:40px;height:40px;"> </li>
</ul>
</div>
</footer>
</html>
EDIT: If you have WAMP installed already, run it, and place your project folder inside of: c:\wamp\www (could vary upon version though).
To preview it, type on your browser URL: localhost/yourProjectFolderName
The problem is that you have no PHP web server installed on your computer. You're on Windows, so install Wamp : it's an all-in-one web server that includes Apache2 (the server), PHP (who will read and execute your php code), MySql ans lots of others components.

Notification system jQuery, PHP, and MySQL

I'm trying to develop a notification system using jQuery and PHP. So I've created a new table in the database where I'm going to store all the new notifications. Using jQuery I've been able to show an alert (bubble icon) showing the number of new lines added to the database, but I'm now stuck because I don't really know how to update the database (fire update.php file) when I click the icon (.icon-bell) which does activate a drop-down menu.
This is the jQuery script I've added to the index page
<script type="text/javascript">
$(document).ready(function(){
$("#datacount").load("select.php");
setInterval(function(){
$("#datacount").load('select.php')
}, 20000);
});
</script>
This is the HTML code in the index page
<li class="dropdown dropdown-extended dropdown-notification dropdown-dark" id="header_notification_bar">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="icon-bell">
</i>
<span class="badge badge-success"><div id="datacount">
</div>
</span>
</a>
<ul class="dropdown-menu" >
<li class="external">
<h3>
<span class="bold">12 pending</span>
notifications
</h3>
view all
</li>
<li>
<ul class="dropdown-menu-list scroller" style="height: 250px;" data-handle-color="#637283">
<li>
<a href="javascript:;">
<span class="time">just now</span>
<span class="details">
<span class="label label-sm label-icon label-success">
<i class="fa fa-plus">
</i>
</span> New user registered. </span>
</a>
</li>
</ul>
</li>
</ul>
</li>
This is the select.php file
<?php
$sql = "SELECT * from tbl_noti where status = 'unread'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$count = $result->num_rows;
echo $count;
$conn->close();
?>
This is the update.php file
<?php
$sql = "update tbl_noti set status = 'read'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$count = $result->num_rows;
echo $count;
$conn->close();
?>
You can use PHP + Ajax to accomplish this task. I have created a simple notification system and you can easily clone it from GitHub(https://github.com/shahroznawaz/php-notifications).
let's create an index.php file and put the following code. it will create a form. all the data will get by ajax call and updated in the view.
<!DOCTYPE html>
<html>
<head>
 <title>Notification using PHP Ajax Bootstrap</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 <br /><br />
 <div class="container">
  <nav class="navbar navbar-inverse">
   <div class="container-fluid">
    <div class="navbar-header">
     <a class="navbar-brand" href="#">PHP Notification Tutorial</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
     <li class="dropdown">
      <span class="label label-pill label-danger count" style="border-radius:10px;"></span> <span class="glyphicon glyphicon-bell" style="font-size:18px;"></span>
      <ul class="dropdown-menu"></ul>
     </li>
    </ul>
   </div>
  </nav>
  <br />
  <form method="post" id="comment_form">
   <div class="form-group">
    <label>Enter Subject</label>
    <input type="text" name="subject" id="subject" class="form-control">
   </div>
   <div class="form-group">
    <label>Enter Comment</label>
    <textarea name="comment" id="comment" class="form-control" rows="5"></textarea>
   </div>
   <div class="form-group">
    <input type="submit" name="post" id="post" class="btn btn-info" value="Post" />
   </div>
  </form>
 </div>
</body>
</html>
Now create ajax calls like this:
<script>
$(document).ready(function(){
// updating the view with notifications using ajax
function load_unseen_notification(view = '')
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{view:view},
dataType:"json",
success:function(data)
{
$('.dropdown-menu').html(data.notification);
if(data.unseen_notification > 0)
{
$('.count').html(data.unseen_notification);
}
}
});
}
load_unseen_notification();
// submit form and get new records
$('#comment_form').on('submit', function(event){
event.preventDefault();
if($('#subject').val() != '' && $('#comment').val() != '')
{
var form_data = $(this).serialize();
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
success:function(data)
{
$('#comment_form')[0].reset();
load_unseen_notification();
}
});
}
else
{
alert("Both Fields are Required");
}
});
// load new notifications
$(document).on('click', '.dropdown-toggle', function(){
$('.count').html('');
load_unseen_notification('yes');
});
setInterval(function(){
load_unseen_notification();;
}, 5000);
});
</script>
You also need to fetch all the records from database and update the status for the notification viewd. create fetch.php file and add the following code:
<?php
include('connect.php');
if(isset($_POST['view'])){
// $con = mysqli_connect("localhost", "root", "", "notif");
if($_POST["view"] != '')
{
   $update_query = "UPDATE comments SET comment_status = 1 WHERE comment_status=0";
   mysqli_query($con, $update_query);
}
$query = "SELECT * FROM comments ORDER BY comment_id DESC LIMIT 5";
$result = mysqli_query($con, $query);
$output = '';
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
  $output .= '
  <li>
  <a href="#">
  <strong>'.$row["comment_subject"].'</strong><br />
  <small><em>'.$row["comment_text"].'</em></small>
  </a>
  </li>
  ';
}
}
else{
    $output .= '<li>No Noti Found</li>';
}
$status_query = "SELECT * FROM comments WHERE comment_status=0";
$result_query = mysqli_query($con, $status_query);
$count = mysqli_num_rows($result_query);
$data = array(
   'notification' => $output,
   'unseen_notification'  => $count
);
echo json_encode($data);
}
?>
Now you will be able to see the notification in navigation bar like this:
when you click the dropdown the status of views notification will update and count will disappear.
To execute PHP asynchronously, you need to use AJAX. jQuery has a few functions for this purpose.
$.ajax: Fully customizable asynchronous request, including error handling, headers, etc.
$.post: AJAX restricted to POST.
$.get: AJAX restricted to GET.
Both $.post and $.get can be accomplished with $.ajax, however they are, in most situations, easier to work with. You most likely will only need $.get in this case, since no additional data is being passed in the request.
Example code:
$.get(
"update.php",
function(result) {
console.log(result)
}
);
Here, result is the data outputted from update.php.
Use ajax to execute the PHP queries so they can execute in real time without page reload.

Jquery load() get a variable from another page

On my main page I have a content box where I load the content using Jquery's load() from another page. All is working fine and it's quick and nice.
Next thing I want to do is to add a small filtering feature to it. The variable is sent to the main page (snappage.php) as a GET variable. However the php for the sql query is in another page (i.e all-snaps.php). Let me show you my code:
snappage.php
<?php
require "database/database.php";
session_start();
if($_GET['country']) {
$country = $_GET['country'];
}
?>
<section class="main-snap-page-wrapper">
<nav class="all-snaps-countries">
<h4>Filter by country</h4>
<ul>
<?php
//GET COUNTRY FLAGS
$flagsql = mysql_query("SELECT * FROM countries");
while($getflag = mysql_fetch_array($flagsql)) {
$countryname = $getflag['countryname'];
$flag = $getflag['countryflag']; ?>
<li>
<a href="snappage.php?country=<?php echo $countryname?>">
<img src="<?php echo $flag?>" alt="">
<h5><?php echo $countryname?></h5>
</a>
</li>
<?php } ?>
</ul>
</nav>
<div class="all-snaps-page">
<nav class="main-page-tabs-wrapper">
<ul class="main-page-tabs" id="<?php echo $country?>">
<li class="active-tab">All</li>
<li>Female</li>
<li>Male</li>
</ul>
<div class="main-snaps-content"></div>
</nav>
</div>
</section>
<script type="text/javascript">
$('.main-snaps-content').load('all-snaps.php');
$('.main-page-tabs li').on('click', function () {
$('.main-page-tabs li').removeClass('active-tab');
$(this).addClass('active-tab');
var page = $(this).find('a').attr('href');
$('.main-snaps-content').load(page + '.php');
return false;
});
</script>
Next is the page which I load into .main-snaps-content from i.e all-snaps.php:
all-snaps.php
<?php
require "database/database.php";
session_start();
if($_GET['country']) {
$country = $_GET['country'];
$newsql = mysql_query("SELECT * FROM users JOIN fashionsnaps ON users.id = fashionsnaps.userid WHERE country = '$country' ORDER BY snapid ASC");
}
else {
$newsql = mysql_query("SELECT * FROM fashionsnaps ORDER BY snapid ASC");
}
?>
<ul class="snaps-display">
<?php
//GET SNAPS BY ID
while ($getnew = mysql_fetch_array($newsql)) {
$newsnappics = $getnew['snappic'];
$newsnapid = $getnew['snapid'];
?>
<li>
<a href="snap.php?id=<?php echo $newsnapid?>">
<img src="<?php echo $newsnappics?>" alt="">
</a>
</li>
<?php } ?>
</ul>
So what I want to achieve here is to load the filtered content from all-snaps.php into the .main-snaps-content which is on snappage.php.
Where should I send this $country variable? On which page should I retrieve it?
You can do this pretty easily with jQuery load.
In snappage.php:
$(".main-snaps-content").load("all-snaps.php?" + $.param({country: "<?php echo htmlentities($country); ?>"}));
Update:
You'll need better handling of the PHP GET/$country var. You can initialize it at the top of snappage.php like this:
$country = (isset($_GET['country'])) ? $_GET['country'] : '';
Then, your JS will need a conditional:
var country = "<?php echo htmlentities($country); ?>";
if (country) {
$(".main-snaps-content").load("all-snaps.php?" + $.param({country: country}));
} else {
$(".main-snaps-content").load("all-snaps.php");
}

Jquery onload duplicates results

I'm having an issue with PHP include and jQuery onload when the <li> content refreshes onload it duplicates the results that returned from the include function
My code as below:
<li class="dropdown">
<a href="#" data-toggle="dropdown" ><img src="style/img/notification.png" /></a>
<ul style="overflow:sauto; width:300px; overflow:auto;" class="dropdown-menu">
<?php include("inc/noti_refresh.php"); ?>
</ul>
</li>
here is my noti_refresh.php:
<?php include("configa.php");
$me = $_SESSION['username'];
$noti = mysql_query("select * from notification where to_user = '$me' order by id DESC ");
//$rown = mysql_num_rows($noti);
while ($notime = mysql_fetch_array($noti)){
$me = $notime['to_user'];
$you = $notime['from_user'];
$p_id = $notime['p_id'];
$type = $notime['type'];
$uimage = mysql_query("select * from users where username = '$you'");
$uname = mysql_fetch_assoc($uimage);
$myimage = $uname['img'];
//if( $rown !=0) {
?>
<li class="ref"><img src="users/<?php echo $myimage; ?>" style="height:32px; width:32;" /> <?php echo $you; ?> Has <?php echo $type; ?> Your Image </li>
<li class="divider"></li>
<?php }?>
and this is my jQuery function:
<script type="text/javascript">
function Load_external_content()
{
$('.ref').load('inc/noti_refresh.php').hide().fadeIn(3000);
}
setInterval('Load_external_content()', 10000);
</script>
Now whenever the <li class="ref"> is refreshed, the results will show duplicated.
Could anyone help?
Shouldn't you load the content into .dropdown-menu instead of into .ref?
i solved it by removing the <?php include('notif_refresh.php');
and instead i just used these two functions
<script type="text/javascript">
$(document).ready(function(){
$('.ref').load('inc/noti_refresh.php');
});
</script>
<script type="text/javascript">
function Load_external_content()
{
$('.ref').load('inc/noti_refresh.php').hide().fadeIn(3000);
}
setInterval('Load_external_content()', 10000);
</script>

Jquery delete function

I'm trying to make Jquery delete function, here is the code, that I wrote -
$("a.delete").click(function(){
var target = $(this).attr("id");
var c = confirm('Do you really want to delete this category?');
if(c==true) {
$(target+"ul").delay(3000).fadeOut(200);
}
else {
return false;
}
});
Okay now to problem, when I press, button a with class delete, it correctly, shows up the dialog (and the id is correct), but after I press yes, it will delete it with php, without jquery fadeOut effect.
My php code -
public function deleteCategory() {
if(isset($_GET['action']) && $_GET['action'] == 'delete') {
$id = (int)$_GET['id'];
$sql = "DELETE FROM `categories` WHERE `id` = '".$id."'";
mysql_query($sql);
}
}
Not sure where is the problem but I think it's inside $(target+"ul"), since I'm not sure, if it will add the target value and ul together.
In additional, how can I prevent the delete, if I press no? Currently, if I press no, it will still delete the category.
If you need any other information - ask.
Full code -
public function showCategories() {
if(isset($_SESSION['logged_in']) && isset($_SESSION['user_level']) && $_SESSION['user_level'] == 'admin') {
$sql = "SELECT * FROM `categories`";
$q = mysql_query($sql);
if(mysql_num_rows($q) > 0) {
?>
<div class="recentorders" style="display: none;" id="categoryBox">
<h5 class="colr">Categories</h5>
<div class="account_table" style="width: 688px;">
<ul class="headtable" style="width: 680px;">
<li class="order">ID</li>
<li class="action" style="width: 430px;">Category Name</li>
<li class="action nobordr">Options</li>
</ul>
<?php
while($row = mysql_fetch_array($q)) {
?>
<ul class="contable" style="width: 680px;" id="cat<?php echo $row['id']; ?>ul">
<li class="order"><?php echo $row['id']; ?></li>
<li class="action" style="width: 430px;"><?php echo $row['name']; ?></li>
<li class="action nobordr">Edit<a class="delete" id="cat<?php echo $row['id']; ?>" href="?action=delete&id=<?php echo $row['id']; ?>#">Delete</a></li>
</ul>
<?php
}
?>
</div>
</div>
<?php
}
else {
// No categories created, please create one first.
}
}
else {
header('location: account.php');
}
}
public function deleteCategory() {
if(isset($_GET['action']) && $_GET['action'] == 'delete') {
$id = (int)$_GET['id'];
$sql = "DELETE FROM `categories` WHERE `id` = '".$id."'";
mysql_query($sql);
}
}
If you're searching by ID you need to prefix your selector with a "#":
100% working sample on jsFiddle:
http://jsfiddle.net/E7QfY/
Change
$(target+"ul").delay(3000).fadeOut(200);
to
$('#' + target+"ul").delay(3000).fadeOut(200);
OR
$(this).closest('ul').delay(3000).fadeOut(200);
I would also modify the code to this:
$("a.delete").click(function(event){
if(confirm('Do you really want to delete this category?') == true){
$(this).closest('ul').delay(3000).fadeOut(200);
window.location.href = $(this).attr('href'); //OR use AJAX and do an event.preventDefault();
}
else
event.preventDefault();
});
It's because you are using an anchor tag that is causing a postback to the server which makes your page refresh before you see the animation. Make sure your anchor tag has an href defined as "#" to stop the postback from happening.
You should use something else than A tag e.g. span or div. And then after clicking this element make your fadeout and after it redirect to the PHP script that deletes your object:
$("SPAN,DIV.delete").click(function(){
var target = $(this).attr("id");
var c = confirm('Do you really want to delete this category?');
if(c==true) {
$(target+"ul").delay(3000).fadeOut(200);
window.location.href = URL TO PHP FILE
}
else {
return false;
}
});

Categories