Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    38
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How to make appended posts pop down smoothly

    I am trying to make this page work where new posts that get posted to it append smoothly on refresh instead of sliding up and down like they do now. Right now, you hit reply on your post and the entire thing goes up then unfolds again with the new post there, but the place is lost where you were on the paeg and you have to scroll down and I think that is not that user friendly. I want it to just pop or slide down under the existing posts so that the place on the window isn't lost for the user.

    The profile page is here. I am talking about the profile threads. It's a little bit like a facebook wall. If you need more info I will try and get it. Thank you in advance!

  • #2
    New Coder
    Join Date
    Apr 2011
    Posts
    38
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Here is the full code:

    Code:
    // Get a full list of posts and display them in the profile (triggered by clicking the thread link in the side bar.
    function show_profile_topic(thread_id)
    {
    	if (thread_id == '' || thread_id == null)
    		return false;
    		
    	var thread_id = parseInt(thread_id);
    		
    	$.ajax({
    		url: 'http://warriorcatsrpg.com/rp_threads,get_posts/',
    		type: 'POST',
    		data: {id: thread_id},
    		dataType: 'json',
    		success: function(thread)
    		{
    			if (thread != null)
    			{
    				$('#profile_rp_topic_container').slideUp(400, function()
    				{
    					$(this).html('<div class="cat_bar"><h3 class="catbg"><a id="reply_link" href="javascript:show_reply_box(' + thread_id +');">Reply <img src="' + smf_default_theme_url + '/images/comment.png" alt="Reply Icon" /></a>' + thread.topic + '</h3></div>');
    				
    					$.each(thread.posts, function(i, data)
    					{
    						var delete_action = i == 0 ? 'delete_thread(' + data.topic_id + ');' : 'delete_post(' + data.id + ');';
    						var button_strip = data.can_modify ? '<a class="profile_rp_edit_button" href="javascript:show_modify_box(' + data.id +', ' + data.topic_id + ');" title="Modify This Post"></a><a class="profile_rp_delete_button" href="javascript:' + delete_action + '" title="Delete This Post"></a>' : '';
    						$('#profile_rp_topic_container').append('<div class="profile_rp_posts" id="profile_rp_message_' + data.id + '"><div class="profile_rp_user_info"><a href="' + data.member_href + '"><img src="' + data.avatar + '" alt="avatar" class="proflle_rp_user_avatar" /></a></div><div class="profile_rp_message_body windowbg2"><div class="rp_username"><div class="profile_rp_post_actions">' + button_strip + '</div><a href="' + data.member_href + '">' + data.poster + '</a><span class="time"> - ' + data.time + '</span></div>' + data.body + '</div></div>');
    					});
    					
    					$(this).append('<br /><button id="lower_reply_button" onclick="javascript:show_reply_box(' + thread_id +');" title="Reply">Reply <img id="lower_reply_icon" src="' + smf_default_theme_url +'/images/comment.png" alt="Reply Icon" /></button>');
    					$(this).delay(300).slideDown(1000);
    				});
    			}
    		}
    	});
    }
    
    function create_rp_topic()
    {
    	var topic_body = $('#rp_topic_body').val();
    	var topic_title = $('#rp_topic_title').val();
    
    	$.ajax({
    		url: 'http://warriorcatsrpg.com/rp_threads,new_topic/',
    		type: 'POST',
    		async: false,
    		data: {title: topic_title, body: topic_body},
    		success: function(is_created)
    		{
    			if (is_created == 'true')
    				window.location.reload();
    			else if (is_created == 'permission_denied')
    				alert ('You don\'t have permission to post in this board.');
    		}
    	});
    	return false;
    }
    
    function submit_rp_reply(topic_id)
    {
    	var post_body = $('#reply_body').val();
    		
    	// Make sure they actually put something in the post field. :P
    	if (post_body == '' || post_body == null)
    	{
    		// Do some kind of error handling here.
    		return false;
    	}
    	
    	$.ajax({
    		url: 'http://warriorcatsrpg.com/rp_threads,post_new/',
    		type: 'POST',
    		async: false,
    		data: {id: topic_id, body: post_body},
    		success: function(response)
    		{
    			if (response == 'true')
    			{
    				$('#reply_body').text('Success!');
    				hide_reply_box();
    				show_profile_topic(topic_id);
    			}
    			else if (response != 'true')
    				alert ('Unknown error. Please copy this error and give it to an administrator as soon as possible.\n\n' + response);
    		}
    	});
    	
    	// Always return false, or the page will redirect. :/
    	return false;
    }
    
    function modify_post(post_id, topic_id)
    {
    	var body_text = $('#reply_body').val();
    
    	if (body_text == '' || body_text == null || post_id == '' || post_id == null || topic_id == '' || topic_id == null)
    		return false;
    		
    	$.ajax({
    		url: 'http://warriorcatsrpg.com/rp_threads,modify_post/',
    		type: 'POST',
    		async: false,
    		data: {id: post_id, id_topic: topic_id, body: body_text},
    		success: function(res_text)
    		{
    			switch (res_text)
    			{
    				case 'empty_id':
    					$('#reply_body').val('Error: No post ID was supplied.');
    					break;
    					
    				case 'empty_topic_id':
    					$('#reply_body').val('Error: No topic ID was supplied.');
    					break;
    					
    				case 'empty_post':
    					$('#reply_body').val('Error: You can\'t submit an empty post. :P');
    					break;
    					
    				case 'permission_denied':
    					$('#reply_body').val('Error: It appears you don\'t have permission to update this message! O.o');
    					break;
    					
    				case 'updated':
    					$('#reply_body').val('Success!');
    					hide_reply_box();
    					show_profile_topic(topic_id);
    					break;
    			}
    		}
    	});
    	
    	return false;
    }
    
    function delete_post(post_id)
    {
    	if (!isNaN(post_id))
    	{
    		var ok = confirm('Are you positive you wish to delete this post?');
    		if (ok)
    		{			
    			$.ajax({
    				url: 'http://warriorcatsrpg.com/rp_threads,delete_post/',
    				type: 'POST',
    				async: false,
    				data: {id: post_id},
    				success: function(response)
    				{
    					if (response == 'post_removed')
    					{
    						$('#profile_rp_message_' + post_id).hide(300, function()
    						{
    							$(this).detach();
    						});
    					}
    				}
    			});
    		}
    	}
    }
    
    function delete_thread(thread_id)
    {
    	if (!isNaN(thread_id))
    	{
    		var ok = confirm ('You are about to delete this thread! Continue?');
    		if (ok)
    		{
    			$.ajax({
    				url: 'http://warriorcatsrpg.com/rp_threads,delete_thread/',
    				type: 'POST',
    				async: false,
    				data: {id: thread_id},
    				success: function(is_deleted)
    				{
    					if (is_deleted == 'true')
    						window.location.reload();
    				}
    			});
    		}
    	}
    }
    
    function show_topic_creator()
    {
    	$('body').append('<div id="lightbox_backdrop" onclick="hide_topic_box();"></div>');
    	$('body').append('<div id="profile_rp_topic_form"><form action="' + smf_scripturl + '" method="post" onsubmit="return create_rp_topic();"><input type="text" id="rp_topic_title" value="Title..." onclick="$(\'#topic_title\').val(\'\');" /><textarea id="rp_topic_body"></textarea><br /><input type="submit" value="Create Topic" /></form></div>');
    }
    function show_reply_box(reply_to)
    {
    	var tid = parseInt(reply_to);
    	
    	$('body').append('<div id="lightbox_backdrop" onclick="hide_reply_box();"></div>');
    	$('body').append('<div id="profile_rp_reply"><form action="' + smf_scripturl +'" method="post" onsubmit="return submit_rp_reply(' + tid +');"><textarea id="reply_body"></textarea><br /><input type="submit" value="Post Reply" /></form></div>');
    }
    function hide_reply_box()
    {
    	$('#profile_rp_reply').slideUp(500, function()
    	{
    		$('#lightbox_backdrop').fadeOut(350, function()
    		{
    			$('#profile_rp_reply, #lightbox_backdrop').detach();
    		});
    	});
    }
    function hide_topic_box()
    {
    	$('#profile_rp_topic_form').slideUp(500, function()
    	{
    		$('#lightbox_backdrop').fadeOut(350, function()
    		{
    			$('#profile_rp_topic_form, #lightbox_backdrop').detach();
    		});
    	});
    }
    
    function show_modify_box(post_id, topic_id)
    {	
    	if (post_id == '' || post_id == null || topic_id == '' || topic_id == null)
    	{
    		alert('something is empty. :/');
    		return false;
    	}
    	
    	post_id = parseInt(post_id);
    	topic_id = parseInt(topic_id);
    	$.ajax({
    		url: 'http://warriorcatsrpg.com/rp_threads,get_single_post/',
    		type: 'POST',
    		asnc: false,
    		data: {id: post_id},
    		dataType: 'json',
    		success: function(post_info)
    		{
    			$('body').append('<div id="lightbox_backdrop" onclick="hide_reply_box();"></div>');
    			$('body').append('<div id="profile_rp_reply"><form action="' + smf_scripturl +'" method="post" onsubmit="return modify_post(' + post_id +', ' + topic_id + ');"><textarea id="reply_body">' + post_info.body + '</textarea><br /><input type="submit" value="Modify Post" /></form></div>');
    		}
    	});
    }
    I hope this helps people figure out what might make it run more smoothly in terms of appending new comments to the threads.

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    38
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Bump.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •