locked
jQuery chaining/callback RRS feed

  • Question

  • User-1826049516 posted

    Hey,

    I would like modal div to hide before the tr fades out.  I know this is wrong, but I can't get the chaining order right.

    $( document ).on( "click", ".modal button.confirm", function( event ) {
    
    	event.preventDefault();
    	var modal = $( this ).closest( "div.modal" );
    	var tr = $( this ).closest( "tr" );
    	var fileId = $( this ).prev( "input" ).val();
    
    	tr.fadeOut( "slow", function() {
    
    		tr.remove();
    
    	} );
    
    	modal.hide();
    
    } );

    Tuesday, October 4, 2016 11:51 AM

Answers

  • User-1826049516 posted

    Thanks Brando.  It turned out it's a known issue with jQuery (well I found an article stating so), and that you need to do the fade on the td's, not the tr.

    Doing that works perfectly.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 13, 2016 3:28 PM

All replies

  • User-1826049516 posted

    If I do this, the tr just hides, it doesn't fade out:

    $( document ).on( "click", ".modal button.confirm", function( event ) {
    
    	var modal = $( this ).closest( "div.modal" );
    	var tr = $( this ).closest( "tr" );
    	var fileId = $( this ).prev( "input" ).val();
    
    	modal.hide().promise().done( function() {
    
    		tr.fadeOut( "slow", function() {
    
    			tr.remove();
    
    		} );
    		
    	} );
    
    	event.preventDefault();
    
    } );
    
    

    Tuesday, October 4, 2016 12:03 PM
  • User283571144 posted

    Hi ldoodle,

    If I do this, the tr just hides, it doesn't fade out:

    Based on your code, I create a sample using the following code, it seems that everything works well.

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script type="text/javascript">
            $(function () {
                $(".div_inside").click(function () {
                    var modal = $(this);               //the modal
                    var tr = $(".div_outside");        //the tr
                    modal.hide().promise().done(function () {
                        tr.fadeOut("slow", function () {
                            tr.remove();
    
                        });
    
                    });
                    event.preventDefault();
    
                });
            });
        </script>
    
                <div class="div_outside" style="height:100px; width:100px; background-color:aqua">
                    <div class="div_inside" style="width:50px; height:50px; background-color:red" ></div>
                </div>

    The out put screenshot:

    Beside, you could also set the fadeout time using the following code:

            modal.fadeOut(1000, function () {
                        modal.hide();
                        tr.fadeOut(1000, function () {
    
                            tr.remove();
    
                        });
                    });
    

    The screenshot:

    Best regards,
    Brando

    Wednesday, October 5, 2016 6:37 AM
  • User-1826049516 posted

    I wonder if that's because you're using divs and not actual table rows?

    Thursday, October 6, 2016 8:29 AM
  • User283571144 posted

    Hi ldoodle,

    I wonder if that's because you're using divs and not actual table rows?

    According to your description, I had written a test demo, it works well.

    Could you please post more relevant codes about your html make up?

    More details about my test codes, you could refer to follow codes:

    <html>
    <head>
        <title></title>
    	<meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script type="text/javascript">
            $(function () {
                $(".div_inside").click(function () {
                    var modal = $(this);               //the modal
                    var tr = $(".div_outside");        //the tr
                    modal.hide().promise().done(function () {
                        tr.fadeOut("slow", function () {
                            tr.remove();
    
                        });
    
                    });
                    event.preventDefault();
    
                });
            });
        </script>
    </head>
    <body>
        <div class="div_outside" style="height:100px; width:100px; background-color:aqua">
            <table>
                <tr><td class="div_inside" style="width:50px; height:50px; background-color:red">111</td>></tr>
            </table>
        </div>
    </body>
    </html>
    

    Best Regards,

    Brando

    Wednesday, October 12, 2016 7:54 AM
  • User-1826049516 posted

    Thanks Brando.  It turned out it's a known issue with jQuery (well I found an article stating so), and that you need to do the fade on the td's, not the tr.

    Doing that works perfectly.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 13, 2016 3:28 PM