I understand that the following js should jump the browser to the top of page,
$('html').scrollTop(0);
But where would I put this code so that after an ajax load it would be activated?
I have a show.js.erb file that contains the js for the asynchronous load, but simply putting that js in there doesn't work, I imagine because it would be happening simultaneously as the load.
$("#tag_posts").html("<%= escape_javascript(render @atag) %>");
So, how would I do this?
Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Google Fonts -->
<link href='+Serif' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="column col-sm-12 col-xs-12" id="main">
<!-- main right col -->
<div class="column col-sm-9 col-xs-11" id="main">
<div class="padding">
<div class="full col-sm-9">
<!-- content -->
<div class="row">
<!-- main col left -->
<div class="col-sm-12">
<!-- Render Tag Posts Asynchronously to Populate Stream -->
<div id="tag_posts"></div>
<!-- Render Posts Partial to Populate Stream -->
<%= render "posts/index" %>
I understand that the following js should jump the browser to the top of page,
$('html').scrollTop(0);
But where would I put this code so that after an ajax load it would be activated?
I have a show.js.erb file that contains the js for the asynchronous load, but simply putting that js in there doesn't work, I imagine because it would be happening simultaneously as the load.
$("#tag_posts").html("<%= escape_javascript(render @atag) %>");
So, how would I do this?
Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode./svn/trunk/html5.js"></script>
<![endif]-->
<!-- Google Fonts -->
<link href='http://fonts.googleapis./css?family=Bree+Serif' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="column col-sm-12 col-xs-12" id="main">
<!-- main right col -->
<div class="column col-sm-9 col-xs-11" id="main">
<div class="padding">
<div class="full col-sm-9">
<!-- content -->
<div class="row">
<!-- main col left -->
<div class="col-sm-12">
<!-- Render Tag Posts Asynchronously to Populate Stream -->
<div id="tag_posts"></div>
<!-- Render Posts Partial to Populate Stream -->
<%= render "posts/index" %>
- Can you show the code where you are building your Ajax request object? – Chirag Mongia Commented Feb 1, 2015 at 9:32
- Added, truncated/edited for brevity – Laser Commented Feb 1, 2015 at 9:37
- 1 I wanted to see your JAVASCRIPT which is building the AJAX object. Or if you are using jQuery, I would like see $.ajax() statement. – Chirag Mongia Commented Feb 1, 2015 at 9:47
- That line of js is it. The rest is ruby. – Laser Commented Feb 1, 2015 at 9:50
3 Answers
Reset to default 3Nut sure you need it to happen for each Ajax call, but if you do you can use the ajaxComplete. It will be trrigerd every time an Ajax call will plete.
$( document ).ajaxComplete(function() {
$('html').scrollTop(0);
});
If you don't want to trigger it for each call, you can add a condition to the function:
$( document ).ajaxComplete(function( event, xhr, settings ) {
if ( settings.url === "<%= escape_javascript(render @atag) %>" ) {
$('html').scrollTop(0);
}
});
Check the link if you need more useful examples.
If you want to have it executed for all AJAX calls in your document you need something like this:
$(document).on("ajax:success", "form[data-remote]", function(e, data, status, xhr) {
$('html').scrollTop(0);
});
In the example above when a form element with a data attribute called data-remote sends an AJAX call and the call succeeds the function is executed. Read more about on here.
Another example from jQuery Documentation but this time with ajaxSuccess:
$(document).ajaxSuccess(function() {
$( ".log" ).text( "Triggered ajaxSuccess handler." );
});
Yet another example from the docs but this time with appending the callback directly to the ajax function:
var jqxhr = $.ajax( "example.php" )
.done(function() {
alert( "success" );
})
.fail(function() {
alert( "error" );
})
.always(function() {
alert( "plete" );
});
I had the same problem. I tried exactly all the ways mentioned above. none solved it. The problem was that I had included some tag in the file which returned the ajax response. I removed the styles from there and it doesn't jump now.