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);
}
});
}
}
Related
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);
}
});
});
here is my ajax request :
$(".colorme").on("click", function () {
var c = $(this);
var b = "id=" + c.attr("id");
$.ajax({
type: "POST",
url: "../../colorme",
data: b,
success: function (a) {
$.when(c.fadeOut(300).promise()).done(function () {
if (c.hasClass("btn")) {
c.removeClass("btn-default").addClass("btn-success").text(a).fadeIn()
} else {
c.replaceWith('<span class="notice_mid_link">' + a + "</span>")
}
})
}});
return false
})
so here is what I receive as a response :
{"f0d8c0":0.3269616519174,"d8d8d8":0.22377581120944,"181818":0.10926253687316,"d8a890":0.091268436578171,"303030":0.054454277286136}
I would like to be able display each one of those values as a pair.Right now it returns :[object OBJECT]
Use,
data = $.parseJSON(JSON.stringify(a));
Try this.
var obj = jQuery.parseJSON(a);
alert( obj.f0d8c0);
alert( obj.d8d8d8);
You can assign your response value in var a =$.parseJSON(RESPONSE VALUE)
For more Details Read this LINK
$.ajax({type: "POST", url: "../../colorme", data: b, success: function (a) {
resp = jQuery.parseJSON(a);
alert(resp.f0d8c0);
alert(resp.d8d8d8); //maybe you need to use a better way to name the data?
$.when(c.fadeOut(300).promise()).done(function () {
if (c.hasClass("btn")) {
c.removeClass("btn-default").addClass("btn-success").text(a).fadeIn()
} else {
c.replaceWith('<span class="notice_mid_link">' + a + "</span>")
}
})
}});
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.
For some reason ajax is not sending data.
On the PHP I have this code:
if (isset($_POST['submit'])) {
echo "submit";
} else {
echo "not submit";
}
And I get not submit.
This is JS code:
$(function () {
$('#submit').click(function () {
var length = $('#number').val();
var small = $('#small').val();
var big = $('#big').val();
var number = $('#numero').val();
var special = $('#special').val();
var submit = 'submit';
var url = 'public/php/codegenerator.php';
var data = "length=" + length + "&small=" + small + "&big=" + big +
"&number=" + number + "&special=" + special + "&submit=" + submit;
$.ajax({
type: "POST",
url: url,
data: data,
success: function () {
$('#code').load(url, function () {
$(this).fadeIn(1000)
});
}
});
return false;
});
});
You can try this approach
$(function(){
$('#submit').click(function(){
//YOUR CODE
var param = {
length:length,
small:small,
big:big,
number:number,
special:special,
submit:submit
}
$.ajax({
type: "POST",
url: url,
data: param,
//EDITED LINE
success: function (data) {
$('#code').hide().html(data).fadeIn(1000);
}
});
return false;
});
});
// REVISED ANSWER
// IN YOUR PHP FILE
if (isset ($_POST['submit'])) {
echo json_encode(array('result'=>"submit"));
}
else {
echo json_encode(array('result'=>"not submit"));
}
//IN YOUR JQUERY CODE
$.ajax({
type: "post",
url: url,
data: param,
dataType:'json';
//EDITED LINE
success: function (data) {
// alert(data.result);
$('#code').hide().html(data.result).fadeIn(1000);
}
});
You are getting Not submit, because it comes from the .load() call and not from .ajax - and in the load call you just load the URL without passing any POST data. So why you are running .load inside the success callback of .ajax with the same url?
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.