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

Ajax request with on method of jquery

I have a doubt, I use Jquery to load dynamic wall posts of people who follow me. Now since Jquery dosent work on dynamic content in the tradition click method I use on method for the response.If i dont trigger a Jquery method but do other things it works. I want to know how to launch Ajax method.
My Code:
$('body').on('click','.likebutton', $.ajax({
method:"POST",
url:"../assets/backend/likepost/index.php",
data:"postid="+$('.likebutton').attr('id'),
success:function(response) {
$(this).find(".liketext").html("<p class='liketext'><span class='glyphicon glyphicon-ok'></span> You like this</p>");
}
Any improvment to the code would be greatly appreciated. Thnx

Use following format:
$('body').on('click','.likebutton', function(){
var that = this;
/*
place code of other processing
*/
$.ajax({
method:"POST",
url:"../assets/backend/likepost/index.php",
data:"postid="+$(that).attr('id'),
success:function(response) {
$(that).find(".liketext").html("<p class='liketext'><span class='glyphicon glyphicon-ok'></span> You like this</p>");
}
});
}

You need to wrap ajax function call in an anonymous functions.
Use
$('body').on('click', '.likebutton', function() {
//Store the reference in a variable
var _this = $(this);
$.ajax({
method: "POST",
url: "../assets/backend/likepost/index.php",
data: "postid=" + this.id, //fetch id using this
success: function(response) {
//Use the refrence to set html
_this.find(".liketext").html("<p class='liketext'><span class='glyphicon glyphicon-ok'></span> You like this</p>");
}
});
});

Query database on beforeunload event

I was wondering if its possible to send a query to the database on the beforeunload event.
$(window).on('beforeunload',function() {
console.log('beforeunload called. run query');
});
If so, how would I do it? I need to run a query to insert dynamic values into the database.

You could try this, but beware that the onbeforeunload event is limited for certain browsers..
window.onbeforeunload = mySession;
function mySession(){
$.ajax({
url: "/../../myPHP.php",
async: false,
type: "GET"
});
return "WhatEverMessageYouFeelLike";
}
and your PHP executing query from AJAX handling..
$delete = "DELETE FROM MyTable WHERE id=" .$_SESSION['mySessionVariable'];
// your query..

Use a jQuery AJAX call. Assuming you're POSTing your data, try this:
$.post(
'your/url',
{
your : "Post Vars"
},
function(data) {
// not sure if you'll need to do anything here actually.
},
'json' // or 'html', or whatever you want your return format to be
);

I thinks the best way to use post by jQuery is $.post() method.but u can also use $.ajax
Sample way to use is
jQuery
$.post( "ajax/test.html", function( data ) {
$( ".result" ).html( data );
});
jQuery Ajax
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});

"this.source is not a function" error while implementing autocomplete

$(document).ready(function(){
var var_name=null;
$('#id1').click(function(){
$.ajax({
type:"GET",
url:" ggs.erm.servlet.setup5.Page",
success:function(response){
var_name=response;
console.log(response);
}
})
});
$("#id").autocomplete({source:var_name});
});
This is the Code I am messing with,It says TypeError:this.source is not a function. Where I am wrong,Correct me???

jQuery Ajax methods are non-blocking, so it looks like you're trying to set an auto-complete source before the previous method resolves. You probably want to move the autocomplete assignment into the success method of your .ajax() call.
So, instead of what you have, use:
$.ajax({
type: "GET",
url: "ggs.erm.servlet.setup5.Page",
success: function(response) {
$("#id").autocomplete({ source: response });
}
});

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