I have php code and jQuery/javascript. I want to make visitor counter using jQuery and php code.
Here is the php code :
<?php
$handle = fopen("counter.txt", "r");
if(!$handle){
echo "could not open the file" ;
} else {
$counter = (int ) fread($handle,20);
fclose ($handle);
$counter++;
//echo $counter;
$handle = fopen("counter.txt", "w" );
fwrite($handle,$counter) ;
fclose ($handle) ;
}
?>
and this is jQuery/javascript code :
<html>
<head>
<title>jQuery Hello World</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.counter.js"></script>
<link href="js/jquery.counter-analog.css" rel="stylesheet">
</head>
<body>
<span id="custom"></span>
<script>
$('#custom').addClass('counter-analog').counter({
//direction: 'up',
interval: '1',
format: '99999'
//stop: '2012'
});
</script>
</body>
</html>
How can I combine the jQuery/javascript code into php code? This is my first time for using jQuery, and I still don't understand to use jQuery. So I need your help. :D Thank you.
This is the result:
I want to add "50" into the jQuery "00000", so the result is "00050"
You simply need to echo the counter value in the span element.
So assuming your PHP code is at the top of the file, it should look like this.
<?php
$handle = fopen("counter.txt", "r");
if(!$handle){
echo "could not open the file" ;
} else {
$counter = (int ) fread($handle,20);
fclose ($handle);
$counter++;
//echo $counter;
$handle = fopen("counter.txt", "w" );
fwrite($handle,$counter) ;
fclose ($handle) ;
}
?>
<html>
<head>
<title>jQuery Hello World</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.counter.js"></script>
<link href="js/jquery.counter-analog.css" rel="stylesheet">
</head>
<body>
<span id="custom"><?php echo $counter; ?></span>
<script>
$('#custom').addClass('counter-analog').counter({
//direction: 'up',
interval: '1',
format: '99999'
//stop: '2012'
});
</script>
</body>
</html>
Related
I'm building a chat website and i want to add a sound alert whenever a new message is sent so i can alert other users for new unread messages(i use MySQL for storing messages etc.). I use ajax to get the messages from the database and put them on my chatbox. I tryied every way but it doesn't seen to work idividually on every NEW message. Please help!
That's my index.php
<?php
session_start ();
define('DB_HOST', 'localhost');
define('DB_NAME', '*******');
define('DB_USER','*****');
define('DB_PASSWORD','********');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<META HTTP-EQUIV="content-type" CONTENT= "text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Chat2Chat!</title>
</head>
<body id="body-color">
<?php
if (! isset ( $_SESSION ['user'] )) {
header ( "Location: sign-in.html" ); // Redirect the user
} else {
?>
<div id="wrapper">
<div id="menu">
<p class="welcome">
Καλωσήρθες, <b><?php echo $_SESSION['user']; ?></b>
</p>
<p class="logout">
<b class="submitmsg" id="exit" href="#">Logout</b>
</p>
<div style="clear: both"></div>
</div>
<div id="chatbox" class="chatbox">
</div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" autofocus/>
<input class="submitmsg" name="submitmsg" type="submit" id="submitmsg" value="Αποστολή"/>
</form>
</div>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
setInterval ( "get()", 2000 );
});
//jQuery Document
$(document).ready(function(){
//If user wants to end session
$("#exit").click(function(){
var exit = confirm("Είσαι σίγουρος πως θέλεις να αποσυνδεθείς;");
if(exit==true){window.location = 'index.php?logout=true';}
});
});
//If user submits the form
$("#submitmsg").click(function(){
var clientmsg = $("#usermsg").val();
$.post("post.php", {text: clientmsg});
$("#usermsg").attr("value", "");
loadLog;
return false;
});
setInterval (loadLog, 2500);
function get(){
$.ajax({
type: 'GET',
url: 'chat.php',
success: function(data){
$("#chatbox").html(data);
var scroll = document.getElementById('chatbox');
scroll.scrollTop = scroll.scrollHeight;
}
});
}
</script>
<?php
}
?>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
The chat.php
<!DOCTYPE HTML>
<head>
<title>Chat</title>
<META HTTP-EQUIV="content-type" CONTENT= "text/html; charset=UTF-8">
</head>
<?php
define('DB_HOST', 'localhost');
define('DB_NAME', 'db_57218');
define('DB_USER','u57218');
define('DB_PASSWORD','27222528');
$con = mysqli_connect(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME) or die("Failed to connect to MySQL: " . mysqli_error());
$query = "SELECT * FROM Messages";
if($result = mysqli_query ($con, $query)){
while ($row = mysqli_fetch_row($result))
{if($row['4']==0){
echo '('.$row['5'].') <b>'.$row['1'].'</b>: '.$row['2'].'<br>';
}
else{echo 'Ο χρήστης <b>'.$row['1'].'</b> '.$row['2'].'<br>';}
}
mysqli_free_result($result);
}
mysqli_close($con);
?>
You can store the last message id which you played sound for, and at every refresh action, you can check if the last message id is equals to id you stored before. If not, you play sound.
To be more clear:
$lastMessageId=5;
$lastMessageIdWePlayedSoundFor=4;
if($lastMessageId!=$lastMessageIdWePlayedSoundFor)
{
////play sound here
$lastMessageIdWePlayedSoundFor=$lastMessageId;
}
So whenever there is a new message we haven't played a sound for it's existance, we play sound. You can use this algorithm.
Okay so I have googled a lot and have not found how they do it.
Examples 1:
Here is a sample Code of PropellerAdsMedia:
<script type="text/javascript" src="//go.oclaserver.com/apu.php?zoneid='0000'"></script>
Example 2:
Yllix Ad Code:
<script type="text/javascript" src="http://ylx-4.com/layer.php?section=General&pub='00000'&ga=g&fp"></script>
I want to do something similar but what i want to do is use javascript to load
these ad codes.
I have multiple website and also have multiple Advertisers. I want to echo random ad code on my website.
AM I DOING SOMETHING WRONG?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ad Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="http://example.com/ad.php?id=yllix"></script>
<script type="text/javascript" src="http://example.com/ad.php?id=googleads"></script>
<script type="text/javascript" src="http://example.com/ad.php?id=clicksor"></script>
</body>
</html>
And MY PHP As per the first answer:
<?php
$id = $_GET['id'];
switch ($id) {
case "yllix":
echo 'document.write(\'<script type="text/javascript" src="http://ylx-1.com/bnr.php?section=General&pub=686929&format=300x250&ga=g"></script>
<noscript>
<img src="https://yllix.com/banners/aff/pub/300x250.jpg" border="0" /></noscript>
<script type="text/javascript" src="http://ylx-4.com/layer.php?section=General&pub=686929&ga=g&show=1&fp"></script>\');';
break;
case "googleads":
//google Ad Code Echo
echo 'document.write(\'<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3293789816750173"
data-ad-slot="6844557963"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>\');';
break;
case "clicksor":
//Clicksor Code Echo
echo "document.write(\"<script type='text/javascript'>
clicksor_adhere_opt='left';
clicksor_default_url = '';
clicksor_banner_border = '#99CC33';
clicksor_banner_ad_bg = '#FFFFFF';
clicksor_banner_link_color = '#000000';
clicksor_banner_text_color = '#666666';
clicksor_layer_border_color = '';
clicksor_layer_ad_bg = '';
clicksor_layer_ad_link_color = '';
clicksor_layer_ad_text_color = '';
clicksor_text_link_bg = '';
clicksor_text_link_color = '';
clicksor_enable_text_link = false;
clicksor_banner_text_banner = true;
clicksor_banner_image_banner = true;
clicksor_enable_layer_pop = false;
clicksor_enable_pop = true;
</script>
<script type='text/javascript' src='http://b.clicksor.net/show.php?nid=1&pid=380499&adtype=1&sid=638894'></script>\");";
break;
default:
echo "document.write('Sorry')";
break;
}
?>
Nothing is loaded from the script tags from the page.
The page loaded with a <script> tag must be a plain Javascript script, not HTML. So you can't just echo a <script> tag, you have to echo a Javascript script that ads the script to the page. It can do this using document.write() (this is one of the few places where this function is still useful).
<?php
$id = $_GET['id'];
switch ($id) {
case "yllix":
//What to write here so that My <script> tag could load this echo by replacing itself like most ad code does?
echo 'document.write(\'<script type="text/javascript" src="http://ylx-4.com/layer.php?section=General&pub='000'&ga=g&fp"></script>\');';
break;
case "googleads":
//google Ad Code Echo
break;
case "PropellerAdsMedia":
//PropellerAdsMedia Code Echo
break;
}
?>
In my index.html I have:
<head>
<link rel="stylesheet" href="css/messi.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/messi.min.js"></script>
<script type="text/javascript">
function failureFunction(){
new Messi('There was an error sending your message.', {title: 'Failure'});
};
function successFunction(){
new Messi('Success sending email', {title: 'Success'});
};
</script>
</head>
<body>
<form class="form" id="form1" method="post" action="contactengine.php">
...
</form>
</body>
And then in my contactengine.php I have:
$success = mail($EmailTo, $Subject, $Body, $Headers);
// redirect to success page
if ($success){
echo "<script type='text/javascript'>successFunction();</script>";
print "<meta http-equiv=\"refresh\" content=\"0;URL=index.html\">";
}
else{
echo "<script type='text/javascript'>failureFunction();</script>";
print "<meta http-equiv=\"refresh\" content=\"0;URL=index.html\">";
}
My echo ... won't call the successFunction() though. I know the $success var is true because if I put an alert there it calls the alert and I know that my successFunction() works because I can call it from my index.html file with no problems. The messi library is located here for reference.
How can I correctly call the successFuntion() from my php file?
May be you can move your JS functions inside a javascript file and include that file in the PHP or HTML pages where you need to call those functions.
js/customMessi.js
function failureFunction(){
new Messi('There was an error sending your message.', {title: 'Failure'});
};
function successFunction(){
new Messi('Success sending email', {title: 'Success'});
};
and in your HTML file :
<head>
<link rel="stylesheet" href="css/messi.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script src="js/messi.min.js"></script>
<script src="js/customMessi.js"></script>
</head>
<body>
<form class="form" id="form1" method="post" action="contactengine.php">
...
</form>
</body>
and in your contactengine.php file as well:
echo "<script type='text/javascript' src='js/customMessi.js'></script>";
...
$success = mail($EmailTo, $Subject, $Body, $Headers);
// redirect to success page
if ($success){
echo "<script type='text/javascript'>successFunction();</script>";
print "<meta http-equiv=\"refresh\" content=\"0;URL=index.html\">";
}
else{
echo "<script type='text/javascript'>failureFunction();</script>";
print "<meta http-equiv=\"refresh\" content=\"0;URL=index.html\">";
}
simple jQuery doesn't work inside the HighSlide iFrame popup....
Ok... here is exactly what i have:
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="http://cdn.example.com/plugins/highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://cdn.example.com/plugins/highslide/highslide-ie6.css" />
<![endif]-->
<script async src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
</head>
<body>
update
<script type="text/javascript" src="http://cdn.example.com/plugins/highslide/highslide-full.js"></script>
<script type="text/javascript" src="http://cdn.example.com/plugins/highslide/highslide.config.js" charset="utf-8"></script>
</body>
</html>
and here is the code of update.php
<?php
echo "<head>";
echo "<script async src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>";
echo "</head>";
echo "<body>";
?>
<script>
$(document).ready( function(){
$('#isMain').click( function(){
if(this.checked){
$('#subCats').hide();
}else{
$('#subCats').show();
}
});
});
</script>
<?php
echo "<form action='' method='post' role='form'>";
echo "<input type='checkbox' name='isMain' id='isMain'> Is Main Category?<br>";
echo "<select name='subCats' id='subCats'>";
echo "<option value='noway'>--SELECT--</option>";
echo "<option value='1'>Games</option>";
echo "<option value='2'>Music</option>";
echo "</select>";
echo "</form>";
echo "</body>";
?>
But the jQuery Hide Show sometime works fine and sometime doesn't work... what is the exactly issue here ???
jQuery (or any other JavaScript) works in a page that is opened using Highslide iframe objectType popup - objectType: 'iframe' - since the iframe popup opens the linked page exactly as you have coded it.
Demo using your code: http://jsfiddle.net/roadrash/rX4Bc/
The page used in the iframe popup: http://jsfiddle.net/roadrash/UWq3c/
I have two .php files. The first one ajax_testing.php looks like this:
<!DOCTYPE html>
<html>
<?php
$index_local=1;
$_SESSION['global_index'] = $index_local;
?>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="main">Who is batman? click count=<?echo $_SESSION['global_index'] ?>
<button id="detailed">LINK</button>
</div>
</body>
<script type="text/javascript" language="javascript">
$(document).ready(function() { /// Wait till page is loaded
$("button").click(function(){
<?php
$_SESSION['global_index']+=1;
?>
$('#main').load('property-detailed.php?global_index='
+ <?php echo $_SESSION['global_index']; ?>
+ ' #main', function() {});
});
}); //// End of Wait till page is loaded
</script>
</html>
Document number two is called property-detailed.php and looks like this:
<!DOCTYPE html>
<html>
<?php
$_SESSION['global_index'] = $_GET['global_index'];
?>
<head>
<script></script>
</head>
<body>
<div id="main">Who is batman? click count=<?php echo $_SESSION['global_index']; ?>
<button id="detailed">LINK</button>
</div>
</body>
<script type="text/javascript" language="javascript">
$(document).ready(function() { /// Wait til page is loaded
$("button").click(function(){
<?php
$_SESSION['global_index']+=1;
?>
$('#main').load('property-detailed.php?global_index='
+ <?echo $_SESSION['global_index'] ?>
+ ' #main', function() {});
});
}); //// End of Wait till page is loaded
</script>
</html>
I load the first page, and it has a variable, $global_index, that is set to 1 and a button with an ajax command to reload the div with the new information found on the second page.
My goal is to have the variable $global_index carry over and increment each time I press the button. Is this possible with only ajax being implemented? If so, is there a way to make it happen with only the first page? Otherwise would it just be easier to have my database keep track of this number and increment that?
In your ajax_testing.php:
<?php session_start(); ?>
<script type="text/javascript" src="jquery.js"></script>
<?php
$_SESSION['counter'] = 1;
$count = $_SESSION['counter'];
?>
<div id="main">Batman<?php echo $count; ?></div>
<button id="detailed">Link</button>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','#detailed',function(){
var count = "<?php echo $count; ?>",
dataString = "counter=" + count;
$.ajax({
type: "POST",
url: "property-detaild.php",
data:dataString,
success:function(data){
$('#main').html(data);
console.log(data);
}
});
})
});
</script>
And in your property-detailed.php:
<?php
session_start();
$_SESSION['counter'] = $_SESSION['counter']+1;
echo $_SESSION['counter'];
?>