Grab element per id on another page by javascript

Asked

Viewed 2,872 times

2

I have two pages: A and B. In B I do a search and assemble a table(HTML) and define an ID for it. In A I have the table call and depending on the situation, I display or not the table. This already worked with ebagrid which I am replacing with pure html. How do I apply a None display to it, searching for the 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 = '';

As the ID is declared on page B, it always comes null and gives dick. I thought of creating table(thead) columns on page A, and download only its contents by ajax(tbody) on page A, this is good, does not suck or is it 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 the error occurs(A):

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

  • it is important to know which page performs the call, for example, the user enters the page A, performs a

  • Dude got a little confused, could post your code so we can help you.

  • @Tobymosque, then. Page B it is just an auxiliary page, the user does not have access to it, only by the calls on A and nothing else.

  • @Romariopires, my code is just a table mount and a jquery/ajax function to popular in a table content div. The question is how I get the table ID that is on page B on A.

  • @pnet wouldn’t be feasible to load page B from behind ? with that you could get your ID

  • @Thiagofriedman, a B is just an auxiliary page. It has neither header nor includes anything. It only has ASP functions, a recordset and now my table.

  • Looking at your HTML file B, I don’t see any id, you can’t search for something that doesn’t exist.

  • @Tobymosque, this one: sRetornoDenteD = "<table border='1' id='grid_dentes_d'>"

  • You are calling the function to enable fields before or after the AJAX function.

  • It is coming after, both are being called in a function called init(). First comes ajax and then enables.

  • you can always use the js serialize field

  • @user2964140, how do I do it? I put the answer, I managed to assemble the table, but continues with the ID problem. I think it’s best to remove the answer I put.

  • so you have to https://api.jquery.com/serialize/ ai then you only have to send the value of the variable in the date field after the post...and flames in php the value of the variable you want

Show 8 more comments

2 answers

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>

So we have the following scenario.

  1. In case the Pagina A will open a popup with pagina B.
  2. To Pagina A can altenar to class invisível of div#mensagem of pagina B

So 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 on the following Jsfiddle.

  • The popup on page B is that I cannot open. I will edit and post my table and my ajax function and calls

  • your question was about picking an element per id in another window, since the question you asked does not reflect the problem, the ideal is to ask a new question.

  • But from what you are telling me, B is not a page, but a fragment of HTML that you have included on page A. There is no problem in doing this, including this is the basis of the SPA (single page application). But despite being two distinct files on the server, you only have one page/document.

  • I’m seeing that it’s not possible to take the ID of one element on one page from another, right?

1

I solved it like this. I mounted the table header in the ajax itself (the id was on the same page) and just added the table body by ajax, coming from the other page. That solved:

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 = '';
    }

Browser other questions tagged javascript

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