I need to update the user's points on each drop he successfully make, but for some reason the $.ajax call seems to not work as desired...
I am getting the current points using $('#userPoints').val(), then I would like to make each and addition to the current number or set first score - if...else.
Any help?
function Point() {
var phpPoints = $('#userPoints').val();
if (phpPoints != null) {
var Usrpoints = phpPoints + 5;
} else {
var Usrpoints = 5;
}
alert('Points: '+phpPoints);
var sndData = { acts:'Points', points: Usrpoints };
$.ajax({ // begin add ajax
type: "POST",
url: "game/lib/updateGame.php",
dataType:"html",
cache: false,
data: sndData,
success: function(sndData) {
$('div#UpdateUser').html(sndData).fadeIn('slow');
}
}); // end ajax
}
here instead of td use the element in which you are droping
$('td').bind('dropstop', function(){ Point();
});
Related
i am working on search form with autocomplete function. my autocomplete is working fine. i want to send the data to another php page after autocomplete value is set.
below is my jquery for autocompleate.
function autocomplet() {
var min_length = 1; // min caracters to display the autocomplete
var keyword = $('#searchitem').val();
var search_location = $('#search_location').val();
var datastring= 'keyword='+ keyword + '&search_location='+search_location;
if (keyword.length >= min_length) {
$.ajax({
url: 'global_search.php',
type: 'POST',
data: datastring,
success:function(data){
$('#search_list_id').show();
$('#search_list_id').html(data);
}
});
} else {
$('#search_list_id').hide();
}
}
// set_item : this function will be executed when we select an item
function set_item(item) {
// change input value
$('#searchitem').val(item);
window.location.href = 'searchtestr.php?key=' + data
// hide proposition list
$('#search_list_id').hide();
}
i tried window.location.href = 'searchtestr.php?key=' + data to redirect the page but its not working. the condition is the page should be redirect after some thing is selected from autocomplete.
You need to call your set_item method in your success handler:
success:function(data){
$('#search_list_id').show();
$('#search_list_id').html(data);
set_item(data.item); //data.something
}
Also, you are trying to pass a variable called data to the next page but the set_item method doesn't have access to that variable. You'd have to send item e.g. window.location.href = 'searchtestr.php?key=' + item;
Also, I'm not sure if you are doing something with a SPA (guessing not)... I don't think it makes sense to modify the DOM after you redirect the page - e.g. $('#search_list_id').hide(); and $('#searchitem').val(item);. You are aware thatwindow.location.href is not triggering an AJAX call and will redirect the entire page?
try this
function autocomplet() {
var min_length = 1; // min caracters to display the autocomplete
var keyword = $('#searchitem').val();
var search_location = $('#search_location').val();
var datastring= 'keyword='+ keyword + '&search_location='+search_location;
if (keyword.length >= min_length) {
$.ajax({
url: 'global_search.php',
type: 'POST',
data: datastring,
success:function(data){
$('#search_list_id').show();
$('#search_list_id').html(data);
},
change: function (event, ui) {
if (ui.item == null || ui.item == undefined) {
} else {
window.location.href = 'searchtestr.php?key=' + data;
}
});
} else {
$('#search_list_id').hide();
}
}
i tried like below and it worked. my concern is after value is set then redirect to php page.
function autocomplet() {
var min_length = 1; // min caracters to display the autocomplete
var keyword = $('#searchitem').val();
var search_location = $('#search_location').val();
var datastring= 'keyword='+ keyword + '&search_location='+search_location;
if (keyword.length >= min_length) {
$.ajax({
url: 'global_search.php',
type: 'POST',
data: datastring,
success:function(data){
$('#search_list_id').show();
$('#search_list_id').html(data);
}
});
} else {
$('#search_list_id').hide();
}
}
// set_item : this function will be executed when we select an item
function set_item(item) {
// change input value
$('#searchitem').val(item);
// hide proposition list
$('#search_list_id').hide();
var location = $('#search_location').val();
var search_term = $('#searchitem').val();
if(search_term != ''){
window.location.href = 'searchtestr.php?location=' + location + '&search_term='+ search_term;
}
}
Thank You all for helping me.
Following is my auto suggest code created using jquery
$(document).ready(function(){
$(".input_search").keyup(function()
{
var finder = $(this).val();
var queryString = 'key_wrd='+ finder;
if(finder==''){//check if search is empty}
else
{
$.ajax({
type: "POST",
url: "searcher.php",
data: queryString,
cache: false,
success: function(html)
{
$(".display_found_query_cont").fadeIn();
$(".display_found_query-window").append(html);
}
});
}return false;
});
});
This code closes the suggest window and clears the enterse text
$(document).mouseup(function (e)
{
var search_res_container = $(".display_found_query_cont");
if (!search_res_container.is(e.target)&& search_res_container.has(e.target).length === 0)
{
search_res_container.fadeOut().html();
$(".search_field").val('');
}
});
what do i want to do ?
I want the results displayed to be cleared when the text entered is erased
So how do i do that?
try this code:
if(finder=='')
{
//check if search is empty
$(".display_found_query-window").html('');
}
As per your comment, you want to replace the old content with new result. So just chnage the below line in your ajax success.
$(".display_found_query-window").html(html);
i use this script
<script type="text/javascript">
$(function () {
$(".comment_button").click(function () {
var element = $(this);
var boxval = $("#content").val();
var dataString = 'content=' + boxval;
if (boxval == '') {
alert("Please Enter Some Text");
} else {
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>');
$.ajax({
type: "POST",
url: "update_data.php",
data: dataString,
cache: false,
success: function (html) {
$("ol#update").prepend(html);
$("ol#update li:first").slideDown("slow");
document.getElementById('content').value = '';
$("#flash").hide();
}
});
}
return false;
});
$('.delete_update').live("click", function () {
var ID = $(this).attr("id");
var dataString = 'msg_id=' + ID;
if (confirm("Sure you want to delete this update? There is NO undo!")) {
$.ajax({
type: "POST",
url: "delete_data.php",
data: dataString,
cache: false,
success: function (html) {
$(".bar" + ID).slideUp('slow', function () {
$(this).remove();
});
}
});
}
return false;
});
});
</script>
this script combine live update and delete record using jquery and ajax
the problem is when I refresh the page, the record will disappear .. how to keep records that show up are not dissapear when the page is reloaded?
First Check the comment list. Did you put any limit in query, if so then use Order by Primary ID desc.So it would display latest records first.
When you delete any record, check whether it is actually deleted from database or not. Because you are not checking whether record actually deleted or not as per the code you given.
Assuming you are using update_data.php and delete_data.php to manipulate some database, you could use PHP to render the page initially using the data that is currently on the database.
If that is not the case, and you don't have access to that database (it could be a third party web service, right?), or you don't want to do that for any reason, you could use cookie like Saeed answered.
updated my question below
I made a script where a user can import large amounts of data. After the form is submitted and the data validated I add 2 background tasks: 1 is a script that imports all the data. This script also lets the databases know how many in total and how many he has done. The second is a script that reads how much is done from the database and displays it in a nice progress bar.
Code:
$.ajax({
type: "GET",
url: "import-process.php",
success: function(data) {}
});
var process = 0;
var checkPercentage = function() {
$.ajax({
type: "GET",
url: "get-process-status.php",
data: "importcode=123456",
success: function(data) {
if (!data.indexOf("ERROR") !== -1) {
process = data;
$("#process_balk").css('width', process + '%');
}
}
});
if (process != 100) {
setTimeout(checkPercentage, 1000);
} else {
window.location.href = "import-finished.php";
}
}
checkPercentage();
Both scripts, work fine. Except that the second script (getting the status of the process) isn't started after the first (importing the data) is finished. Which makes the complete thing kinda useless.
Any ideas how to solve this?
update:
I found out that the background process gets called only once. That's the problem. I'm just not sure how to fix it..
var checkPercentage = function() {
alert("Is this function getting called every second?");
$.ajax({
type: "GET",
async: true,
url: "required/get-process-status.php",
data: "importcode=123456",
success: function(data) {
alert(data);
}
});
setTimeout(checkPercentage, 1000);
}
The code above alerts "Is this function getting called every second?" every second. Like it should. However, the value 'data' is called only once. That's not what I expected.. Any ideas?
You mean like this?:
$.ajax({
type: "GET",
url: "import-process.php",
success: function(data) {
checkPercentage();
}
});
var process = 0;
var checkPercentage = function() {
$.ajax({
type: "GET",
url: "get-process-status.php",
data: "importcode=123456",
success: function(data) {
if (!data.indexOf("ERROR") !== -1) {
process = data;
$("#process_balk").css('width', process + '%');
}
}
});
if (process != 100) {
setTimeout(checkPercentage, 1000);
} else {
window.location.href = "import-finished.php";
}
}
I just moved checkPercantage function call from end of script to success function of first ajax. You can also move it to complete function if you wish to run it despite of errors.
Set your callback function to be:
success: function(data) {
if (!data.indexOf("ERROR") !== -1) {
process = data;
$("#process_balk").css('width', process + '%');
if (process != 100) {
setInterval(checkPercentage, 1000);
} else {
window.location.href = "import-finished.php";
}
}
}
Firstly, the if statement has to be in a callback function to work the way you want it. Secondly, you should use setInterval() instead of setTimeout() because it will recheck it every interval time.
Also, yabol is right saying that the top of your code should look like this:
$.ajax({
type: "GET",
url: "import-process.php",
success: function(data) {
checkPercentage();
}
});
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.