We Keep Coding

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);
});
});

Display SQL Query Result using AJAX

I have a news feed on my site, onto which users can post posts. These posts can then be liked by other users (just like facebook for example).
The Problem
I would like to display the users, who liked a post using ajax. Whenever a certain element is hovered.
At the moment the users are correctly displayed but below every post, not just the one which contains the hovered element.
My attempt to solve the problem
<!-- HOVER THIS -->
<span class="likers small link"></span>
<!-- DISPLAY LIKERS HERE -->
<small class="displayLikers"></small>
<!-- AJAX -->
<script>
$(function() {
$(".likers").hover(function(){
$.ajax({
url: "get/likers",
type: "GET",
success: function(response) {
$(this).closest('.displayLikers').html(response);
}
});
});
});
</script>
I would be very thankful for any kind of help!

Inside the $.ajax, $(this) does not refer to $(".likers") just add $(this) to a variable and use it in the ajax response function;
$(function() {
$(".likers").hover(function(){
var likes = $(this);
$.ajax({
url: "get/likers",
type: "GET",
success: function(response) {
likes.closest('.displayLikers').html(response);
}
});
});
});

In your example the .displayLikers is a sibling so you should probably use next(). Moreover this will refer to the actual context of the success function, so you have to create a reference before.
$(function() {
$(".likers").hover(function(){
var self = $(this);
$.ajax({
url: "get/likers",
type: "GET",
success: function(response) {
self.next('.displayLikers').html(response);
}
});
});
});

(this).parent().find not working for getting response in ajax call

$(".content-short").click(function() {
$(".content-full").empty();
var contentid=$(this).parent().find(".content-full").attr('data-id');
var content=$(this).parent().find(".content-full");
alert(contentid);
var collegename = $(this).attr('data-id');
$.ajax({
type: "post",
url: "contenthome.php",
data: 'collegename=' + collegename,
dataType: "text",
success: function(response) {
$content.html(response);
}
});
});
here the alert displays the specific data-id but
content=$(this).parent().find(".content-full");
this didn't displays data in content-full div with that specific data-id
anything wrong in the code or something else?
the query displays data if i use(."content-full"); instead of
$(this).parent().find(".content-full");

Inside the ajax callback you are using $content, but you declare your variable as content. May that be the problem?
Your question is not clear. What are you trying to achieve?

Using Two jQuery Ajax Methods in Script

Can you please let me know how I can use two Ajax call in one script and avoid conflicts? For example, I have a script like this:
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: 'POST',
url: 'nearest.php',
success: function( resp1 ){
$("#div1").html(resp1);
}
});
$.ajax({
type: 'POST',
url: 'closettime.php',
success: function( resp2 ){
$("#div2").html(resp2);
}
});
</script>
Can you please let me know how I can use both methods in the script? Thanks.

Just close DOM ready with }); at the bottom of your script block and you're all set:
$(document).ready(function() {
$.ajax({
type: 'GET',
url: 'nearest.php',
success: function( resp1 ){
$("#div1").html(resp1);
}
});
$.ajax({
type: 'GET',
url: 'closettime.php',
success: function( resp2 ){
$("#div2").html(resp2);
}
});
});// <------ YOU'RE MISSING THIS
The requests should work fine. And since you're not posting any data to the URLs I might suggest that you use type:'GET'.

Maybe you want to use the $.when method http://api.jquery.com/jquery.when/
jQuery.when understanding

possibly put one in the callback of the other, I don't understand the problem off the top my head. But if div2 is inside div 1 or something you can control the order in that fashion

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');