All geek questions in one place

JQuery show and hide the problem

I have a recordset with an “edit” button next to them. I also have a div that has a form inside it.

when I click "edit", I show the div. Inside the div, I have a close button that just closes the div through jquery.hide (). when I then click the "Edit" button for another record, the div is not displayed at all.

I use a different show and hide other elements in my code, and they work very well. Only I can’t work.

Is there a specific use of the show () and hide () methods in my case?

    $('.edit').live('click', function() {
        var theid = $(this).attr('id');

        $('#' + theid).empty().append($('.rec_edit').show());

        if ($('#txt_nowediting_id').val() > 0) {
            load_single_rec($('#txt_nowediting_id').val());  
        };

        $('#txt_nowediting_id').val(theid);

        return false;
    });


    $('#btnCancelEdit').click(function() {
        $('.rec_edit').hide();
        load_single_rec($('#txt_nowediting_id').val());
        return false;
    });

here .rec_edit is a div that is hidden and displayed ...

+3
source share
2 answers

: #btnCancelEdit :

$('.rec_edit').hide();

:

$('.rec_edit').hide().appendTo('body');

( , , body.) , , empty() .

, ( , , load_single_rec):

<html>
    <head>

        <script type='text/javascript' src='js/jquery-1.3.2.js'></script>

        <script type='text/javascript'>
            var editor;

            $(document).ready(function() {

                $('.edit').live('click', function() {
                    var theid = $(this).attr('id');

                    $('#' + theid).empty().append($('.rec_edit').show());
    /*
                    if ($('#txt_nowediting_id').val() > 0) {
                        load_single_rec($('#txt_nowediting_id').val());
                    };
    */
                    $('#txt_nowediting_id').val(theid);

                    return false;
                });


                $('#btnCancelEdit').click(function() {
                    $('.rec_edit').hide().appendTo('body');

                    // load_single_rec($('#txt_nowediting_id').val());
                    $('#' + $('#txt_nowediting_id').val()).text('edited!');
                    return false;
                });
            });
        </script>

    </head>
    <body>
        <form>

            <div id='div1' class='edit' style='border: 2px solid #00f;' >
                Edit me
            </div>

            <div id='div2' class='edit' style='border: 2px solid #00f;' >
                Edit me too
            </div>

            <div class='rec_edit' style='display:none; border: 2px solid #f00;'>
                Editor
                <input type='button' id='btnCancelEdit' value='Cancel' />
            </div>

            <input type='hidden' id='txt_nowediting_id' />


        </form>
    </body>
</html>
0

. , , div .

"" , div, .

append. "" DOM, jQuery . " ", divs, .

, 1 , div.

    $(document).ready(function(){
    var content = $('.rec_edit').html();
    var editing = false;
$('.edit').click(function() {
        if( editing == false ) {
            var theid = $(this).attr('id');
            var tis = "#"+theid;
            // We hide P, because it the original, so when we hide the "editing" div
            // the original pops back in.
            $(tis + " p").hide("fast");
            // 
            $(tis).append( $('.rec_edit').show().html(content + theid) );
            editing = true;
        }
    return false;
});
$('#btnCancelEdit').click(function() {
    $('.rec_edit').each(function(){
        if( editing == true ) {
            // We get the parent id, so we can use it to display the hidden P to
            // restore the original.
            var parent = "#" + $(this).parent().get(0).id + " p";
            $(parent).show("fast");
            $(this).hide();
            editing = false;
            // $(this).remove();
        }
        });

    return false;
});
    });
0

Source: https://habr.com/ru/post/1713035/

More articles:


All Articles