We Keep Coding

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

How to refresh an element using AJAX?

I have an element for ex. <div>. and in that I have fetched dynamic contents from database, I am already performing some database operation using AJAX and I am able to load some part of my page from other php file, but on the same page I want my other div to be repopulate its data from database.
This is my manage_your_listing.php
<div class="col-sm-12 pd">
<ul class="nav nav-tabs notificationtabs">
<li class="active">Live On Site</li>
<li>Pending Review</li>
<li>Pause</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade active in" id="live_on_site" >
<?php
include'manage_order/live_on_site.php';
?>
</div><!-- End tab1-->
<div class="tab-pane fade" id="pause" >
<?php
include'manage_order/pause_order.php';
?>
</div><!-- End tab2 -->
</div><!-- End tab-content -->
this is my live_on_site.php's AJAX function
function ConfirmPause(prod_id){
$.ajax({
type: "get",
url: "seller/manage_order/live_on_site_pause.php?prod_id="+prod_id.id,
cache: false,
dataType: "html",
asyc: false,
success: function (data) {
$("div#live_prod").html(data);
}
});
}
so finally my live_on_site.php's live_prod div is being repopulated with the contents of live_on_site_pause.php
but what I want is, there is div in pause_order.php which is accessible in every php file specified here, and that div is being populated with some database content by using select statement, and I want it just to refresh, Is it possible? or do I need to create a new php file and call it using ajax?

I solved it by using nested ajax function.
I wanted to refresh one div after processing of some database update using ajax, But later I found that there is no way ajax can refresh div, it just copies some data from source position and paste it into specified position. So while success of previous ajax function I typed one more ajax function which worked for me.
function ConfirmPause(prod_id)
{
if (confirm("Pause Product?"))
{
$.ajax({
type: "get",
url: "seller/manage_order/live_on_site_pause.php?prod_id=" + prod_id.id,
cache: false,
dataType: "html",
asyc: false,
success: function (data) {
$("div#live_prod").html(data);
//nested ajax to change pause products tab real time the moment user pauses a product it will get removed from live tab and will be added to pause products tab
$.ajax({
type: "get",
url: "seller/manage_order/pause_order_resume.php",
cache: false,
dataType: "html",
asyc: false,
success: function (data) {
$("div#pause_prod").html(data);
}
});
}
});
}
}

you cant just refresh an element with ajax, you can either process something in ajax or in other file and replace it with old contents using ajax.

jQuery not working after Ajax post

I'm currently working with an MVC page where I'm using Grid.Mvc table. I also have some search fields where I can update the table via Ajax Post, once I use the search fields and submit for sorting the html gets replaced on post-back, once replaced, the grid rows can NOT be clicked like before the Ajax call, is like the ajax call is killing the javascript or Jquery or both,
here is code for the Ajax call for the grid:
$(function() {
$(document) on.("click", "#buscar", function() {
$.ajax({
url: '/MainPage/Grid',
type: 'POST',
async: false,
datatType: 'html',
processData: true,
data: {
url: $('#url').val(),
isInternal: ('#isInternal').val()
},
success: function(data) {
$('#grid').html(data);
}
})
});
});
Here is the code for when I click the rows I send another Ajax call, but after the first code post the grid becomes unclickable;
$(function() {
pagesGrids.linksgrid.onRowSelect(function() {
$.ajax({
url: '/mainpage/getlinkdetails',
type: 'POST',
async: false,
dataType: 'html',
processData: true,
data: {
id: e.row.BrokenId
},
success: function(data) {
$('#linkdetails').html(data);
},
error: function() {
alert('something went wrong')
}
})
});
})
Any help or hint that can point me in the right direction will greatly appreciated, thanks
UPDATE
The the grid it self is a partial view rendering at Index on MVC
<div id="grid">
#Html.Action"Grid"
</div>

Your partial view is rendering new elements into the page rather than altering the existing elements.
You will need to rebind the javascript events (click) to the new elements after the partial postback.

Although this is an old post, I found a solution that worked for me, and hope it works for someone else.
AJAX forms have a data dash attribute called data-ajax-complete, to which you can pass the name of a javascript function to run. That javascript function can contain the code you need to rebind the click events to all your elements.
<form asp-controller="Home" asp-action="SaveForm" data-ajax-complete="onComplete" data-ajax="true" data-ajax-method="POST">
<input type="submit" value="Save" class="btn btn-primary" />
<div id="Results"></div>
</form>
<script>
var onComplete = function(){
results.html("");
};
</script>
More details here.

Tooltip in ajax loaded content

