Cancel button does nothing on Edit form on BBPress

Hello,
When I worked with you to create a Create Topic and Reply slideout, we added a Submit and Cancel button. There is a Cancel button that pops up on the Edit form, please see screenshot. When clicked it does nothing, is there a way to create a function to return back to the post? Or should it be hidden with CSS on that Edit page? It would be cool if it could take you back to where you were before editing, but I am not sure if it is possible or not.

Support access is open, the code can be found in footer.php and functions.php.

URL: http://yourtechadvisors.com/forums/topic/test-topic/

Thanks.

  • Adam Czajczyk

    Hello Alex,

    I hope you're well today and thank you for your question!

    I checked your site and it seems that currently (tested with Firefox) the only thing that "Cancel" button does is simply hiding a replay form.

    You may hide it easily with this CSS rule:

    .bbpress .cancel-reply {display:none;}

    I think it should also be possible to make it "close the form and scroll back to the post" but this would require adding a bit more of JavaScript to the site. Therefore I wouldn't risk doing this via support access (I wouldn't be able to revert changes in case something went wrong) and I'd need to test it on your site as it's already customized that far that I'm not able to replicate that setup on my test site.

    That said, I'm aware that you're changing your access credentials from time to time (which by the way is a great and highly recommended practice!) so let me know please whether the credentials that you shared recently with any of us - staff members - are still valid. Or, if not, could you please sent them to me (the usual way)?

    Thanks,
    Adam

  • Adam Czajczyk

    Hello Alex!

    As currently the "Cancel" button does nothing except hiding the form, there's been some changes to the code necessary. Let me break this to steps for you.

    1. Find out which "Quote" link user clicked and apply it to replay form:

    Here's an original code in your functions.php file:

    /*Add reply form slide out on BBPress*/
    function show_form_on_click() {
    	$classes = get_body_class();
    	if (in_array('single-forum',$classes)) { ?>
    	    <script type="text/javascript">
    		    jQuery( document ).ready(function() {
    jQuery( '<div class="custom-newtopic-button">Create Topic</div>' ).insertBefore( '#new-topic-0' );
    				jQuery('.custom-newtopic-button').click(function(){
    				    jQuery('.custom-newtopic-button').hide();
    				});
    				jQuery('.custom-newtopic-button').click(function(){
    				    jQuery('.bbp-topic-form').show();
    				});
    		    });
    	    </script>
    	<?php } elseif(in_array('single-topic',$classes)) { ?>
    	    <script type="text/javascript">
    		    jQuery( document ).ready(function() {
    		        jQuery( '<div class="custom-reply-button">Reply</div>' ).insertAfter( '.bbp-pagination' );
    				jQuery('.custom-reply-button, .d4p-bbt-quote-link').click(function(){
    				    jQuery('.custom-reply-button').hide();
    				});
    				jQuery('.custom-reply-button, .d4p-bbt-quote-link').click(function(){
    				    jQuery('.bbp-reply-form').show();
    				});
    		    });
    	    </script>
    	<?php }
    }
    add_action( 'wp_footer', 'show_form_on_click' );

    Here's an updated code:

    /*Add reply form slide out on BBPress*/
    function show_form_on_click() {
    	$classes = get_body_class();
    	if (in_array('single-forum',$classes)) { ?>
    	    <script type="text/javascript">
    		    jQuery( document ).ready(function() {
    jQuery( '<div class="custom-newtopic-button">Create Topic</div>' ).insertBefore( '#new-topic-0' );
    				jQuery('.custom-newtopic-button').click(function(){
    				    jQuery('.custom-newtopic-button').hide();
    				});
    				jQuery('.custom-newtopic-button').click(function(){
    				    jQuery('.bbp-topic-form').show();
    				});
    		    });
    	    </script>
    	<?php } elseif(in_array('single-topic',$classes)) { ?>
    	    <script type="text/javascript">
    		    jQuery( document ).ready(function() {
    		        jQuery( '<div class="custom-reply-button">Reply</div>' ).insertAfter( '.bbp-pagination' );
    				jQuery('.custom-reply-button, .d4p-bbt-quote-link').click(function(){
    				    jQuery('.custom-reply-button').hide();
    				});
    				jQuery('.custom-reply-button, .d4p-bbt-quote-link').click(function(){
    				    jQuery('.bbp-reply-form').show();
    					var ref_source = jQuery('.custom-reply-button, .d4p-bbt-quote-link').attr('href').split('#')[1];
    					jQuery('.bbp-reply-form .cancel-reply').attr('href', '#' + ref_source);
    
    				});
    		    });
    	    </script>
    	<?php }
    }
    add_action( 'wp_footer', 'show_form_on_click' );

    Please compare these code snippets and you'll find out additional jQuery lines. With this lines code first reads an anchor (hash) of "Quote" link so it knows which one was clicked. Second, it adds that anchor (e.g. "#5514) to "Cancel" button so we then will be able to scroll it up.

    2. Make "Cancel" button
    - clean replay form
    - hide reply form
    - scroll back to initial link where it was clicked

    Here's a part of code related to click on "Cancel" button from your "footer.php" file:

    $('.cancel-reply').click(function(e){
    	e.preventDefault();
    		$('.bbp-topic-form').css('display','none');
    	$('.custom-newtopic-button').css('display','inline-block');
    });

    And here's an adjusted code:

    $('.cancel-reply').click(function(e){
    	e.preventDefault();
    	var scroll_back = "#post-" + $('.bbp-reply-form .cancel-reply').attr('href').split('#')[1];
    	$('#bbp_reply_content').val(' ');
    	$('.bbp-topic-form').css('display','none');
    	$('.custom-newtopic-button').css('display','inline-block');
    	$('html, body').animate({
            scrollTop: $(scroll_back).offset().top
        }, 2000);
    });

    Once you compare these codes you'll notice a few extra lines again. What I did here is:
    - first I took an URL of "Cancel" button and extracted anchor (hash) from it (e.g. "#5514")
    - I converted that anchor to post ID in form of "post-5514" (sticking to our example)
    - then I added a line that clears form text area content
    - and another snippet of code that smoothly scrolls the page to the "div" of ID (in this example to element "<div id=post-5514>"

    I hope that makes sense.

    Please note: the entire code is already applied to your site so no need to make any changes. It seems to be working fine.

    Cheers,
    Adam

  • Alex Stine

    Hello Adam,
    You have seemed to misunderstand. I am so sorry, but that did not fix the issue I am having. You made the cancel button return me to the top of the page, that is awesome, but my problem was that the Cancel button was not working in the Edit form. When you click the Edit button, there is a Submit button and a Cancel button, the Cancel button does nothing, that was the problem we were supposed to fix.
    Please see my video.
    https://drive.google.com/file/d/0B_h6oU4LzDtlNUdCZ1Z6dy1uU2M/view?usp=sharing
    As you can see in the video, I click Edit, then the Cancel button at the bottom of the topic edit form, nothing happens, that is my problem here.

    I am leaving your code because what you added is pretty awesome. Now we just need to fix the issue that we were supposed to fix originally.

    Thanks again :smiley:

  • Predrag Dubajic

    Hi Alex,

    Adding something like this to functions.php or mu-plugin should do the trick:

    function custom_cancel_topic_edit_button() { ?>
    		<script type="text/javascript">
    			jQuery( document ).ready(function() {
    				jQuery('.topic-edit .bbp-submit-wrapper').prepend('<button onclick="goBack()" class="custom-cancel-goback">Cancel</button>');
    			});
    
    			function goBack() {
    			    window.history.back();
    			}
    		</script>
    <?php }
    add_action('wp_footer', 'custom_cancel_topic_edit_button' );

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.