Develop Reference

JS, jQuery not working when I refresh part of page with Ajax

I have some JS files included in my page that are simple for displaying blocks on click ant etc..
On another part of page, I have a button. When I click it an ajax call is made that returns some values that I display on the page. To display it, I'm reloading part of page like this:
$(document).ready(function () {
$(document).on('click', '.add', function (e) {
$this = $(this);
$.ajax({
type: 'POST',
url: 'add',
dataType: 'JSON',
data: {product: $this.parent('.input-append').find('input').data('id'),quantity: $this.parent('.input-append').find('input').val()},
success: function (data) {
if(data.success == false){
alert('error')
}else{
$('.test').load(" .test");
$('.sidebar').load(" .sidebar");
$('.top').load(" .top");
}
}
});
});
This reloads part of page, displays values and etc..
However, after the ajax call is made, the JS stops working. When I click my buttons, nothing happens. No errors or anything.
I think it has to do with the ajax when I refresh part of twig and it messes up the previously loaded JS files. But what can I do in that situation? Somehow refresh the loaded JS files? How?

You have to attach event listener on button starting from the container which doesn't get reloaded by Ajax request, like this:
//#mainCont is a container that doesn't get reloaded by Ajax
$("#mainCont").on("click", ".yourBtn", function(){
//do something
});

As said #Nacho M, you need to reinit listener from the loaded element, so you hsould have something like this :
function init() {
$(document).on('click', '.yourclass', function (e) {
//your content
}
// add every button who needs to be reloaded.
}
Init them on loading page first :
$("document").ready(function() {
init();
})
And on success of Ajax call :
$.ajax({
type: 'POST',
url: 'add',
dataType: 'JSON',
data: {product: $this.parent('.input-append').find('input').data('id'),quantity: $this.parent('.input-append').find('input').val()},
success: function (data) {
if(data.success == false){
alert('error')
}else{
$('.test').load(" .test");
$('.sidebar').load(" .sidebar");
$('.top').load(" .top");
init();
}
}
});

dynamic elements and click events not firing

I'm generating elements from a list and each of these will have a click event.
This is all in the same partial view that gets refreshed every X seconds elapsed.
The first initial load doesn't work. Every auto refresh of the partial after works fine.
all (document).ready events fire.
Other code outside of the click events fire just fine.
Loop in view
<div id="#overview.GroupType.Name" class="tile #overview.AlertType.MetroBG ui-widget-content draggable" data-role="tile" style="z-index: 2;">
<div class="tile-content iconic" style="z-index: 2;">
<span class="icon #overview.AlertType.MetroImage #overview.AlertType.MetroFG"></span>
<span class="tile-badge #overview.AlertType.MetroBadgeBG #overview.AlertType.MetroBadgeFG">#overview.BadgeCount.ToString()</span>
<span class="tile-label no-padding fg-white">#overview.GroupType.Description</span>
</div>
</div>
loop in script section of (document).ready generates the following
$('##overview.GroupType.Name').on("click", function () {
alert('click');
$.ajax({
type: 'GET',
url: '#Url.Action("LoadDetail", "Home")',
dataType: 'html',
data: { 'groupName': '#overview.GroupType.Name' },
async: true,
cache: false,
success: function (data) {
$("#monitorDetail").html(data);
},
error: function (xhr, status) {
}
})
});
I read a few posts saying you have to use .on("click" ...) so I'm not sure what else to look into.

$('body').on('click', '##overview.GroupType.Name', function(){
// do stuff here
});
You could replace the body selector with the non-dynamic parent of your dynamic div . I hope that makes sense.

That's what I got from your question, but still a bit confusing:
1) You are loading something dynamically using ajax into the main view every 5s.
2) When this happens you need to bind events to something inside this dynamic content.
3) It's not working (dahh for sure not, you asked us).
Solution:
You must bind any event after the Partial Refresh, at the success method. Why? Because you have changed the DOM and the first $('document').ready did't find out this content loaded with ajax at the first time.
$('##overview.GroupType.Name').on("click", function () {
alert('click');
$.ajax({
type: 'GET',
url: '#Url.Action("LoadDetail", "Home")',
dataType: 'html',
data: { 'groupName': '#overview.GroupType.Name' },
async: true,
cache: false,
success: function (data) {
$("#monitorDetail").html(data);
//Bind the events to for anything after loading the content
},
error: function (xhr, status) {
}
})
});
And this script above will work only if the script is inside the main view, because It's need Razor Server Render to build the id '##overview.GroupType.Name'. You can't have dynamic script at the partial. Ajax will not execute this scripts.

