We Keep Coding

Rails check partial is fully loaded following ajax call

I render a partial after an ajax call:
show.js.erb
$("#notice_feed").html("<%=j render 'shared/notice_feed' %>")
_notice_feed.html.erb
<ol class="notices" id="notice_list">
<%= render #notices %>
</ol>
This ends up rendering a list of #notices. The names of each notice are listed on the right and I have some jquery to scroll down to the relevant rendered #notice when you click on the name:
name.on('click', function() {
$("#absolute-div").animate({scrollTop: $('#notice_' + this.className).offset().top -200 }, 500);
});
When you click on the name it correctly scrolls down, but only sometimes stops scrolling on the correct #notice, and gets nowhere near for other #notices. I suspect the problem is that the jquery is called before the whole partial list has finished rendering. I've tried surrounding the javascript with
$(window).on("load", function() {
...
};
but this doesn't fire, presumably because it already fired when the original page was loaded.
How do I check that a partial following an ajax call has fully loaded using jquery?
Or is there a better way to identify a div and scroll to it accurately?

You can do this in two ways:
Rails way:
Make a method on js for call the animate scroll something like that:
name.on('click', function() {
scrolling_to(this.className);
});
function scrollin_to(name){
$("#absolute-div").animate({scrollTop: $('#notice_' + name).offset().top -200 }, 500);
}
Then, in show.js.erb do that:
scrolling_to(#notice_show.name);
Js way:
Use ajax to call to the rails route:
jQuery.ajax({
type: 'get',
url: 'your url here',
dataType: 'json',
cache: false,
success: function(data, textStatus){
$("#notice_feed").html(data.msg);
$("#absolute-div").animate({scrollTop: $('#notice_' + data.name).offset().top -200 }, 500);
}
});
Rails show method:
def show
data ={
msg: #notice_feed
name: #notice_feed.name
}
render json: data;
end

Solved it. I changed .offset() to .position(). Now it works beautifully.
name.on('click', function() {
$("#absolute-div").animate({scrollTop: $('#notice_' + this.className).position().top -200 }, 500);
});
I needed the position of the #notices relative to the parent, not the document (jQuery here).

Processing a PHP request from an ajax-driven Fancybox element on the same page

I've been working on a little project that involves collecting/processing search results and I thought you guys may be able to lend a hand. I have a small script that takes a search value from a search input, processes it via PHP and then collects and inserts the results in a fancybox via JS. Thus far, all is going well but I can't seem to work out the next bit.
I can't manage to interact with any elements in the fancy box because it will reload the page (for example, previous and next buttons or search input). How would you go about loading new content or form inputs into a fancybox on the same page instance using AJAX?
HTML:
<form action="search.php" method="post" name="search" id="search">
<input size="35" value="" placeholder="Search" name="search" id="result" autocomplete="off">
<button id="check" data-fancybox-type="ajax" href="search/search.php" id="check">Search</button>
Script:
jQuery(document).ready(function(submit) {
$('#check').on("click", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
cache: false,
url: "search.php",
data: $("#result").serializeArray(),
success: function (data) {
// on success, post returned data in fancybox
$.fancybox(data, {
// fancybox API options
fitToView: true,
openEffect: 'fade',
closeEffect: 'fade'
});
}
});
});
});
The above script is largely basses on this post
Thanks for your ideas!

The fancybox API provides a number of event based callback functions for interacting with the fancybox elements, before, during and after the box is shown or loaded. This allows you a lot of flexibility.
I would use the afterLoad() callback function within the Fancybox2 API.
See this fiddle i put together: Fancybox afterLoad() callback to return a function
This is just my solution, I am still very much a student of js, so I can't say this is the best way, and I welcome feedback or edits.
Basically we will use the afterLoad() API function of fancybox so that upon successful load of the fancybox element driven from your successful $.ajax call a function is returned to then listen to the click event of an element loaded into your fancybox.
$.fancybox(echoData, {
// fancybox API options
fitToView: true,
openEffect: 'fade',
closeEffect: 'fade',
afterLoad: function () {
return fancyUpdateMyWay = function () {
var a = Math.random();
var newHtml = "<h4>UPDATED=" + a + "</h4>";
$("#fancyResult").html(newHtml);
}
}
});
Note: I imagine that you will want to do further ajax calls from within the fancybox results, and here I only demonstrated a simple DOM update from jquery.

