Уведомление при нажатии, почему не появляется?

Question

[Kirill325]

Помогите пожалуйста исправить код, при нажатии на кнопку через echo не выводится сообщение, если убрать класс и ид, то всё работает, ошибка я так понимаю в js?

<div id="info" class="info-success">Изменения успешно сохранены</div>

.info-success {
    background: #27ae60;
    background-size: 40px 40px;
    text-align: center;
}
#info {
    display: none;
    position: fixed;
    top: 0px;
    right: 0;
    padding: 15px;
    color: white;
    font-size: 18px;
    z-index: 1;
    width: 100%;
}

function showInformation(mess, style = 2) {
    let elem = $("#info");
    if (elem) {
        let tm;
        elem.hide();
        if (style == 1) elem.removeClass("info-warn info-error").addClass("info-success");
        else if (style == 3) elem.removeClass("info-success info-warn").addClass("info-error");
        else elem.removeClass("info-success info-error").addClass("info-warn");
        elem.html(mess);
        elem.fadeIn("fast", function () {
            tm = setTimeout(function () {
                if (tm)
                    clearTimeout(tm);
                elem.fadeOut("slow");
            }, 5000);
        });
    }
}

Comments

[Алексей Уколов]

Вы привели функцию, но не привели код, её вызывающий. А ещё написали про echo в контексте javascript, что указывает на то, что в коде у вас что-то странное.

[Kirill325]

Алексей Уколов, я плохо разбираюсь, но я имел ввиду, когда нажимаешь на баттон, должно выводиться сообщение через echo (сохраняются данные в бд) об успешном изменении, ошибке или предупреждении.

[Алексей Уколов]

Код покажите.

[Kirill325]

Алексей Уколов, ответ должен выводиться через php, он и выводится, но когда добавляю js он сразу пропадает, ошибка наверно там или оно вообще не контактирует..

echo "<div id='info' class='info-success'>Изменения успешно сохранены</div>";

Answer 1

[Владислав Ким]

Добрый день. У вас у "#info"
display:none;

Вы должны после того, как у вас появляется уведомление, сперва убрать display:none и поставить display:block, и уже играться с этим. Вот тут можете посмотреть

Comments

[Владислав Ким]

Там также есть функция, которая через 5 секунд уберет уведомление

[Kirill325]

огромное спасибо, сделал вот так, работает..

$(function(){
  console.log('asd')
  $('#info').css({"display":"block"})
  $('#info').fadeIn("fast", function () {
    setTimeout(function(){ 
       $('#info').css({"display":"none"})
    },5000);
  })
})

Answer 2

[Арсений Матыцин]

Сообщение не выводится потому что display: none; у айдишника.

Comments

[Kirill325]

на блок менял, мне нужно чтобы оно через 5 секунд исчезло.. и блок поменялся на нон, но я не пойму как это сделать

[Алексей Уколов]

Емнип, elem.fadeIn() и display меняет и opacity.

[Арсений Матыцин]

Kirill325, а функцию ты где и как вызываешь?

[Арсений Матыцин]

Алексей Уколов, угу, вижу. Я уже с утра весь день свободный, проглядел в принципе всю эту логику.

[Kirill325]

Арсений Матыцин, через нажатие кнопки баттон, в echo выводится, если я правильно вас понял..

[Арсений Матыцин]

Kirill325, echo это php, как я понимаю.

Оно ничего общего не имеет с JS. Твоя функция JS showInformation описывает, как появляется и с таймером запускается обработка. Где ты запускаешь эту функцию?

Чтобы запустить функцию при загрузке страницы, тебе надо ее вызвать. Покажи, как ты это делаешь. Вызывать можно на уровне HTML, по событию, скажем onclick="function showInformation(...)" или прямо в JS.