On button click data is sent always . But jquery ajax sometimes not returning data. I don't understand the reason behind this.
$(function(){
$.ajax({
url:'assets/get_cart_small_info.php',
type: 'get',
data: 'getsmallcart=true',
beforeSend:function(){
$('.cart_info').html('<img src="img/ring.gif">');
},
success: function(data){
setTimeout(function () {
$('.cart_info').html(data);
}, 2000);
},
error:function(){
$('.cart_info').html('<strong>Oops!</strong> Try again');
}
});
})
Currently creating a shopping cart where on every click cart value increases by 1. Then on next click it returns 2, then on another it returns 3 and so on... But sometimes it is not returning anything on clickin. Now then when I click again it returns 5. That means the previous value is sent already but it didn't show at that time and showing it on next click along with the next value. Please help!
Related
Sorry if this is a duplicate, but I've been searching for a while, only found a solution to change text or class, so I don't know if this is possible, I just need someone to point me in the right direction on what to do or how to do it.
I have two buttons, one with follow attributes that I send to Ajax to execute a function and another unfollow which does similar but executes the opposite function. I included a code which I used to identify a user to follow or unfollow, it changes between the two buttons but only when I refresh the page, I was wondering if there was a way to have the new attributes of the unfollow button when I have successfully followed a user or unfollowed without the page refresh.
Here's my code of both delegations on ajax
To follow a user
$("body").delegate("#user_click_id","click",function(event){
var user_user_id = $(this).attr("user_user_id");
event.preventDefault();
$(".overlay").show();
$.ajax ({
url: "action.php",
method : "POST",
data:{Userfollow:1,user_user_id:1,user_off_id:user_user_id},
success: function(data){
$("#follow_msg").html(data);
$(".overlay").hide();
count_user_following();
} }) })
To unfollow a user
$("body").delegate("#remove_user_click_id","click",function(event){
var user_unfollow_id = $(this).attr("user_unfollow_id");
event.preventDefault();
var data =$(this).serialize();
swal({
title: "Are you sure?",
text:"You are about to unfollow this user!",
type:"warning",
confirmButtonText:"Yes, Unfollow",
cancelButtonText:"Cancel",
closeOnConfirm:false,
closeOnCancel:false,
showCancelButton:true
},
function (isConfirm) {
if(isConfirm){
$(".overlay").show();
$.ajax ({
url: "action.php",
method : "POST",
data:{UnfollowUser:1,user_remove_id:1,user_off_id:user_unfollow_id},
success: function(data){
swal("Unfollowed","You successfully unfollowed this user","success");
$(".overlay").hide();
count_user_following();
},error:function(data){
swal("Unsuccessful","something went wrong, please try again","error");
$.('.overlay').hide();
count_user_following();
}
});
}else{
swal("You Cancelled","You are still following this user","error");
count_user_following();
}
});
})
So both buttons having attributes highlighted in both functions are given below
Follow attribute on button
<a user_user_id=<?=$user_user_id?> id="user_click_id" class="follow">Follow</a>
Unfollow attributes on button
<a user_unfollow_id=<?=$user_user_id?> id="remove_user_click_id" class="unfollow">Unfollow</a>
So my problem is getting them to switch between the follow and unfollow only after success while maintaining the highlighted attributes, I can change the class and text, but the "user_unfollow_id" to "user_user_id" is what I'm having a problem changing. Maybe I'm just missing something.. Please any step in the right direction will be appreciated.
Just a warning, all of the code below is untested...
Your two jQuery functions are almost identical. To keep things DRY, why not combine everything into one?
Instead of using two different buttons, use one button that acts as a toggle. On or off.
<a data-state="not-followed" user_user_id=<?=$user_user_id?> id="user_click_id" class="follow">Follow</a>
When the user clicks the follow link, a few things can then happen:
In your js, check the value of data-state. If it is "not-followed" then we process a follow request. If it is "followed" then we do an unfollow request. We can modify the values in the link after each press:
$("body").delegate("#user_click_id","click",function(event){
event.preventDefault();
var user_user_id = $(this).attr("user_user_id");
var state = $(this).data('state'); // get the state from the data attribute
$(".overlay").show();
$.ajax ({
url: "action.php",
method : "POST",
data:{
state: state,
userFollow:1,
user_insert_id: 1, // not sure what this is for
user_new_id: <?=$user_user_id>
},
success: function(data){
$("#follow_msg").html(data);
$(".overlay").hide();
count_user_following();
// now update the link
$(this).text(state == 'followed' ? 'unfollow' : 'follow');
// and update the data-state attribute
$(this).data('state',state == 'followed' ? 'not-followed' : 'followed')
}
})
})
So you send both follow and unfollow requests to the same place. Then when the request hits the server, just check to see if state is "follow" or "unfollow" and do the appropriate thing with the other variables that have been sent.
I have different links on my website which lead to other websites. I want to count the amount of clicks on the different links with my MySQL database.
I thought about doing a redirection over a php file which adds it in the database, but I would prefer to not redirect the user. Is it possible that the user just clicks on the tag gets immediately to the external website, and I can still count the click?
Thanks for you answers,
Till
yes you can run an ajax request and when the request is completed then you can redirect user to where ever you want to.
in the ajax request you will count the clicks and save it to the database.
you can do something like
$("a").click(function(){
$.ajax({url: "scriptthatwillcountclick.php", success: function(result){
window.open('redirect_here');
}});
});
Use ajax.
var data = {link:"value"};
$.ajax({
url : "your_file.php",
type: "POST",
data : data,
success: function(data, textStatus, jqXHR) {
console.log(data);
},
error: function (jqXHR, textStatus, errorThrown) {
console.log("error");
}
});
You can run this code inside .click function when the link is pressed.
And in your php file just increment the count.
You can use jQuery Ajax funcionality to accomplish your goal, just create an on click even for your "a" element and execute your Ajax to save the click information on your database.
$('a').on('click', function(){
$.ajax({
method: "POST",
url: "save-my-click.php",
data: { 'extrainfo' : "Some extra info" }
});
});
Do not return false, or event.preventDefault() on your click event, because it will brake the redirection.
UPDATE:
You don't need to set the success and error functions because it is going to redirect anyway and you are not going to handle them.
I am trying to display all employee name from database and automatically display the newly added name without page refresh. I used setInterval to get the data every 1 second so the displayed data is always updated.
My problem is, I cannot highlight a text from the ajax result because it refresh the ajax result every 1 second. So how can I be able to do that?
setInterval(function(){
$.ajax({
type: 'GET',
url: url+'dashboard/getLastPost',
success: function(data) {
$('.lastPost').html(data);
}
});
}, 1000);
How about
success: function(data) {
$('.lastPost').css("color","red");
$('.lastPost').html(data);
}
I have a select group populated by AJAX/PHP.
The issue i have although it works perfectly well, it does not return results 100% of the time of the page load.
Is there a specific reason why this might be happening?
the html
<div id='select_tags_div'>
</div>
the AJAX
$( document ).ready( function() {
selector_refresh();
});
function selector_refresh() {
url = '/home/bin/scripts/tags_list.php';
$.ajax({
type: 'GET',
url: url,
dataType: 'html',
beforeSend: function() {
},
success: function(result) {
$("#select_tags_div").html(result);
$(".chosen-select").chosen();
$('.chosen-select').trigger('chosen:updated');
vid_tags();
}
});
}
I have checked the source on the both success and fail to show results, and the results actually are not populated at all. I thought it may have been a chosen.js issue but now its looking like it isn't that at all. Instead it seems it may be a PHP/AJAX issue not returning the results.
When i check the AJAX success with an alert, it confirms the AJAX is successful even on the times when the PHP has not populated correctly.
ADDED
I added a button which calls the function to populate the field, of which functions 100% of the time.
Could this be a case of DOM perhaps?
I have some ajax/jquery code in one of my pages and the problem I'm having is that it doesn't work the first time the page is loaded. If I refresh the page it works no prob. It does work in firefox first time. All the variables that I'm using are ok as I've alerted them out. I don't get a success or error message. It justr doesn't appear to do anything?
Any ideas?
$('.window .request').click(function (e) {
var itm = document.getElementById('txtItm').value;
var qty = document.getElementById('txtQty').value;
var msg = document.getElementById('txtMessage').value;
var op_id = document.getElementById('txtOp_id').value;
$.ajax({
type: "POST",
url: "do_request.php?msg="+msg+"&itm="+itm+"&qty="+qty+"&op_id="+op_id,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
document.getElementById('div_main').style.display='none';
document.getElementById('div_success').style.display='block';
var row_id = document.getElementById('txtRow').value;
document.getElementById('row'+row_id).style.backgroundColor='#b4e8aa';
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('Error submitting request.');
}
});
});
It's hard to determine what the problem might be given the information and it sounds like you've not fully tested the page in a consistent manner. It seems likely there is another element on the page affecting the click event, as opposed to the handler logic itself, but there's no way to tell. Make sure you are binding to the click event after the page is ready:
$(document).ready(function(){
$("#uniquedomid").bind('click',function(){
// click handler logic
});
});
Also, as you're new to JQuery, one thing you're going to want to start looking at are all the various ways in which JQuery can improve your life. It does almost everything. But for starters, you're going to want to start using:
$("#uniquedomid")
Instead of
document.getElementById("uniquedomid")
And
$("#uniquedomid").val();
Instead of
document.getElementById("uniquedomid").value