как скрыть элемент сообщения при загрузке / добавлении нового сообщения в список каналов?

0

У меня есть несколько функций jquery в документе document.ready, и я использую метод on() для создания этих функций для "загрузки большего количества" и добавления нового сообщения в список фидов.

Тем не менее, я не могу скрыть нижний колонтитул при загрузке нового сообщения. Он работает при первой загрузке страницы (через document.ready), но не для новых сообщений. Я уже пробовал напрямую через CSS, и он работает, и я добавляю новый пост. Однако, когда я нажимаю на поле textarea (что вызовет отображение нижнего колонтитула), это не сработает.

Что вы порекомендуете? есть способ, использующий метод ON()?

Код JS

$(document).ready(function(){
    $(".footer").hide();
    $(".comments-feed").hide();

    $('ol.list-feed').on('click', '.small-textarea-main-feed', function () {
        $(this).addClass("set-large");
        //$(this).("footer-post").show();
        $(this).next().find('button#cenas').prop('disabled', $(this).val() == '');
        $(this).next('div.footer').slideDown("fast");
        $(this).next('.comments-feed').slideToggle('200');
    });

    $('ol.list-feed').on('keyup', '.set-large', function () {
        $(this).next().find('button#cenas').prop('disabled', $(this).val() == '');
    });

    $('ol.list-feed').on('focusout', '.small-textarea-main-feed', function(){
        if ($(this).val() !== '') {
        } 
        else {
            $(this).removeClass("set-large");
            $(this).siblings('div.footer').hide();
            $(".comments-feed").hide();
        }
    });

    $('ol.list-feed').on('click', 'button#cancel', function () {
        $(this).parents('.footer').hide();
        $(this).parents('.footer').siblings('.small-textarea-main-feed').removeClass('set-large');
        $(this).parents('.footer').siblings('.small-textarea-main-feed').val('');
    });
});

HTML-часть сообщения

Когда я сначала загружаю страницу (document.ready), она делает то, что я хочу, с (.footer).hide(). Однако, когда я добавляю сообщение (есть форма для этого - очень простое), он загружает сообщение в фид и не скрывает нижний колонтитул (код ниже). Как я уже сказал, я попробовал изменить курс нижнего колонтитула, используя "display: none"; хотя он влияет на все сообщения.

       <div id="" class="footer-condensed">
                                    <textarea class="small-textarea-main-feed" type="text" placeholder="Reply to @Gerardo"></textarea>
                                    <div id="" class="footer-post">
                                        <div id="" class="footer-submit-button" style:"display:none;">
                                            <button type="button" id="cancel" class="btn" onclick="cancel_button();" >Cancel</button>
                                                <span id="footer-btn-margin"></span>
                                            <button  type="button" id="hunch" class="btn btn-info">Hunch</button>
                                        </div>
                                    </div>
                                </div>

JS для погрузки сообщений (да, я пытался использовать метод hide() здесь, но не работает - это комментарий)

         $('form.cenas').submit(function() {
    // 
    var that = $(this),
    url = that.attr('action'),
    type = that.attr('method'),
    data = {};

    that.find('[name]').each(function(index, value) {

        var that = $(this),
        name = that.attr('name'),
        value = that.val();

        data[name] = value;

    });

    //event.preventDefault();
    $.ajax({

        url: url,
        type: type,
        data: data,
        cache: false, // it will force requested pages not to be cached by the browse
        success: function(html){
                    console.log(html);
                    $("ol#list-feed").prepend(html);
                    $("ol#list-feed li:first").slideDown(600);
                    //$("ol#list-feed > li.footer").hide();
                    //$("li.comments-feed").hide();

                    document.getElementById('set-width1').value='';
                    document.getElementById('tags').value='';

                    if ($("ol#list-feed > li").size() <= 3) {
                        $('#loadmorebutton').hide();
                    } else {
                        $("ol#list-feed > li:last").remove();
                        $('#loadmorebutton').show();
                    }

                }


    });
    //event.preventDefault();
    return false;
}); 
Теги:

1 ответ

0

Я все еще не совсем уверен, насколько я понимаю структуру вашей страницы, но я думаю следующее:

  • У вас есть список сообщений, каждый из которых содержит нижний колонтитул (.footer).
  • Эти нижние колонтитулы скрыты при загрузке страницы ($ (". Footer"). Hide();)
  • У вас также есть форма для добавления новых сообщений, и вы хотите, чтобы появилось новое сообщение с скрытым нижним колонтитулом.

Если это правильно, вы можете исправить его, обновив обработчик succes следующим образом:

success: function(html){
            console.log(html);

            //Create a jquery object from the returned html
            var newPost = $(html);

            //Hide the footer in the new post.
            $('.footer', newPost).hide();

            //Add the new post
            $("ol#list-feed").prepend(newPost);


            $("ol#list-feed li:first").slideDown(600);
            //$("ol#list-feed > li.footer").hide();
            //$("li.comments-feed").hide();

            document.getElementById('set-width1').value='';
            document.getElementById('tags').value='';
             if ($("ol#list-feed > li").size() <= 3) {
                $('#loadmorebutton').hide();
            } else {
                $("ol#list-feed > li:last").remove();
                $('#loadmorebutton').show();
            }
        }

Ещё вопросы

Сообщество Overcoder
Наверх
Меню