Ir para conteúdo
Fórum Script Brasil
  • 0

Recarregar o conteúdo de uma div


Nyo

Pergunta

Fala pessoal to travado aqui com isso, carrego o conteudo de uma pagina com varios painéis através desse js, e cada painel tem seu botão de refresh para recarregar o conteudo desses painéis que são gráficos.
Em um primeiro momento alguns deles vão ter um refresh automático, porém preciso dar o também através desse botão, enfim, to conseguindo isso em partes, mas ainda não cheguei no resultado que quero.
Agora quando clico no botão pra atualizar ele recarrega a pagina toda dentro da div certa, mas preciso que só a div recarregue novamente.

$(document).ready(function () {

    //================================================== MONTAGEM DA ESTRUTURA HTML

    function Lin(conteudo) {
        return "<div class='row scRow'>" + conteudo + "</div>";
    }

    function Col(colunas, conteudo) {
        return "<div class='col-md-" + colunas + " scCol'>" + conteudo + "</div>";
    }

    function GetHtmlBox(codigo, titulo, chave, tipo) {

        var htmlbox = "<div class='panel panel-default' id='" + chave + "' codigo=" + codigo + ">" +
            " 	<div class='panel-heading'>" +
            " 		<div class='panel-title-box'>" +
            " 		    <h3>" + titulo + "</h3>" +
            " 		</div>" +

            "       <ul class='panel-controls'>" +
            "           <li><a href='#' class='panel-fullscreen'><span class='fa fa-expand'></span></a></li>" +
            "           <li><a href='#' class='recarrega'><span class='fa fa-refresh'></span></a></li>" +
            //"           <li class='dropdown'>" +
            //"               <a href='#' class='dropdown-toggle' data-toggle='dropdown'><span class='fa fa-cog'></span></a>" +
            //"               <ul class='dropdown-menu'>" +

            //"                   <li><a href='#' class='panel-refresh'><span class='fa fa-refresh'></span> Refresh</a></li>" +
            //"               </ul>" +
            //"           </li>" +
            //"           <li><a href='#' class='panel-remove'><span class='fa fa-times'></span></a></li>" +
            "       </ul>" +

            " 	</div>" +
            " 	<div class='panel-body panel-body-table " + chave + "' id='body_" + codigo + "'>";



        htmlbox = htmlbox + " </div>" +
            " </div> ";

        return htmlbox;
    }


    //================================================== ESTRUTURA DOS gráficos COM TABELA

    function ObterTabelaHtml(array, linhas) {

        var contLinha = 0;
        var contColuna = 0;
        var html = "";

        //linhas
        $.each(array, function (linha, registro) {

            contLinha++;

            if (contLinha == 1) {
                html = html + "<div class='table-responsive'><table class='table table-bordered table-striped listaTop'><tbody>";
            }

            html = html + "<tr>";

            html = html + "<td><span class='celula' style='background-color: #" + registro[2] + "; color: #" + registro[3] + "'>" + registro[0] + "</span></td>";
            html = html + "<td><span class='celula' style='background-color: #" + registro[2] + "; color: #" + registro[3] + "'>" + registro[1] + "</span></td>";

            html = html + "</tr>";

            if (contLinha == linhas || contLinha == array.length) {
                html = html + "</tbody></table></div>";
                contLinha = 0;
            }


        });


        return html;
    }

    //**

    //================================================== ESTRUTURA E TIPOS DE gráficos

    function ObterConteudo(painel, conteudo) {

        var id = "";
        var html = "";
        var codigo = painel["codigo"];
        var tipo = painel["tipo"];


        id = "#divPainel div[codigo=" + painel["codigo"] + "] .panel-body";

        $(id).empty();

        panel_refresh($(id));

        $(id).attr("style", "height: 200px;");

        switch (tipo) {

            //================================================== TABELA FIXA
            case 1:

                var idDiv = "divTableCodigo_" + codigo;
                html = ObterTabelaHtml(conteudo, 5);

                html = "<div id='" + idDiv + "'>" + html + "</div>";
                $(id).append(html);

                if (codigo == 4) {
                    $("#" + idDiv).owlCarousel({
                        items: 3,
                        mouseDrag: true,
                        touchDrag: true,
                        slideSpeed: 300,
                        paginationSpeed: 400,
                        singleItem: false,
                        navigation: false,
                        autoPlay: true
                    });
                }

                if (codigo == 3) {
                    $("#" + idDiv).owlCarousel({
                        items: 1,
                        mouseDrag: false,
                        touchDrag: false,
                        slideSpeed: 300,
                        paginationSpeed: 400,
                        singleItem: true,
                        navigation: false,
                        autoPlay: false
                    });
                }

                if (codigo == 8) {
                    $("#" + idDiv).owlCarousel({
                        items: 1,
                        mouseDrag: true,
                        touchDrag: true,
                        slideSpeed: 300,
                        paginationSpeed: 400,
                        singleItem: false,
                        navigation: false,
                        autoPlay: true
                    });

                }


                break;

            //================================================== GRAFICO ROSCA
            case 2:

                Morris.Donut({
                    element: $(id),
                    data: conteudo,
                    colors: ['#A6D969', '#542688', '#A12235', '#EDD3F2', '#33414E',
                        '#DA3610', '#33414E', '#8DCA35', '#00BFDD', '#FF702A', '#DA3610',
                        '#80CDC2', '#A6D969', '#D9EF8B', '#FFFF99', '#F7EC37', '#F46D43',
                        '#E08215', '#D73026', '#A12235', '#8C510A', '#14514B', '#4D9220',
                        '#542688', '#4575B4', '#74ACD1', '#B8E1DE', '#FEE0B6', '#FDB863',
                        '#C51B7D', '#DE77AE', '#EDD3F2'],
                    resize: true
                });

                break;

            //================================================== GRAFICO BARRAS DUPLAS
            case 3:

                Morris.Bar({
                    element: $(id),
                    data: conteudo,
                    xkey: 'y',
                    ykeys: ['a', 'b'],
                    labels: ['Venda', 'Custo'],
                    barColors: ['#33414E', '#1caf9a'],
                    gridTextSize: '10px',
                    hideHover: true,
                    resize: true,
                    gridLineColor: '#E5E5E5'
                });

                break;

            //================================================== GRAFICO LINHA
            case 4:

                Morris.Line({
                    element: $(id),
                    data: conteudo,
                    xkey: 'y',
                    ykeys: 'a',
                    labels: ['Vendas'],
                    resize: true,
                    hideHover: true,
                    xLabels: 'day',
                    gridTextSize: '10px',
                    lineColors: ['#33414E'],
                    gridLineColor: '#E5E5E5'
                });

                break;


            //================================================== GRAFICO BARRAS VAZADAS
            case 5:

                var idSvg = "svgCodigo_" + codigo;

                $(id).append("<svg id='" + idSvg + "'></svg>")

                var nvd3Charts = function () {

                    var myColors = ["#33414E", "#8DCA35", "#00BFDD", "#FF702A", "#DA3610",
                        "#80CDC2", "#A6D969", "#D9EF8B", "#FFFF99", "#F7EC37", "#F46D43",
                        "#E08215", "#D73026", "#A12235", "#8C510A", "#14514B", "#4D9220",
                        "#542688", "#4575B4", "#74ACD1", "#B8E1DE", "#FEE0B6", "#FDB863",
                        "#C51B7D", "#DE77AE", "#EDD3F2"];
                    d3.scale.myColors = function () {
                        return d3.scale.ordinal().range(myColors);
                    };

                    var startChart4 = function () {
                        nv.addGraph(function () {
                            var chart = nv.models.discreteBarChart().x(function (d) {
                                return d.label;
                            })//Specify the data accessors.
                                .y(function (d) {
                                    return d.value;
                                }).staggerLabels(true)//Too many bars and not enough room? Try staggering labels.
                                .tooltips(false)//Don't show tooltips
                                .showValues(true)//...instead, show the bar value right on top of each bar.
                                .transitionDuration(350)
                                .color(d3.scale.myColors().range());;

                            d3.select("#" + idSvg).datum(exampleData()).call(chart);

                            nv.utils.windowResize(chart.update);

                            return chart;
                        });

                        //Each bar represents a single discrete quantity.
                        function exampleData() {
                            return [{
                                key: "Cumulative Return", values: conteudo
                            }];
                        }
                    };

                    return {
                        init: function () {
                            startChart4();
                        }
                    };

                }();

                nvd3Charts.init();

                break;

            //***

        }

        panel_refresh($(id));

    }

    //****

    //================================================== DEFINE A ESTRUTURA DE MONTAGEM DOS PAINEIS

    var painel;

    function CarregarPaineis() {

        painel = [
            [
                { codigo: 1, tit: "Faturamento Dia", col: 12, tempo: 0, tipo: 4 }
            ],
            [
                { codigo: 2, tit: "Conversão", col: 2, tempo: 0, tipo: 2 },
                { codigo: 6, tit: "Meta", col: 3, tempo: 0, tipo: 5 },
                { codigo: 4, tit: "Vendas por loja", col: 7, tempo: 0, tipo: 1 }
            ],
            [
                { codigo: 3, tit: "Indicadores", col: 3, tempo: 0, tipo: 1 },
                { codigo: 7, tit: "Crescimento", col: 5, tempo: 0, tipo: 3 },
                { codigo: 8, tit: "Top Vendedores", col: 2, tempo: 0, tipo: 1 },
                { codigo: 9, tit: "Vendas por Linha", col: 2, tempo: 0, tipo: 2 }
            ]
        ];


        //Linhas
        $.each(painel, function (linha, colunas) {

            var htmlCols = "";

            //Colunas
            $.each(colunas, function (coluna, painel) {

                htmlCols = htmlCols + Col(painel["col"],
                    GetHtmlBox(
                        painel["codigo"],
                        painel["tit"],
                        "divPainel_" + (linha + 1) + "_" + (coluna + 1),
                        painel["tipo"]
                    ));

            });

            //Carrega estrutura box
            $("#divPainel").append(Lin(htmlCols));

            //Carrega conteudo
            $.each(colunas, function (coluna, painel) {

                var tipo = painel["tipo"];

                var dados = BaixarDados(painel);
                ObterConteudo(painel, dados);

                //Carrega agendamento
                if (painel["tempo"] > 0) {

                    var timPainel = setInterval(function () {

                        var dados = BaixarDados(painel);
                        ObterConteudo(painel, dados);

                    }, painel["tempo"] * 1000);

                }

            });

        });

    }

    //================================================== CONTEUDO CONSUMIDO NOS gráficos DE ACORDO COM O TIPO

    function BaixarDados(painel) {

        var codigo = painel["codigo"];
        var conteudo;

        switch (codigo) {

            case 1:
                conteudo = [
                    { y: '2016-02-01', a: 2000 },
                    { y: '2016-02-02', a: 1700 },
                    { y: '2016-02-03', a: 2500 },
                    { y: '2016-02-04', a: 4500 },
                    { y: '2016-02-05', a: 2500 },
                    { y: '2016-02-06', a: 3500 },
                    { y: '2016-02-07', a: 4500 },
                    { y: '2016-02-08', a: 1500 },
                    { y: '2016-02-09', a: 2500 },
                    { y: '2016-02-10', a: 3500 },
                    { y: '2016-02-11', a: 2500 },
                    { y: '2016-02-12', a: 3200 },
                    { y: '2016-02-13', a: 1800 },
                    { y: '2016-02-14', a: 4000 },
                    { y: '2016-02-15', a: 3500 },
                    { y: '2016-02-16', a: 2000 },
                    { y: '2016-02-17', a: 5000 }
                ];
                break;
            case 2:
                conteudo = [
                    { label: "Compraram", value: 150 },
                    { label: "Visitaram", value: 80 }
                ];
                break;
            case 3:
                conteudo = [
                    ["Valor total Venda", "15.100,00", "FFFFFF", "000000"],
                    ["Markup", "2.5", "FFFFFF", "000000"],
                    ["Ticket Médio", "R$ 350,00", "FFFFFF", "000000"],
                    ["Peças Atendimento", "4", "FFFFFF", "000000"],
                    ["Quantidade Vendida", "2.500", "FFFFFF", "000000"]
                ];
                break;
            case 4:
                conteudo = [
                    ["W015 - LOJA 015", "54.100,00", "00CC00", "FFFFFF"],
                    ["W020 - LOJA 020", "44.054,70", "00CC00", "FFFFFF"],
                    ["W050 - LOJA 050", "23.830,00", "FFFFFF", "000000"],
                    ["W100 - LOJA 100", "63.500,00", "00CC00", "FFFFFF"],
                    ["W230 - LOJA 230", "93.450,00", "FF0000", "FFFFFF"],
                    ["W011 - LOJA 011", "54.100,00", "FFFF00", "000000"],
                    ["W002 - LOJA 002", "34.054,70", "FFFFFF", "000000"],
                    ["W250 - LOJA 250", "23.830,00", "FFFF00", "000000"],
                    ["W112 - LOJA 112", "13.500,00", "FFFF00", "000000"],
                    ["W030 - LOJA 030", "53.450,00", "FFFF00", "000000"],
                    ["W045 - LOJA 045", "34.100,00", "FFFFFF", "000000"],
                    ["W050 - LOJA 050", "64.054,70", "FF0000", "FFFFFF"],
                    ["W065 - LOJA 065", "33.830,00", "00CC00", "FFFFFF"],
                    ["W042 - LOJA 042", "13.500,00", "00CC00", "FFFFFF"],
                    ["W081 - LOJA 081", "43.450,00", "00CC00", "FFFFFF"],
                    ["W093 - LOJA 093", "84.100,00", "00CC00", "FFFFFF"],
                    ["W023 - LOJA 023", "74.054,70", "FFFFFF", "000000"],
                    ["W077 - LOJA 077", "63.830,00", "00CC00", "FFFFFF"],
                    ["W154 - LOJA 154", "53.500,00", "00CC00", "FFFFFF"],
                    ["W221 - LOJA 221", "83.450,00", "FF0000", "FFFFFF"],
                    ["W016 - LOJA 016", "54.100,00", "00CC00", "FFFFFF"],
                    ["W023 - LOJA 023", "44.054,70", "FFFFFF", "000000"],
                    ["W012 - LOJA 012", "33.830,00", "00CC00", "FFFFFF"],
                    ["W005 - LOJA 005", "23.500,00", "00CC00", "FFFFFF"],
                    ["W111 - LOJA 111", "53.450,00", "00CC00", "FFFFFF"]
                ];

                break;
            case 5:
                conteudo = [
                    { y: 'Out 10', a: Math.random(), b: Math.random() },
                    { y: 'Oct 11', a: Math.random(), b: Math.random() },
                    { y: 'Oct 12', a: Math.random(), b: Math.random() },
                    { y: 'xxx 13', a: Math.random(), b: Math.random() },
                    { y: 'Oct 14', a: Math.random(), b: Math.random() },
                    { y: 'Oct 15', a: Math.random(), b: Math.random() },
                    { y: 'Set 16', a: Math.random(), b: Math.random() }
                ];

                break;
            case 6:
                conteudo = [{ "label": "Norte", "value": -29.76 },
                { "label": "Sul", "value": 50 },
                { "label": "Centro-Oeste", "value": -10 },
                { "label": "Nordeste", "value": 30 },
                { "label": "Sudeste", "value": 80 }
                ];

                break;
            case 7:
                conteudo = [
                    { y: 'Ago/15', a: 80, b: 70 },
                    { y: 'Set/15', a: 55, b: 60 },
                    { y: 'Out/15', a: 65, b: 40 },
                    { y: 'Nov/15', a: 82, b: 80 },
                    { y: 'Dez/15', a: 95, b: 80 },
                    { y: 'Jan/16', a: 40, b: 35 }
                ];
                break;
            case 8:
                conteudo = [
                    ["Jonas Alencar Silva", "4.100,00", "00CC00", "FFFFFF"],
                    ["Patricia Marcela Carvalho", "4.054,70", "00CC00", "FFFFFF"],
                    ["Priscila Rodrigues Santos", "3.830,00", "00CC00", "FFFFFF"],
                    ["Bruan Denise Nunes", "3.500,00", "00CC00", "FFFFFF"],
                    ["Martilene de Oliveira", "3.450,00", "FFFF00", "000000"],
                    ["Fernanda Souza", "2.500,00", "FFFF00", "000000"],
                    ["Luciana Marques Brito", "2.005,60", "FFFF00", "000000"],
                    ["Fabiana Carolina Machado", "1.891,00", "FFFF00", "000000"],
                    ["Andressa Graça Silva", "1.750,00", "FFFF00", "000000"],
                    ["Eliane Gleice Dantas", "1.500,00", "FFFFFF", "000000"],
                    ["Ednea Monteiro Matos", "1.321,00", "FFFFFF", "000000"],
                    ["Lidiane Lopes Prado", "900,00", "FFFFFF", "000000"]
                ];
                break;
            case 9:
                conteudo = [
                    { label: "Calçado", value: 1200 },
                    { label: "Casual", value: 4000 },
                    { label: "Cosmético", value: 500 },
                    { label: "Acessórios", value: 2400 },
                    { label: "Outros", value: 900 }
                ];
                break;

        }

        return conteudo;

    }

    //*

    CarregarPaineis();   

    $(".recarrega").on("click", function () {

        let id = ($(this).parents('.panel-default').attr('id'));
        let cod = ($(this).parents('.panel-default').attr('codigo'));

        Log(id);
        Log(cod);   

        $('#' + id).load('Home');

    });
});

 

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...