Run WordPress ajax function only if div is visible

I have an AJAX function running in Wordpress to fetch 5 of the latest posts, but I would like to run this function only when the user scrolls to a point on the page where a specific div is visible - is this possible using jQuery?
My code so far looks like…
jQuery.ajax({
type: 'POST',
url: '/wp-admin/admin-ajax.php',
data: {
action: 'get_latest', // the PHP function to run
},
success: function(data, textStatus, XMLHttpRequest) {
jQuery('#posts-load').html(''); // empty an element
jQuery('#posts-load').append(data); // put our list of links into it
}
});

You should use waypoints.
var waypoint = new Waypoint({
element: document.getElementById('#matching_div'),
handler: function(direction) {
// your ajax call
}
})
Waypoints library is available here:
http://imakewebthings.com/waypoints/

when I click on the div that div should get refreshed and refreshed data should be displayed

$(document).ready(function () {
var j = jQuery.noConflict();
j('.refresh').click(refreshDiv);
j('.refresh').css({
color: ""
});
function refreshDiv() {
j.ajax({
url: "refresh.php",
cache: true,
success: function (html) {
j(".refresh").html(html);
}
});
}
});
I have this code ,but I am confused how to display that div gets refreshed.Please provide me some code or links to refer.I am making site in which I want to update the score when I refresh the div using ajax.

In your ajax request specify dataType:'html' as shown :-
j.ajax({
url: "refresh.php",
dataType:"html",
cache: true,
success: function (html) {
j(".refresh").html(html);
}
});

You can user the different state of Ajax please refre Ajax Details Desc
Then put beforeSend() function put any loading gif img
Then on complete() hide or remove that image
and on success return the data to div.

Try putting your function in global scope and add the relevant datatype:
function refreshDiv() {
$.ajax({
url: "refresh.php",
datatype:"html",
cache: true,
success: function (html) {
$(".refresh").html(html);
}
});
}
$(document).ready(function () {
$('.refresh').click(refreshDiv);
$('.refresh').css({
color: ""
});
});
Another suggestion is try replacing $ with your j which you have used for jQuery.noConflict() utility.
A small demo could help you.

.ready not acknowledging AJAX content

I am loading content, mostly images, through this ajax call, and would like to fade the div in only when all of the images are completely loaded. For this reason, I thought that I should use .ready, so that all of the content was loaded before I use jquery to fade it in, but for some reason the images are not completely loaded when the div gets faded in, which makes it seem like it is not waiting for everything to load.
I am basically wanting to build a preload, for this AJAX content
function getPage() {
var data = 'page=' + encodeURIComponent(document.location.hash);
$.ajax({
url: "loader.php",
type: "GET",
data: data,
cache: true,
success: function (html) {
$('#content').html(html);
$("#slider").easySlider();
$(this).ready(function() {
$('#body').fadeIn('slow');
$('#loader').fadeOut('slow');
});
}
});
Thank you for the help in advance. I am still a beginner.
example:

Edit:
Oh, now I see what's your problem!
When the success() function is fired, you gotta add a .load event to the images inside #content!
You gotta do something like this
function getPage() {
var data = 'page=' + encodeURIComponent(document.location.hash);
$('#loader').fadeIn('slow');
$.ajax({
url: "loader.php",
type: "GET",
data: data,
cache: true,
success: function (html) {
$('#content').html(html);
$("#slider").easySlider();
$('#content img').load(function(){
$('#body').fadeIn('slow');
$('#loader').fadeOut('slow');
});
}
});
}