Get element by id on another page by javascript

Question

Get element by id on another page by javascript

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

I have two pages: A and B. In B I do a search and I put a table (HTML) and I set an ID for it. In A I have the table call and depending on the situation, I display the table or not. This already worked with ebagrid which I'm replacing with pure html. How do I apply a none display on it, searching for ID? It turns out that the table is created on Page B and by ajax I download on page A? I have something like this:

document.getElementById('grid_dentes_d').style.display = '';

Because the ID is declared on page B, it always comes null and hits. I thought about creating the columns of the table (thead) on page A, and only downloading the contents of it by ajax (tbody) on page A, is that good, no stick or pure gambi? I've never done that.

Page B:

Case "grid_dentes_d"    'GRID DENTES PERMANENTES

        redim Vet_PL(2,4)

        Vet_PL(1, 1) = "IN"
        Vet_PL(1, 2) = "adVarChar"
        Vet_PL(1, 3) = "p_item_medico"
        Vet_PL(1, 4) = request("item_medico")

        Vet_PL(2, 1) = "IN"
        Vet_PL(2, 2) = "adVarChar"
        Vet_PL(2, 3) = "p_ind_tipo"
        Vet_PL(2, 4) = "D"

        set rsPesquisa = rsCursorOracle(CStr(Session("ace_usuario")), _
                                     CStr(Session("ace_senha")), _
                                     CStr(Session("ace_ip")), _
                                     cstr(Session("ace_sistema")), _
                                     CStr(Session("ace_modulo")), _
                                     "ODO_RCS_PROCEDIMENTO.get_lista_dentes", _
                                     Vet_PL, _
                                     false )

         sRetornoDenteD = "<table border='1' id='grid_dentes_d'>"
         sRetornoDenteD = "<thead>"
         sRetornoDenteD = sRetornoDenteD & "<tr>"
         sRetornoDenteD = sRetornoDenteD & "<th style='border-bottom:0px;border-left:0px class='label_right' nowrap><center>Habilitado</center></th>"
         sRetornoDenteD = sRetornoDenteD & "<th style='border-bottom:0px;border-left:0px class='label_right' nowrap><center>Código</center></th>"
         sRetornoDenteD = sRetornoDenteD & "<th style='border-bottom:0px;border-left:0px class='label_right' nowrap><center>Nome</center></th>"
         sRetornoDenteD = sRetornoDenteD & "</tr>"
         sRetornoDenteD = sRetornoDenteD & "</thead>"

         sRetornoDenteD = sRetornoDenteD & "<tbody>"


        Do While Not rsPesquisa.eof

            sRetornoDenteD = sRetornoDenteD & "<tr>"
            sRetornoDenteD = sRetornoDenteD & "<td style='border-bottom:0px;border-left:0px' class='label_right'><center>"&rsPesquisa("IND_MARCADO")&"</center></td>" 
            sRetornoDenteD = sRetornoDenteD & "<td style='border-bottom:0px;border-left:0px' class='label_right'><center>"&rsPesquisa("COD_DENTE")&"</center></td>" 
            sRetornoDenteD = sRetornoDenteD & "<td style='border-bottom:0px;border-left:0px' class='label_right' align='center'>"&rsPesquisa("NOM_DENTE")&"</td>" 
            sRetornoDenteD = sRetornoDenteD & "</tr>"

            rsPesquisa.movenext
        loop

        sRetornoDenteD = sRetornoDenteD & "</tbody>"
        sRetornoDenteD = sRetornoDenteD & "</table>"
        Response.write sRetornoDenteD

        set oPesquisa = nothing

Page A

function CarregaTabelaDenteD() {
        $.ajax({
            url: 'odo_hes0002d_crossbrowser.asp?item_medico=<%=item_medico%>&tipo_grid=grid_dentes_dec',
            type: 'GET',
            success: function (data) {
                $('#retornoDentesD').html(data);
            },
            error: function (error) {
            }
        })
    }

Where error (A) occurs:

