Geek Answers Handbook

How can I make the page jump up after loading AJAX in ROR?

I understand that the following js should bring the browser to the top of the page,

$('html').scrollTop(0);

But where would I put this code so that after ajax loading it is activated?

I have a file show.js.erbthat contains js for asynchronous loading, but just putting js there does not work there, I think, because it will happen simultaneously as a load.

$("#tag_posts").html("<%= escape_javascript(render @atag) %>");

So how would I do that?

Thank!

<!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.com/svn/trunk/html5.js"></script>
        <![endif]-->
    <!-- Google Fonts -->
    <link href='http://fonts.googleapis.com/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" %>
+4
source share
3 answers

, , Ajax, , ajaxComplete. tridged , Ajax .

$( document ).ajaxComplete(function() {
    $('html').scrollTop(0);
});

, :

$( document ).ajaxComplete(function( event, xhr, settings ) {
    if ( settings.url === "<%= escape_javascript(render @atag) %>" ) {
        $('html').scrollTop(0);
    }
});

, .

+3

, AJAX , - :

$(document).on("ajax:success", "form[data-remote]", function(e, data, status, xhr) {
  $('html').scrollTop(0);
});

, , data-remote, AJAX, , . on .

jQuery Documentation, ajaxSuccess:

$(document).ajaxSuccess(function() {
  $( ".log" ).text( "Triggered ajaxSuccess handler." );
});

, ajax:

var jqxhr = $.ajax( "example.php" )
.done(function() {
  alert( "success" );
})
.fail(function() {
  alert( "error" );
})
.always(function() {
  alert( "complete" );
});
+2

. , . . , , ajax. , .

+1

More articles:


All Articles