Javascript posting multiple times - php

I have a javascript coding that pulls a PHP file, and if it updates the database, it will echo Success: Age Updated! It works and all, But When I click it multiple times it will start to do this.. Sucsess: Age Changed! Sucsess: Age Changed! Sucsess: Age Changed! .. Here's the Javascript.
function UpdateAge(Age) {
var newage = $("#NewAge").val();
var dataString = 'newage=' + newage;
if (newage.length < 2) {
$('#Required').fadeIn(300);
$('#Mask').fadeIn(300);
} else {
$.ajax({
type: "POST",
url: "update_age.php",
data: dataString,
cache: false,
success: function (updateage) {
$("#UpdatedAge").append(updateage);
$("#UpdatedAge").show().fadeOut(1200);
}
});
}
}
How would I get it to just display Success: Age Updated! once, instead of it just multiplying everytime I click?
Here's the Button for the onClick
<input type="submit" value="Update" onClick="UpdateAge(<?php echo $age ?>)" />

Looks like you just need to empty your #UpdatedAge Element each time.
function UpdateAge(Age) {
var newage = $("#NewAge").val();
var dataString = 'newage=' + newage;
if (newage.length < 2) {
$('#Required').fadeIn(300);
$('#Mask').fadeIn(300);
} else {
$.ajax({
type: "POST",
url: "update_age.php",
data: dataString,
cache: false,
success: function (updateage) {
$("#UpdatedAge").empty();
$("#UpdatedAge").append(updateage);
$("#UpdatedAge").show().fadeOut(1200);
}
});
}
}

the problem is you keep appending, change the content instead (just change append to html)
$("#UpdatedAge").html(updateage);

Just use something as
function UpdateAge(Age) {
var newage = $("#NewAge").val();
var dataString = 'newage=' + newage;
if (newage.length < 2) {
$('#Required').fadeIn(300);
$('#Mask').fadeIn(300);
} else {
$.ajax({
type: "POST",
url: "update_age.php",
data: dataString,
cache: false,
success: function (updateage) {
$("#UpdatedAge").html(updateage);
$("#UpdatedAge").show().fadeOut(1200);
}
});
}
}
As .html replaces the content of #UpdatedAge and don't append it to the content, as .append does.

Related

How do I pass jQuery value to php?

I have this little piece of code and I would like to pass the value to PHP.
var size;
if ($(window).width() < 960) {
size = "1";
} else {
size = "2";
}
Is there a way to do this? (new at jQuery)
Many thanks!
check this code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var size;
if ($(window).width() < 960) {
size = "1";
} else {
size = "2";
}
$.ajax({
type: "POST",
url: 'edit.php',
data: "window_size=" + size,
dataType: 'text',
async: false,
cache: false,
success: function (result) {
alert(result)
}
});
</script>
then create edit.php
<?php
print_r($_REQUEST);
?>
if you want to save this value then use this code
<?php
session_start();
echo $_SESSION['php_value'];
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var size;
if ($(window).width() < 960) {
size = "1";
} else {
size = "2";
}
$.ajax({
type: "POST",
url: 'edit.php',
data: "window_size=" + size,
dataType: 'text',
async: false,
cache: false,
success: function (result) {
alert(result);
//window.location.reload();
}
});
</script>
and update edit.php as like
<?php
session_start();
$_SESSION['php_value'] = $_REQUEST['window_size'];
echo $_SESSION['php_value'];
?>
you want to see this value or use then refresh this page
if you want to use this variable in other page then use this
//first page first set it
$_SESSION['php_value'] = $_REQUEST['window_size'];
//second page or other page and use it
$var_value = $_SESSION['php_value'];
No you cannot. JQuery plays on client and php on backend.
If you want to pass some values from Client (Jquery/Js) to Backend (PHP), you need to either submit a form or make an AJax call to server.
You should research about jQuery ajax. This can be your solution for sending data to server from client.
Yes. Use the code below to send the value of size to your php script:
var ajax_call = $.ajax({url: '/your_php_script.php', data: 'size='+size, success: function(data) {
}});

Ajax sends data , but returns nothing

I have got this html
<div class="Likes" data-i=<?php echo $row[8];?>>
<img src="../img/like.png">
<p class="L_c"><?php echo $row[4];?></p>
</div>
And this jquery/ajax
$(".Likes").click(function() {
var i = $(this).attr("data-i");
$.ajax({
type: "GET",
url: '../connect.php',
data: "I=" + i,
success: function(data) {
$(this).children(".L_c").html(data);
}
});
});
Connect.php
if (isset($_GET["I"]) && !isset($_GET["C"])) {
$RandS=$_GET["I"];
$query3=$con->query("SELECT id,likes FROM uploads WHERE Rand='$RandS'");
$row=$query3->fetch_row();
$IdU=$row[0];
$Likes=$row[1];
$Sel2=$con->query("SELECT id FROM likes WHERE User_id='$NameId' AND Post_id='$IdU'");
$num_rows=$Sel2->num_rows;
if ($num_rows>0) {
echo $Likes;
}else{
$query=$con->query("INSERT INTO likes (Post_id,User_id,`DATE`) VALUES('$IdU','$NameId',NOW())");
$query=$con->query("UPDATE uploads SET Likes=$Likes+1 WHERE Rand='$RandS'");
echo $Likes+1;
}
}
But it does not return anything untill i refresh the page
The this keyword inside the $.ajax methods callback is not the element, but the ajax call itself.
You have to either set context, or just store the outer this -value
$(".Likes").on('click', function() {
var me = $(this);
var i = me.attr("data-i");
$.ajax({
type: "GET",
url: '../connect.php',
data: "I=" + i,
success: function(data) {
me.find(".L_c").html(data);
}
});
});