I have this little progress bar with tooltip.
<div class="progress progress-mini tip" title="" data-original-title="70%">
<div class="progress-bar" style="width:70%;"></div>
</div>
If I put it directly in page it works.
But when i get it with ajax:
$.ajax({
type: "GET",
url: "/ajax/getLists.php",
datatype: "html",
beforeSend: function() {
$('#ajaxspinner').show();
},
success: function(data) {
$('#ajaxspinner').hide();
$('.container-fluid #heading').after(data);
}
});
PHP file (getLists.php):
<?php
echo '<div class="progress progress-mini tip" title="" data-original-title="70%"><div class="progress-bar" style="width:70%;"></div></div>';
?>
Tooltip doesn't show.
(I'm new to jquery and I can't find solution)

I assume you are using a tooltip plugin for jquery. And that you followed the demo and initialized it on document ready, is that it?
If so, you should initialize your plugin after loading the content. Something like:
$.ajax({
type: "GET",
url: "/ajax/getLists.php",
datatype: "html",
beforeSend: function() {
$('#ajaxspinner').show();
},
success: function(data) {
$('#ajaxspinner').hide();
$('.container-fluid #heading').after(data);
$.tooltipPluginInit('.tip'); // whatever
}
});

You need to redefine tooltips.
If you have something like $(".tip").tooltip() somewhere, it runs when page loads and registers already-on-page class=tip tooltips. So when you append some using Ajax, they are not registered by .tooltip().
Possible solution: use Livequery - it monitors DOM changes and registers calls on appended elements.
Then you would define tooltips like that:
$(".tip").livequery(function(){
$(this).tooltip();
});

try putting getLists.php file in the same directory with the file that's called ajax.

Search box in a jQuery ajax success page - issues in loop

Firstly, there have some tag links in my main page. click each one, post value to b.php with jquery.ajax and turn back value in div#result.
b.php have a search box. when search something in it. the result data will still show in the div#result.
my problem is: I know if I will do jQuery ajax in the b.php, I shall write the jQuery code in the first success part. but this only can control one time, when I continue search in the search box, the jQuery not work. I think I met a loop problem. How to solve it?
a.php
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.click').click(function(){
var value1 = $(this).text();
$.ajax({
url: "b.php",
dataType: "html",
type: 'POST',
data: "data=" + value1,
success: function(data){
$("#result").html(data);
$('#search').click(function(){
var value = $('#search1').val();
$.ajax({
url: "b.php",
dataType: "html",
type: 'POST',
data: "data=" + value,
success: function(data){
$("#result").html(data);
}
});
});
}
});
});
});
</script>
<a rel="aa" class="click">aa</a>
<a rel="aa" class="click">bb</a>
<div id="result"></div>
b.php
<?php
echo $_POST['data'];
?>
<form name="form">
<input type="text" value="" id="search1">
<a name="nfSearch" id="search">search</a>
</form>

When a new element is introduced to the page the jQuery .click() method becomes useless because it can only see elements that were part of the original DOM. What you need to use instead is the jQuery .live() method which allows you to bind events to elements that were created after the DOM was loaded. You can read more about how to use it at the below link.
.live() – jQuery API
$('#search').live('click', function(e) {
// Prevent the default action
e.preventDefault();
// Your code here....
});

First of all i think you should attach the ajax call to the click on the link: the way you are doing right now just execute an ajax call as soon as the page is loaded.
$(document).ready(function(){
//when you click a link call b.php
$('a.yourclass').click(function(){
$.ajax({
url: "b.php",
dataType: "html",
type: 'POST',
data: "data = something",
success: function(data){
$("#result").html(data);
var value = $('#search').val();
$.ajax({
url: "b.php",
dataType: "html",
type: 'POST',
data: "data =" + value,
success: function(data){
$("#result").html(data);
}
});
}
});
});
});
In this way, each time a link with the class of "yourclass" is clicked an ajax call to b.php is sent and if it succed, another call is made (always to b.php). I don't understand if this is what you are looking fo, if you post your html my answer can be better.
In b.php of course you need to echo some html that can be used in the callback

It's strange how your attempting to do two ajax requests like that, surely one is enough. If you need to support multiple text boxes then you just adjust your selectors.
Your whole code can be shortended down to something like this:
$(document).ready(function() {
$('#result').load('b.php', { data: $('#search').val() });
});
So if you wanted to search for the value when clicking on a link (for links within #container):
$('#container').delegate('a', 'click', function() {
// .text() will get what's inside the <a> tag
$('#result').load('b.php', { data: $(this).text() });
});