try changing your javascript to use 'click' instead of 'on'. this should do it
jQuery(document).ready(function(submit) {
$('#check').click(function (e) {
e.preventDefault();
$.ajax({
....
});
});
});

Ajax start event issue

Im trying to show a progressbar when my page is doing an ajax request.
I have a div with an image inside it and i would like to show it on the ajaxStart event. The problem is the img only shows itself when the ajaxStart event is done. However the alert is fired before the ajax request.
$(document).ajaxStart(function () {
alert("test");
document.getElementById('LoadingDiv').style.visibility = "visible";
});

$.ajax({
url: url,
async: true,
dataType: 'json',
success: function (data) {
Posted abit to early changed async to true and works now.

You can show/hide loading spinner like this:
/*LOADING SPINNER*/
jQuery.ajaxSetup({
beforeSend: function() {
$('#loadingDiv').show()
},
complete: function(){
$('#loadingDiv').hide()
},
success: function() {}
});
The #loadingDiv simply contains an animated image. The ajaxSetup method set default values for future Ajax requests.
That means that this loading indicator will be shown every time when making ajax calls.

Hide leanModal div with form

First of all I want to say I am not a javascript expert at all..
I am testing Ray Stone's leanModal pluggin.
I am able to open and close modal using the pluggin.
I have added a form to modal div.
What I want to do now is to close the modal when user clicks submit button (as you can see in project website).
The problem is that I don't process the form as usual. I get the data using jQuery and I do request to server using $.ajax(). Here is my code:
$(function() {
$('#add-user').submit(function() {
$.ajax({
type: 'post',
url: '***',
data: '***',
contentType: 'application/json',
dataType: 'json'
});
$(this).closest('form').find("input[type=text], textarea").val("");
$(this).leanModal.closeModal('#cp');
return false;
});
});
Where
#add-user is the link that opens the modal.
#cp is the div id of the modal.
In this case the div gets close but the blur behind the div does not dissapear until user do clicks. The effect is the same than using $('#cp').remove();
How can I totally close the div when the request is sent?
Thanks in advance
Update: A jsFiddle with my code is available here.
Some CSS rules are missed and I have not featured the AJAX request but I think the main code is there.

Firstly $.ajax() is asynchronous so the following lines
$(this).closest('form').find("input[type=text], textarea").val("");
$(this).leanModal.closeModal('#cp');
will be executed even if your query is not successful.
You would better do
$.ajax({
...
success: function () {
$(this).closest('form').find("input[type=text], textarea").val("");
$(this).leanModal.closeModal('#cp');
}
});
Secondly, after checking the source, I think you should use
$.leanModal.close_modal('#cp');
$("#lean_overlay") seems to be the "blur" element you want to get rid of.
Ultimately you could do $("#lean_overlay").remove() but the plugin seems to manage it already
Finally you should have
$(function() {
$('#add-user').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '***',
data: '***',
contentType: 'application/json',
dataType: 'json',
success: function () {
$('#add-user :input:not(:submit)').val('');
$.leanModal.close_modal('#add-user');
}
});
return false;
});
});

Hyperlink's click even not triggering in jQuery

Here is my full JS code:
var timeOutId;
function ft(){
$.get("progress.txt", null, function(data){
if(data.substr(0,10) == "MSG::MSG::"){
$("#box").html(data);
window.clearTimeout(timeOutId);
}else{
$("#box").html(data);
}
});
};
$(document).ready(function(){
$("#box").corner('20px');
$("#progress").hide();
});
$("#newm").click(function(){
$("#progress").show();
$("#list").html = $.ajax({
url: "action.php",
global: false,
type: "POST",
data: ({keyword : $("#keyword").value()},{format: $("#format").value()},{filename: $("#filename").value()},{list: $("#list").value()}),
dataType: "html"
});
timeOutId = window.setTimeout("ft()", 10000);
});
and there is a hyperlink with ID "newm" on page but clicking on the link doesnt trigger the ajax request. Can anyone tell me what is wrong?

Description
I have tryed your code and recognize that your binding to click is not working because the DOM element is not available at this time.
You should bind it under $(document).ready() to ensure the DOM is fully loaded before binding javascript / jquery to that.
This will enusre that your link will work, but its hard to help you without the html source.
If this will not help, please post the html.