Databases
StackOverflow2013
Postsdbo
POwindow jumping after ajax load
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POwindow jumping after ajax load
    text
    copied!<p>I have a blog w/ infinite scroll <a href="http://www.hvac-hacks.com" rel="nofollow">http://www.hvac-hacks.com</a> , i also ajax load comments on each post. The top post doesnt jump after the comments ajax load, but as you go further down, and as you continue to load more pages, the jumping just gets worse and worse. I read that I just need to use <code>return false</code> and put that in every function and it still jumps.</p> <p>EDIT: There is a block of JS that should move it proper, but not sure what this is about.</p> <pre><code>if ( location.hash ){ $('html, body').animate({ scrollTop: $( location.hash ).offset().top }); $( location.hash ).addClass( 'inline-comments-highlight' ); } </code></pre> <p>JS:</p> <pre><code>jQuery(document).ready(function( $ ){ // $('#default_add_comment_form textarea').textareaAutoExpand(); /** * Default ajax setup */ $.ajaxSetup({ type: "POST", url: _inline_comments.ajaxurl, dataType: "html" }); window.inline_comments_ajax_load_template = function( params, my_global ) { var my_global; var request_in_process = false; params.action = "inline_comments_load_template"; $.ajax({ data: params, global: my_global, success: function( msg ){ $( params.target_div ).fadeIn().html( msg ); request_in_process = false; if (typeof params.callback === "function") { params.callback(); } return false; } }); return false; } /** * Submit new comment, note comments are loaded via ajax */ $( document ).on('submit','.default-add-comment-form',function( e ) { event.preventDefault(); var $this = $(this); $this.css('opacity','0.5'); var full_id = this.id; var explode_post_id = full_id.split("-",2); var post_id = explode_post_id[1]; console.log ("posting a comment for post id: #"+post_id); data = { action: "inline_comments_add_comment", post_id: post_id, user_name: $('#inline_comments_user_name_'+post_id).val(), user_email: $('#inline_comments_user_email_'+post_id).val(), user_url: $('#inline_comments_user_url_'+post_id).val(), comment: $( '#comment_'+post_id ).val(), security: $('#inline_comments_nonce_'+post_id).val() }; console.log ("data stream(var array data):"); console.log ("* action: "+data.action); console.log ("* post_id: "+data.post_id); console.log ("* user_name: "+data.user_name); console.log ("* user_url: "+data.user_url); console.log ("* comment: "+data.comment); console.log ("* security: "+data.security); console.log ("---end"); console.log ("target_div: "+"#inline_comments_ajax_target_"+post_id); console.log ("template: " + $( '#inline_comments_ajax_handle' ).attr( 'data-template' )); console.log ("post_id: " + post_id); console.log ("security: " + $( '#inline_comments_nonce_'+post_id ).val()); $.ajax({ data: data, global: false, success: function( msg ){ inline_comments_ajax_load_template({ "target_div": "#inline_comments_ajax_target_"+post_id, "template": $( '#inline_comments_ajax_handle' ).attr( 'data-template' ), "post_id": post_id, "security": $( 'inline_comments_nonce_' +post_id).val() } ); $('textarea').val(''); $this.css('opacity','1'); return false; }, fail: function(){ console.log("ajax failed"); }, always: function(){ console.log(msg); } }); }); /** * Allow Comment form to be submitted when the user * presses the "enter" key. */ $(document).on('keypress', '.default-add-comment-form',function (e) { if (e.which == 13) { console.log ("Enter Key Pressed - Submitting form"); console.log (this); console.log ($(this)); $(this).submit(); return false; } }); $(window).on('scroll.inline-ajax-comments', function (e) { var elem = isScrolledIntoView('.inline-comments-ajax-start') if (elem) { var $elem = jQuery(String(elem)); if ($elem.hasClass('inline-comments-loaded')) { //console.log($elem+'already loaded'); return false; } else { $elem.addClass('inline-comments-loaded'); console.log('Load comments for '+$elem); console.log('post id: '+$elem.attr('data-id')); inline_comments_ajax_load($elem.attr('data-id')) } } }); window.inline_comments_ajax_load = function(post_id){ //console.log("load comments for post "+post_id+"..."); if ( $( '#inline_comments_ajax_handle_'+post_id ).length ) { $( '.inline-comments-loading-icon').show(); data = { "action": "inline_comments_load_template", "target_div": '#inline_comments_ajax_target_'+post_id, "template": $( '#inline_comments_ajax_handle').attr( 'data-template' ), "post_id": post_id, "security": $('#inline_comments_nonce_'+post_id).val() }; console.log("loading comments for post: "+data.post_id); $.ajax({ data: data, success: function( msg ){ $( '.inline-comments-loading-icon').fadeOut(); $( "#inline_comments_ajax_target_"+post_id).fadeIn().html( msg ); // Give a smooth fade in effect if ( location.hash ){ $('html, body').animate({ scrollTop: $( location.hash ).offset().top }); $( location.hash ).addClass( 'inline-comments-highlight' ); } return false; } }); $( document ).on('click', '.inline-comments-time-handle', function( e ){ $( '.inline-comments-content' ).removeClass('inline-comments-highlight') comment_id = '#comment-' + $( this ).attr('data-comment_id'); $( comment_id ).addClass('inline-comments-highlight'); }); } return false; } $( document ).on('click','.inline-comments-more-handle', function( e ){ event.preventDefault(); //Get the post id var full_id = this.id; var explode_post_id = full_id.split("_",2); var post_id = explode_post_id[1]; console.log (post_id); if ( $( this ).hasClass('inline-comments-more-open_'+post_id) ){ $( 'a', this ).html( _inline_comments.custom_more.more ); $('#comment_'+post_id).animate({height: '32'},250); } else { $( 'a', this ).html( _inline_comments.custom_more.less ); $('#comment_'+post_id).animate({height: '100'},250); } $( this ).toggleClass('inline-comments-more-open_'+post_id); $('#inline-comments-more-container_'+post_id).toggle(); }); /* window.inline-comments-more-toggle = function(post_id){ if ( $( this ).hasClass('inline-comments-more-open_'+post_id) ){ $( 'a', this ).html('●●●'); $('#comment').css('height', '32'); } else { $( 'a', this ).html('↑↑↑'); $('#comment').css('height', '150'); } $( this ).toggleClass('inline-comments-more-open_'+post_id); $('#inline-comments-more-container_'+post_id).toggle(); } */ window.isScrolledIntoView = function(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemInView = false; $( elem ).each(function() { $this = $(this); elemTop = $this.offset().top; elemBottom = elemTop + $this.height(); if ((elemBottom &lt;= docViewBottom) &amp;&amp; (elemTop &gt;= docViewTop)) { elemInView = $this.attr('data-id'); } }); //if (elemInView) console.log(elemInView+ " is in view!!!!"); if (elemInView) return elem+'[data-id="'+elemInView+'"]'; } }); </code></pre> <p>PHP</p> <pre><code>&lt;?php /** * Our comments form template, the comments loop is loaded via html from inline_comments_load_template() */ if ( !defined( 'ABSPATH' ) ) die( 'You cannot access this template file directly' ); ?&gt; &lt;?php $name = 'Name&amp;#8230'; $email = 'Email&amp;#8230'; $website = 'Website&amp;#8230'; $user_email = null; $user_website = null; $user_name = null; $keep_open = get_option('keep_open'); $custom_more = get_option('custom_more'); $more = inline_comments_options( 'custom_more', empty( $custom_more ) ? 'default' : $custom_more ); if ( is_user_logged_in() ){ $current_user = wp_get_current_user(); $user_name = $current_user-&gt;display_name; $user_email = $current_user-&gt;user_email; $user_website = $current_user-&gt;user_url; } ?&gt; &lt;noscript&gt;JavaScript is required to load the comments.&lt;/noscript&gt; &lt;div class ="inline-comments-ajax-start" data-id="&lt;?php echo $post-&gt;ID; ?&gt;" &gt;&lt;/div&gt; &lt;div class="inline-comments-container" id="inline-comments-container_&lt;?php echo $post-&gt;ID; ?&gt;" name="comments" &gt; &lt;div id="inline_comments_ajax_handle_&lt;?php echo $post-&gt;ID; ?&gt;" id="inline_comments_ajax_handle" class="inline_comments_ajax_handle last-child" data-post_id="&lt;?php echo $post-&gt;ID; ?&gt;"&gt; &lt;div id="inline_comments_ajax_target_&lt;?php echo $post-&gt;ID; ?&gt;" style="display: none;" &gt;&lt;/div&gt; &lt;div class="inline-comments-loading-icon"&gt;Loading Comments&amp;#8230;&lt;/div&gt; &lt;input type="hidden" name="inline_comments_nonce" value="&lt;?php print wp_create_nonce('inline_comments_nonce'); ?&gt;" id="inline_comments_nonce" /&gt; &lt;?php if ( get_option('comment_registration') != 1 || is_user_logged_in() ) : ?&gt; &lt;div class="inline-comments-content inline-comments-content-comment-fields"&gt; &lt;div class="inline-comments-p"&gt; &lt;form action="javascript://" method="POST" id="default_add_comment_form-&lt;?php echo $post-&gt;ID; ?&gt;" class="default-add-comment-form"&gt; &lt;input type="hidden" name="inline_comments_nonce_&lt;?php echo $post-&gt;ID; ?&gt;" value="&lt;?php print wp_create_nonce('inline_comments_nonce_'.$post-&gt;ID); ?&gt;" id="inline_comments_nonce_&lt;?php echo $post-&gt;ID; ?&gt;" /&gt; &lt;?php inline_comments_profile_pic(); ?&gt; &lt;textarea placeholder="Press enter to submit comment&amp;#8230;" tabindex="4" id="comment_&lt;?php echo $post-&gt;ID; ?&gt;" name="comment" id="inline-comments-textarea" class="inline-comments-auto-expand submit-on-enter"&gt;&lt;/textarea&gt; &lt;span id ="inline-comments-more-handle_&lt;?php echo $post-&gt;ID; ?&gt;" class="inline-comments-more-handle"&gt;&lt;a href="#"&gt;&lt;?php echo $more['more']; ?&gt;&lt;/a&gt;&lt;/span&gt; &lt;div id = "inline-comments-more-container_&lt;?php echo $post-&gt;ID; ?&gt;" class="inline-comments-more-container" &lt;?php if ( $user_email != null &amp;&amp; isset( $keep_open ) &amp;&amp; $keep_open != "on" ) : ?&gt;style="display: none;"&lt;?php endif; ?&gt;&gt; &lt;div id="inline-comments-allowed-tags-container_&lt;?php echo $post-&gt;ID; ?&gt;" class="inline-comments-allowed-tags-container"&gt; Allowed &lt;abbr title="HyperText Markup Language"&gt;HTML&lt;/abbr&gt; tags and attributes: &lt;code&gt;&amp;lt;a href="" title=""&amp;gt; &amp;lt;blockquote&amp;gt; &amp;lt;code&amp;gt; &amp;lt;em&amp;gt; &amp;lt;strong&amp;gt;&lt;/code&gt; &lt;/div&gt; &lt;div class="inline-comments-field"&gt;&lt;input type="text" tabindex="5" name="user_name" class="inline_comments_user_name" id="inline_comments_user_name_&lt;?php echo $post-&gt;ID; ?&gt;" placeholder="&lt;?php print $name; ?&gt;" value="&lt;?php print $user_name; ?&gt;" /&gt;&lt;/div&gt; &lt;div class="inline-comments-field"&gt;&lt;input type="email" required tabindex="5" name="user_email" class="inline_comments_user_email" id="inline_comments_user_email_&lt;?php echo $post-&gt;ID; ?&gt;" placeholder="&lt;?php print $email; ?&gt;" value="&lt;?php print $user_email; ?&gt;" /&gt;&lt;/div&gt; &lt;div class="inline-comments-field"&gt;&lt;input type="url" required tabindex="6" name="user_url" class="inline_comments_user_url" id="inline_comments_user_url_&lt;?php echo $post-&gt;ID; ?&gt;" placeholder="&lt;?php print $website; ?&gt;" value="&lt;?php print $user_website; ?&gt;" /&gt;&lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;?php else : ?&gt; &lt;div class="callout-container"&gt; &lt;p&gt;Please &lt;?php echo wp_register('','', false); ?&gt; or &lt;a href="&lt;?php print wp_login_url(); ?&gt;" class="inline-comments-login-handle"&gt;Login&lt;/a&gt; to leave Comments&lt;/p&gt; &lt;/div&gt; &lt;?php endif; ?&gt; &lt;/div&gt; &lt;/div&gt; &lt;script id="inline-comments-script-&lt;?php echo $post-&gt;ID; ?&gt;" class="inline-comments-script" &gt; /* //console.log ('&lt;?php echo $post-&gt;ID; ?&gt;' + 'has loaded...'); var tid_&lt;?php echo $post-&gt;ID; ?&gt; = setInterval( function () { if ( document.readyState !== 'complete' ) return; clearInterval( tid_&lt;?php echo $post-&gt;ID; ?&gt; ); //console.log ('running script for post id: &lt;?php echo $post-&gt;ID; ?&gt;'); inline_comments_ajax_load(&lt;?php echo $post-&gt;ID; ?&gt;) }, 100 ); */ &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload