We Keep Coding

Add onclick handler to hyperlink tag to trigger ajax?

I want to add ajax call on hyperlink tag "a", this ajax will only send some info to server and I don' have to get any return.
I tried something like this:
document.querySelector("#myId").onclick = function() {
$.ajax({
url: 'path',
type: 'post',
data: {key: 'value'},
})
.done(function() {
console.log("success");
})
.fail(function() {
console.log("error");
});
}
And I found that, if my "a" tag with a href-link like
click
My server WON"T get any info, and my fail callback function of ajax was triggered, but if I remove the href-link or replace it with # like
<a id="myId"></a>
my server WILL get the info I send, and of course my success callback funciton was triggered
The fail callback function didn't return any error message, just a simple word error
Does anybody know what's going on and how to change the page and send ajax call in the same click?
By the way, I'm not prefer to put something like
window.location.href = "https://www.google.com.tw" in my success callback function, because in this case I'm maintain others' codes, I prefer to append my code down below rather than modified the already exist one, thanks!

First you should prevent the default behaviour (redirection) by adding preventDefault() :
e.preventDefault();
Hope this helps.
document.querySelector("#myId").onclick = function(e) {
e.preventDefault();
$.ajax({
url: 'api_url',
type: 'post',
data: {key: 'value'},
})
.done(function() {
console.log("success");
})
.fail(function() {
console.log("error");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click

How to make an AJAX call to an html element?

What I want to do is pretty simple. I want to make an AJAX call to a specific html class, so that whenever the html page is loaded, jquery will make an AJAX call to that specific html div class.
For example:
<div class="targeted"></div>
In jquery:
$('.targeted')
I know that the syntax to make an AJAX call is:
$.ajax({
type: "GET",
url: "/api/something",
success: function(data) {
console.log(data);
}
});
But how do I implement this AJAX call to the $('.targeted') whenever the page is loaded?
Thanks

If you mean you want to display the result of the ajax call in the element, you update the element from within the success callback:
$.ajax({
type: "GET",
url: "/api/something",
success: function(data) {
$('.targeted').html(data);
}
});
That example assumes
You want to replace the content of the element (rather than adding to it); more options in the jQuery API.
data will be HTML. If it's plain text, use .text(data), not .html(data). If it's structured data, then of course you'll need to do more work to put the information in the desired form.

window.onload = function() {
yourFunction();
};
function yourFunction(){
$.ajax({
type: "GET",
url: "/api/something",
success: function(data) {
$('.targeted').html(data);
}
});
}
OR Drectly you can pass that method in document ready it will execute automatically
$(document).ready(function(){
//This will execute onload oof your web page what you required
yourFunction();
})
function yourFunction(){
$.ajax({
type: "GET",
url: "/api/something",
success: function(data) {
$('.targeted').html(data);
}
});
}

For when the page is loaded, you use:
$( document ).ready(function() {
console.log( "ready!" );
});
Inside the document ready, you put your AJAX call. If the result you get is in JSON format, you need to include the dataType as well like this:
$.ajax({
method: "GET",
url: "/api/something",
dataType: "json"
})
.done(function( data ) {
$('.targeted').append(JSON.stringify(data));
});
If the result is not JSON, then you can just append the data.
Also note:
The jqXHR.success(), jqXHR.error() and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail() and jqXHR.always() instead.
Please look at the jQuery documentation.

you can use jquery load like this:
$(".targeted").load('/api/something');
if you want to wait untill after the page is loaded, wrap it with window load like so:
$(window).load(function () {
$(".targeted").load('/api/something');
});
P.S. $(window).load(..) and $(".class").load(url) are two different functions

You can do:
$(function() {
$.ajax({
type: "GET",
url: "/api/something",
})
.done(function(data) {
$('.targeted').text(data);
});
});

Jquery AJAX calls in a loop

In my app, a displays available timeslots (for appointment). I want to add a class 'taken' to the slots () which are already taken. For this I wrote the following code.
$("td").each(function(){
var send = $(this).text();
$.ajax({
url:'ajax/check-availability.php',
context: this,
data:{"slot":send},
dataType:'json',
type:'get',
success: function(result){
console.log(result);
if (result.status === "taken") {
$(this).addClass('taken');
};
}
});
});
It's supposed to perform an ajax call, and if the result for a slot is 'taken', add the class 'taken' to corresponding . It does the ajax call part, but adds the class to all td elements in the table, not just the taken ones.
the check-availability.php, returns 'taken' when called it in browser but nothing happens. Also, when the condition is changed into result.status === "notTaken", all the s are added the class 'taken'
How do I fix this?

$("td").each(function(){
var that = this;
var send = $(this).text();
$.ajax({
url:'ajax/check-availability.php',
context: this,
data:{"slot":send},
dataType:'json',
type:'get',
success: function(result){
console.log(result);
if (result.status === "taken") {
$(that).addClass('taken');
};
}
});
});
see this for more reference:
$(this) inside of AJAX success not working
Ajax jquery success scope

instead of success, try using .done()
example
`
$.ajax({
url:'ajax/check-availability.php',
context: this,
data:{"slot":send},
dataType:'json',
type:'get'
}).done(function(result) {
console.log(result);
if (result.status === "taken") {
$(this).addClass('taken');
};
});
`

Refresh a table

I have read posts about this but I can't get the right answer.
I have tried Hide and Show to refresh a table:
$("#cmdUnreadID").click(function(){
$.ajax({
type: "GET",
url:"orderBy.php",
data: "unreadCtrl=1",
success:function(result){
$("#tableInbox").hide(500,function(){
$("#tableInbox").show();
});
}
});
});
this does not work for me. I tried other animations as well but nothing works. I think im missing something or I'm using the wrong way.
Any Suggestion how to Refresh the table only?

Where are you loading the result data to the UI. Probably you need to set the result to any of the element. use the html method to do that
success:function(result){
$("#tableInbox").hide(500,function(){
$("#tableInbox").html(result).show();
});
}

I think you want to change/update the content of the #tableInbox and to do that you can try this:
success:function(result){
$("#tableInbox").hide(500,function(){
$("#tableInbox").html(result).show();
});
}

Populate the table with the AJAX content
$("#cmdUnreadID").click(function(){
$.ajax({
type: "GET",
url:"orderBy.php",
data: "unreadCtrl=1",
success:function(result){
$("#tableInbox").hide(500,function(){
$("#tableInbox").html(result).show(); // <-- Notice html() call here, to populate the table
});
}
});
});

$("#cmdUnreadID").live('click', function () {
$("#tableInbox").hide(500);
$.ajax({
type: "GET",
url: "orderBy.php",
data: "unreadCtrl=1",
success: function (result) {
$("#tableInbox").html(result).show();
//Or
// $("#tableInbox").replaceWith(result).show();
}
});
});

i cant see on your code something that really changes the table,
you gota change the tables .htm() and feed the result like
$("#tableInbox").html(result)
note: you can also set dataType: to "html" or "xml" in your request, because if you receiving XML the result wont be suitable for direct feed to the table .html. jquery will do an inteligent guess from the datatype in servers response, but still it can be XML

the id of the element won't change in jquery?

i.e.
$("#savenew").live('click', function(e) {
var user=<?php echo $user?>;
$.ajax({
type: "POST",
url: "actions/sub.php",
data:{user: user} ,
success: function(){
$('#savenew').html('<span>Unsubscribe</span>');
$(this).attr('id', 'clean'); // this my problem my problem
}
});
});
the id after the ajax request, is not changing from savenew to clean, but the html is perfectly fine, so i know the ajax request is working. what do u thiunk the problem is?

You just need to save the context (via the context option for $.ajax()) so this still refers to #savenew, like this:
$("#savenew").live('click', function(e) {
var user=<?php echo $user?>;
$.ajax({
context: this, //add this!
type: "POST",
url: "actions/sub.php",
data:{user: user} ,
success: function(){
$(this).attr('id', 'clean').html('<span>Unsubscribe</span>');
}
});
});
Also note that this allows you to chain and clean things up a bit.

$(this) inside success: function(){ does not refer to $('#savenew').
As you do in the line above, you need to reference it by id:
$('#savenew').attr('id', 'clean');