Streamline HTML with JQUERY

Asked

Viewed 68 times

1

Hello, I’m having difficulties in a JS activity, I must make the last publication should be displayed first, already tried Sort, tried Sort with Function and nothing resolves, I can change the order of the objects in the array but I can’t change their order in html, someone can help me?

var noticias = [];



function atualizarLista(noticia) {
    var lista = $('#noticias-recentes-list');
    var li = $('<li id="noticia-' + noticia.id + '">');
    li.addClass('noticia');
    var p_titulo = $('<p>');
    p_titulo.addClass('titulo');
    p_titulo.attr('onclick', 'mostrarNoticia(' + noticia.id + ')');
    p_titulo.html(noticia.titulo);
    var p_conteudo = $('<p>');
    p_conteudo.addClass('conteudo');
    p_conteudo.html(noticia.conteudo
        + '<br>'
        + '<br>'
        + '<button onclick="ocultarNoticia(' + noticia.id + ')">Fechar</button>' + '<br>'
        + '<button onclick="mostrarAutor(' + noticia.id + ')">Mostrar dados do autor</button>' + '<br>'
        + '<button onclick="ocultarAutor(' + noticia.id + ')">Ocultar dados do autor</button>');
    var p_autor = $('<p>');
    p_autor.addClass('autor');
    p_autor.html(
        noticia.nome
        + '<br>' +
        noticia.email
        + '<br>' +
        noticia.data_publicacao);
    li.append(p_titulo, p_conteudo, p_autor);
    p_autor.hide();
    p_conteudo.hide();
    lista.append(li);
}

function salvar(form) {
    var titulo = $('#frm-titulo').val();
    var conteudo = $('#frm-conteudo').val();
    var nome = $('#frm-nome').val();
    var email = $('#frm-email').val();
    var data_publicacao = new Date($('#frm-data').val()).toDate('dd/mm/yyyy hh:ii');
    var data_atual = new Date().toDate('dd/mm/yyyy hh:ii');
    var noticia = {
        id: noticias.length,
        titulo: titulo,
        conteudo: conteudo,
        nome: nome,
        email: email,
        data_publicacao: data_publicacao,
        data_atual: data_atual
    };
    if (data_publicacao != undefined) {
        if (data_publicacao > data_atual || data_publicacao < data_atual) {
            alert("Sua notícia foi salva, mas ainda não foi publicada! Aguarde.");
        }
        else {
            noticias.push(noticia);
            noticias.sort(compare);
            atualizarLista(noticia);
            noticias.sort(compare);
            alert("Notícia publicada!");
        }
    }
    //form.reset();
}

function mostrarNoticia(id) {
    $('.conteudo', '#noticia-' + id).show();
}

function ocultarNoticia(id) {
    $('.conteudo', '#noticia-' + id).hide();
}

function ocultarAutor(id) {
    $('.autor', '#noticia-' + id).hide();
}

function mostrarAutor(id) {
    $('.autor', '#noticia-' + id).show();
}
function compare(a,b) {
    console.log(a.data_publicacao);
    console.log(b.data_publicacao);
    return a.data_publicacao < b.data_publicacao;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Gerenciador de notícias</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://rawgit.com/Lautert/helpers/master/javascript.helpers.js"></script>
    <script src="main.js"></script>
</head>
<body>
<div class="container header">
    <div class="row">
        <h1>Gerenciador de notícias</h1>
        <h2>Notícias recentes</h2>
        <p>Clique no título da notícia para expandir</p>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12 form">
            <h2>Cadastrar notícia</h2>

            <form class="form" onsubmit="salvar(this); return false;">
                <div>
                    <label for="frm-titulo">Título</label>
                    <br>
                    <input type="text" id="frm-titulo" name="titulo" required>
                </div>
                <div>
                    <label for="frm-conteudo">Conteúdo</label>
                    <br>
                    <textarea id="frm-conteudo" name="conteudo" cols="80" rows="5" required></textarea>
                </div>
                <div>
                    <label for="frm-nome">Nome</label>
                    <br>
                    <input type="text" id="frm-nome" name="nome" required>
                </div>
                <div>
                    <label for="frm-email">E-mail</label>
                    <br>
                    <input type="email" id="frm-email" name="email">
                </div>
                <div>
                    <label for="frm-data">Data</label>
                    <br>
                    <input type="datetime-local" id="frm-data" name="data">
                </div>
                <div>
                    <button type="submit">Salvar</button>
                    <button type="reset" formnovalidate>Limpar</button>
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 lista">
            <div id="noticias-recentes">
                <ul id="noticias-recentes-list"></ul>
            </div>
        </div>
    </div>
</div>

</body>
</html>

  • I understand your problem. If you reopen the code with the solution

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.