function habilita_campos_odonto() {
        var indTipoOdonto = document.form01.ind_tipo_odonto.value;
        document.getElementById('dente_label').style.display = 'none';
        document.getElementById('dente_campos').style.display = 'none';
        document.getElementById('face_label').style.display = 'none';
        document.getElementById('face_campos').style.display = 'none';
        document.getElementById('tipo_dente_label').style.display = 'none';
        document.getElementById('tipo_dente_campos').style.display = 'none';
        document.getElementById('grid_regiao').style.display = 'none';
        document.getElementById('regioes').style.display = 'none';
        document.getElementById('field_regiao').style.display = 'none';
        document.getElementById('grid_dentes_d').style.display = 'none';//**AQUI DÁ O ERRO**
        document.getElementById('grid_dentes_p').style.display = 'none';
        document.getElementById('field_dt_permanentes').style.display = 'none';
        document.getElementById('field_dt_deciduos').style.display = 'none';

        document.getElementById('field_dentes_p').style.display = 'none';
        document.getElementById('field_dentes_d').style.display = 'none';
        document.getElementById('tipo_dente_campos_d').style.display = 'none';


        if (document.form01.ind_tipo_odonto.value == 1)  //POR DENTE
        {

            limpaGridDente("grid_dentes_d");
            limpaGridDente("grid_dentes_p");

            document.getElementById('dente_label').style.display = '';
            document.getElementById('dente_campos').style.display = '';
            document.getElementById('tipo_dente_label').style.display = '';
            document.getElementById('tipo_dente_campos').style.display = 'none';
            document.getElementById('grid_regiao').style.display = 'none';
            document.getElementById('regioes').style.display = 'none';
            document.getElementById('field_regiao').style.display = 'none';
            document.getElementById('qtd_face_dente_de').value = '';
            document.getElementById('qtd_face_dente_ate').value = '';
            document.getElementById('grid_dentes_p').style.display = '';
            document.getElementById('grid_dentes_d').style.display = '';
            document.getElementById('field_dentes_p').style.display = '';
            document.getElementById('field_dentes_d').style.display = '';
            document.getElementById('tipo_dente_campos_d').style.display = '';
        } else {
            if (document.form01.ind_tipo_odonto.value == 2) //POR REGIÃO
            {
                document.getElementById('dente_label').style.display = 'none';
                document.getElementById('dente_campos').style.display = 'none';
                document.getElementById('face_label').style.display = 'none';
                document.getElementById('face_campos').style.display = 'none';
                document.getElementById('tipo_dente_label').style.display = 'none';
                document.getElementById('tipo_dente_campos').style.display = 'none';
                document.getElementById('grid_regiao').style.display = '';
                document.getElementById('regioes').style.display = '';
                document.getElementById('field_regiao').style.display = '';
             //   document.getElementById('qtd_dente_de').value = '';
             //   document.getElementById('qtd_dente_ate').value = '';
                document.getElementById('qtd_face_dente_de').value = '';
                document.getElementById('qtd_face_dente_ate').value = '';

                document.getElementsByName('ind_tipo_dente_f')[0].checked = true;
            }
            else {
                if (document.form01.ind_tipo_odonto.value == 3) //POR DENTE OU REGIÃO
                {
                    //document.getElementById('dente_label').style.display = '';
                    //document.getElementById('dente_campos').style.display = '';
                    document.getElementById('tipo_dente_label').style.display = '';
                    document.getElementById('tipo_dente_campos').style.display = 'none';
                    document.getElementById('grid_regiao').style.display = '';
                    document.getElementById('regioes').style.display = '';
                    document.getElementById('field_regiao').style.display = '';
                    document.getElementById('qtd_face_dente_de').value = '';
                    document.getElementById('qtd_face_dente_ate').value = '';
                    document.getElementById('grid_dentes_p').style.display = '';
                    document.getElementById('grid_dentes_d').style.display = '';
                    document.getElementById('field_dentes_p').style.display = '';
                    document.getElementById('field_dentes_d').style.display = '';
                    document.getElementById('tipo_dente_campos_d').style.display = '';
                } else {
                    if (document.form01.ind_tipo_odonto.value == 4) //POR DENTE E FACE
                    {

                        limpaGridFace("grid_dentes_dec");  //se houver mudança no da combo, o sistemna limpa a grid.
                        limpaGridFace("grid_dentes_perm");

                        document.getElementById('dente_label').style.display = '';
                        document.getElementById('dente_campos').style.display = '';
                        document.getElementById('face_label').style.display = '';
                        document.getElementById('face_campos').style.display = '';
                        document.getElementById('tipo_dente_label').style.display = '';
                        document.getElementById('tipo_dente_campos').style.display = '';
                        document.getElementById('grid_regiao').style.display = 'none';
                        document.getElementById('regioes').style.display = 'none';
                        document.getElementById('field_regiao').style.display = 'none';
                    }
                }z
            }
        }

        if (((indTipoOdonto == 1) || (indTipoOdonto == 2) || (indTipoOdonto == 3) || (indTipoOdonto == 4)) && (document.getElementById('tipo_dente_campos').style.display == '')) {
            ExibeFieldsetDente();

        } else {
            if (document.form01.ind_tipo_odonto.value != "" && document.form01.ind_tipo_odonto.value!=2) {
                ExibeFieldsetDenteD();
            }
        }

    }

