• 0
Sign in to follow this  
Nyo

Recarregar o conteúdo de uma div

Question

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');

    });
});

 

Share this post


Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this