I'm trying to counting a SESSION variable, but i don't want that the user seeing any refreshes.
my problem with the code below is that, it change only ones and then its needed a refresh. How can i do this without any refreshes?
test page:
<?php session_start(); ?>
<script src="../../../common/js/jquery-1.11.2.min.js"></script>
<script src="../../../common/js/jquery.touchwipe.min.js"></script>
<?php
if(empty($_SESSION['counter'])){
$_SESSION['counter'] = 1;
}
$count = $_SESSION['counter'];
?>
<div id="main"><?= $count; ?></div>
<button id="detailed">Link</button>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','#detailed',function(){
var count = "<?= $count ?>";
count++;
$.ajax({
type: "POST",
url: "test.php",
data: {countertje: count},
success:function(data){
$('#main').html(data);
console.log(data);
}
});
})
});
</script>
do_ajax.php
<?php
session_start();
$_SESSION['counter'] = $_POST['countertje'];
echo $_SESSION['counter'];
?>
<script type="text/javascript">
var count = "<?= $count ?>";
$(document).ready(function(){
$(document).on('click','#detailed',function(){
count++;
$.ajax({
type: "POST",
url: "test.php",
data: {countertje: count},
success:function(data){
$('#main').html(data);
console.log(data);
}
});
})
});
</script>
count should be a global variable
Something you could use in javascript
var count = $('#main').val();
instead of following :
var count = "<?= $count ?>";
Writting PHP code inside javascript isnt good idea!
Related
I am trying to update mysql database on cliking url in lecture.php. But update-lecture-count.php is not getting executed.
Code in lecture.php is as follows
<?php
session_start();
include("db.php");
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" > </script>
<script>
var $j = jQuery.noConflict();// i am also using jquery 1.9.0 in same page
$j('.reserve-button').click(function(){
var lec_id = $j(this).parent().data('id');
$j.ajax
({
url: 'update-lecture-count.php',
data: {"lectureID": lec_id},
type: 'post'
});
});
</script>
</head>
<body>
<div data-id="<?php echo $data['lecture_id'];?>">
/* lecture id, recording link are getting fetched from other mysql table*/
<a class="reserve-button fancybox fancybox.iframe more_info_btn" data-fancybox-href="<?=$data['recording_link']?>">PLAY NOW</a>
</div>
</body>
</html>
Code in update-lecture-count.php is as follows
<?
session_start();
include("db.php");
if(isset($_POST['lectureID']))
{
$_SESSION['value'] = $_POST['lectureID'];
$member_id = $_SESSION['user_id'];
//code to update mysql database.....
?>
I am unable to understand, why $_POST['lecture_id'] is not retrived in update-lecture-count.php
Try replacing type with 'method' - type is used in versions prior to Jquery 1.9.0
So try to use this as your AJAX call
$j.ajax
({
url: 'update-lecture-count.php',
data: {"lectureID": lec_id},
method: 'post'
});
Please refer to this link
Ohhh... I solved it... Just answering here as it would be helpful to others too...
I replace
<script>
var $j = jQuery.noConflict();
$j('.reserve-button').click(function(){
var lec_id = $j(this).parent().data('id');
$j.ajax
({
url: 'update-lecture-count.php',
data: {"lectureID": lec_id},
method: 'post'
});
});
</script>
To
<script>
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('.reserve-button').click(function(){
var lec_id = $j(this).parent().data('id');
$j.ajax
({
url: 'update-lecture-count.php',
data: {"lectureID": lec_id},
method: 'post'
});
});
});
</script>
And it worked ...
I have edited my code and it goes something like this and it is not working.. Please help me..
<?php
$variable = "krishna";
?>
<script>
$.ajax({
type:"POST",
url:"ajax.php",
data:{
variable:<?php echo $variable; ?>
},
success:function(msg){
$("#val").html(msg);
}
});
</script>
<div id="val"></div>
ajax.php
<?php
echo $_POST['variable'];
?>
thank you all
Try this
<script type="text/javascript">
$.ajax({
type: "POST",
url: "",
data: 'var=<?php echo $variable;?>',
success: function(){
}
});
</script>
<script>
$.ajax({
type:"POST",
url:"",
data:{data:'<?php echo $data; ?>',data1:'<?php echo $data1; ?>'}
success: function(data)
{ }
});
</script>
You can add any number of varibles using data{data1:data1, data2:data2, data3:data3} and it's stand like {variablename:value}
Use an echo statement inline with the javascript. Because PHP executes on the server all the PHP processing will be done by the time the javascript runs.
<?php
$variable = "php";
?>
<script>
$.ajax({
type:"POST",
url:"",
data:{
variable:"<?php echo $variable; ?>"
},
success:
});
</script>
This is the code of index.php:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
jQuery(function () {
jQuery('#city').change(function() {
var city = jQuery('#city').val();
var data = "city=" + city;
jQuery.ajax({
url: 'page.php',
type: 'GET',
data: data,
success: function(data){ jQuery("#my_div").html(data); }
});
});
});
</script>
</head>
<body>
<select id='city'>
<option value='Paris'>Paris</option>
<option value='London'>London</option>
<option value='Rome'>Rome</option>
</select>
<div id='my_div'>
<?php require_once('page.php'); ?>
</div>
</body>
<html>
And page.php:
<?php if (isset($_GET['city'])) echo 'you selected '.$_GET['city']; ?>
Selected a city should display 'you selected ' then the name of the city. But it doesn't do anything..
you are not sending the data... data is undefined here... change your code var city = "city=" + city; to var data= "city=" + city;.. adn you are getting your response as data.. so replace
jQuery("#my_div").html(html);
with
jQuery("#my_div").html(data);
try this
jQuery('#city').change(function() {
var city = jQuery('#city').val();
var data= "city=" + city; //<--here
jQuery.ajax({
url: 'page.php',
type: 'GET',
data: data,
success: function(data){ jQuery("#my_div").html(data); } //<--here
});
});
you could use shorthand... but the real issue here is two variables are "undefined".
The html variable is not defined, nor was the data variable as previously mentioned.
Give this a shot
$('#city').change(function() {
var data= "city=" + $('#city').val();
$.ajax({
url: 'page.php',
type: 'GET',
data: data,
success: function(html){
$("#my_div").html(html);
}
});
});
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var content = $('#content').html();
var data = {"content":content};
$.ajax({
type: "POST",
dataType: "json",
url: "ajax.php",
data: {content:content},
success function (data) {
alert('Hello!');
}
});
});
});
</script>
<div id="content"><?php echo $content; ?></div>
ajax.php
echo json_encode($_POST['content']); ?>
Nothing happens... WhatI really want to achieve is to get that alert box and get the return data, but I am lost since I don't get any errors or nothing.
You miss " : " after success
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var content = $('#content').html();
var data = {"content":content};
$.ajax({
type: "POST",
dataType: "json",
url: "ajax.php",
data: {content:content},
success: function (data) {
alert('Hello!');
}
});
});
});
</script>
<div id="content"><?php echo $content; ?></div>
As #sofl said, if you change it to success:function (data) { it will work!
Just remember that the $("a") from $("a").click(function() { called when click in a link tag like <a href"">.
If you are using an input ou button with a class="a" you should change the code to $(".a").click(function() {
(just add a . before a)
PS: If you're using a link, you should set the href="" to href="#" to work.
I tried to post values from the link title attribute with jquery ajax json post. Here is my code. where is the problem? Why doesn't it work?
main.php
<script type="text/javascript">
$(document).ready(function(){
$(".link").click(function(){
var aa = $(this).attr('title');
$.ajax({
url: "data.php",
dataType: "json",
data: "number1="+aa,
success: function(json){
$("#result").html(json.number1);
}
});
});
});
</script>
A
B
O
<div id="result"></div>
data.php
<?php
$number1 = $_GET['number1'];
echo json_encode($number1);
?>
Try this:
<script type="text/javascript">
$(document).ready(function(){
$(".link").click(function(){
var aa = $(this).attr('title');
$.ajax({
url: "data.php",
dataType: "json",
data: {"number1": aa},
success: function(json){
$("#result").html(json.number1);
}
});
});
});
</script>
A
B
O
<div id="result"></div>
<?php
$number1 = $_GET['number1'];
echo json_encode(array('number1' =>$number1));
?>