javascript

asked by anonymous 29.09.2015 / 21:28

2 answers

How do I know which servers are waiting for connection on my network? How can I abbreviate a name for 2 words, ignoring (of, of, das, das)?

score 1 · Answer 1

Let's assume the following pages:

Page A

<input id="toggleMsg" type="button" value="Toggle Mensagem em Pagina B" />

Page B

<style>
  .invisivel {
    display: none;
  }
</style>
<div id="mensagem">
  Hello Wolrd!
</div>

Then we have the following scenario.

If Pagina A will open a popup with pagina B .

The Pagina A can allocate class invisível of div#mensagem of pagina B

Then when you open the pop-up, you can store the open window in a variable. This way you can access the elements of this window from the variable.

//criando a URL para a pagina B.
var toggleMsg = document.getElementById("toggleMsg");
var paginaB = document.getElementById("paginaB");
var blobB = new Blob([paginaB.innerHTML], { type: paginaB.type });
var urlB = URL.createObjectURL(blobB);

//abriando o pop-up com a pagina B e acessando o seu elemento.
var windowB = window.open(urlB);
toggleMsg.addEventListener("click", function (event) {
  var mensagem = windowB.document.getElementById("mensagem");
  mensagem.classList.toggle("invisivel");
});

<input id="toggleMsg" type="button" value="Toggle Mensagem em Pagina B" />

<!-- Template para criar a Pagina B -->
<script id="paginaB" type="text/html">
  <style>
    .invisivel {
      display: none;
    }
  </style>
  <div id="mensagem">
    Hello Wolrd!
  </div>
</script>

Since it is not possible to open a Popup from a Snippet here in Stackoverflow, then the above example will not work. In any case you can look the same working in the following JSFiddle .

score 1 · Answer 2

I solved this. I mounted the table header in the ajax itself (the id stayed on the same page) and just added the body da table by ajax from the other page. This resolved:

function CarregaTabelaDenteD() {

        var str = '';

        $.ajax({
            url: 'odo_hes0002d_crossbrowser.asp?item_medico=<%=item_medico%>&tipo_grid=grid_dentes_dec',
            type: 'GET',
            success: function (data) {

                str = str + '<table border="1" id="grid_dentes_d">';
                str = str + '<thead>';
                str = str + '<tr>';
                str = str + '<th style="border-bottom:0px;border-left:0px" class="label_right" nowrap><center>Habilitado</center></th>';
                str = str + '<th style="border-bottom:0px;border-left:0px" class="label_right" nowrap><center>Código</center></th>';
                str = str + ' <th style="border-bottom:0px;border-left:0px" class="label_right" nowrap><center>Nome</center></th>';
                str = str + '</tr>';
                str = str + '</thead>';

                str = str + '<tbody>';

                str = str + data;//Aqui o que vem do oracle da outra página

                $('#retornoDentesD').html(str);
            },
            error: function (error) {
            }
        })
        str = '';
    }