Get repeated data from database when mousemove using jquery ajax

I have data which I got from database and It's in display.php.
Then mousemove is used to display data. But the data keeps repeating when I do mouseover. This is the code to mouse move
$(line.node).mousemove(get_over_handler(country));
and this is some code in function get_over_handler(country)
function get_over_handler(country) {
return function (event) {
color_country(country, selected_color);
var country_name = $("#country_name_popup");
country_name.empty();
country_name.append("<span id='popup_country_name'> " + code_to_name[country] + "</span><table width='100%' style='border-spacing:20px;'>");
var id_dataset = $("#dataset_select").find('option:selected').attr('id');
$.ajax({
type: "POST",
url: "display.php",
data: {ibukota: country, id_dataset: id_dataset},
success: function (data) {
country_name.append(data);
}
});
My question is how to prevent repeated data I got from database?
Rewrite your function to:
function get_over_handler(country) {
return function (event) {
color_country(country, selected_color);
var id_dataset = $("#dataset_select").find('option:selected').attr('id');
$.ajax({
type: "POST",
url: "display.php",
data: {ibukota: country, id_dataset: id_dataset},
success: function (data) {
var country_name = $("#country_name_popup");
country_name.empty();
country_name.append("<span id='popup_country_name'> " + code_to_name[country] + "</span><table width='100%' style='border-spacing:20px;'>");
country_name.append(data);
}
});
}
}

jquery-ajax not posting data

Refer to the following code, this script doesn't post the "limit" variable to the next page
MY JS Code:
$(document).ready(function(){
$(window).scroll(function() {
if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
var dataString="2";
$.ajax({
type:"POST",
url: "load_data.php",
data: { 'limit': dataString },
success:function(data) {
$('#leftNews').load('load_data.php');
}
});
}
});
});
PHP CODE
<?php
if(isset($_POST['limit'])) {
echo $_POST['limit'];
}
else echo 'asd';
?>
Everytim i run this i get "asd" printed
That's because you're loading the PHP page, instead of loading the result.
$(document).ready(function() {
$(window).scroll(function() {
if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
var dataString = "2";
$.ajax({
type: "POST",
url: "load_data.php",
data: {'limit': dataString},
success: function(data) {
$('#leftNews').html(data);
}
});
}
});
});
You make two different ajax requests. The first one is a POST-request with limit-variable set. The more important one is the second one, it is a load-requests (which is a get-requests without any parameters). Of course, your last request which shall print out the result does not containt any parameters, thats why "asd" is printed - the limit is NOT set!
In order to get the wanted result, you should change it to:
success:function(data) {
$('#leftNews').html(data);
}

JQuery: How to apply this click function to all elements of the same class on the page?

My page consists of a list of records retrieved from a database and when you click on certain span elements it updates the database but at present this only works for the first record to be displayed.
(Basically changes a 0 to 1 and vice versa)
These are my two html elements on the page that are echoed out inside a loop:
Featured:<span class="featured-value">'.$featured.'</span>
Visible:<span class="visible-value">'.$visible.'</span>
Here is what I have:
$(document).ready(function() {
$('.featured-value').click(function() {
var id = $('.id-value').text();
var featured = $('.featured-value').text();
$('.featured-value').fadeOut('slow');
$.ajax({
type: "POST",
url: "process.php",
data: "id="+id+"&featured="+featured,
success: function(data) {
$('.featured-value').html(data);
$('.featured-value').fadeIn('slow');
}
});
return false;
});
// same function for a different span
$('.visible-value').click(function() {
var id = $('.id-value').text();
var visible = $('.visible-value').text();
$('.visible-value').fadeOut('slow');
$.ajax({
type: "POST",
url: "process.php",
data: "id="+id+"&visible="+visible,
success: function(data) {
$('.visible-value').html(data);
$('.visible-value').fadeIn('slow');
}
});
return false;
});
});
It was working fine with one using id attributes but now I'm using class the fadeIn part of the success query isn't working but I'm hoping the .each will fix this.
UPDATE
The full loop is as follows:
while ($event = $db->get_row($events, $type = 'MYSQL_ASSOC'))
{
// open event class
echo '<div class="event">';
echo '<div class="id"><span class="row">Event ID:</span><span class="id-value"> '.$id.'</span></div>';
echo '<div class="featured"><span class="row">Featured: </span><span class="featured-value">'.$featured.'</span></div>';
echo '<div class="visible"><span class="row">Visible: </span><span class="visible-value">'.$visible.'</span></div>';
echo '</div>';
}
Cymen is right about the id selector causing you trouble. Also, I decided to refactor that for you. Might need some tweaks, but doesn't everything?
function postAndFade($node, post_key) {
var id = $node.parents('.id').find('.id-value').text();
var post_val = $node.text();
$node.fadeOut('slow');
$.ajax({
type: "POST",
url: "process.php",
data: "id="+id+"&"+post_key+"="+post_val,
success: function(data) {
$node.html(data);
$node.fadeIn('slow');
}
});
return false;
}
$('.featured-value').click(function() { return postAndFade($(this), 'featured'); });
$('.visible-value').click(function() { return postAndFade($(this), 'visible'); });
The click function is getting the same id and value on each click because you've bound it to the class. Instead, you can take advantage of event.target assuming these values are on the item being clicked. If not, you need to use event.target and navigate to the items within the row.
$('.featured-value').click(function(event) {
var $target = $(event.target);
var id = $target.attr('id');
var featured = $target.text();
$target.fadeOut('slow');
$.ajax({
type: "POST",
url: "process.php",
data: "id="+id+"&featured="+featured,
success: function(data) {
$target.html(data).fadeIn('slow');
}
});
return false;
});
So something like that but it likely won't work as it needs to be customized to your HTML.

Categories