1

Salve lista! preciso de uma ajuda aqui, tenho um arquivo ".html" onde monto uma lista que esta configurado assim:

<!-- ... -->
<header>
    function Open(id) {
        console.log(id);
        var x = $("#div"+id);
        $.get("descrs/greanerydescriptions_pt.html #div_"+id, function(data) {
             $("#content").append(data);
         });
         $("#headercontainer").hide();
        return false;
    }       
</header>

<body>
<div class="container content" id="content">
</div>
<div class="container headercontent" id="headercontainer">
    <div class="card cardheader" id="_000">
    <img class="card-img-top cardimgheader" src="images/abobora.jpg" alt="Abóbora" id="imgh_000">
    <header id="hdh_000"><h2 class="title">Abóbora</h2></header>
    <div class="card-body" id="div_abobora">
    <p>Nome Popular - Abóbora</p>
    <p>Nome Científico - Cucurbita moschata Duch.</p>
    <div class="form-group" align="right">
    <a href="descrs/greanerydescriptions_pt.html#div_000" class="btn btn-primary" id="btnh_000" onclick="Open('_000')" target="_parent">Descrição e Plantio</a>
    </div>
    </div>
    </div>
    <br>
    <div class="card cardheader" id="_001">
    <img class="card-img-top cardimgheader" src="images/abobrinha.jpg" alt="Abobrinha" id="imgh_001">
    <header id="hdh_001"><h2 class="title">Abobrinha</h2></header>
    <div class="card-body" id="div_abobrinha">
    <p>Nome Popular - Abobrinha italiana, abobrinha verde, abobrinha</p
    <p>Nome Científico - Cucurbita pepo L.</p>
    <div class="form-group" align="right">
    <a href="descrs/greanerydescriptions_pt.html#div_001" class="btn btn-primary" id="btnh_001" onclick="Open('_001')" target="_parent">Descrição e Plantio</a>
    </div>
    </div>
    </div>
   <br>
</div>
<!-- ... -->
</body>

O arquivo "greanerydescriptions_pt.html" ta configurado assim:

<!-- ... -->
</header>
<body>
<div class="card cardcontainer" id="div_000">
<img class="card-img-top cardimgcontainer" src="../images/abobora.jpg" alt="Abóbora" id="imgc_000">
<header id="hdc_000"><h2 class="title">Abóbora</h2></header>
<div class="card-body" id="div_abobora">
<p>Nome Popular - Abóbora</p>
<p>Nome Científico - Cucurbita moschata Duch.</p>
<!-- ... -->
</div>
</div>
<br>
<!-- ... -->
<div class="card cardcontainer" id="div_001">
<img class="card-img-top cardimgcontainer" src="../images/abobrinha.jpg" alt="Abobrinha" id="imgc_001">
<header id="hdc_001"><h2 class="title">Abobrinha</h2></header>
<div class="card-body" id="div_abobrinha">
<p>Nome Popular - Abobrinha italiana, abobrinha verde, abobrinha</p>
<!-- ... -->
</div>
</div>
</body>

O código da função Open(id) {...} ta funcionando, mas ele trás o arquivo inteiro, e eu preciso que ele traga somente a div especifica que esta instanciada no evento `onclik="Open('_xxx');".

Nao sei como resolver isso.

Alguém poderia me ajudar?

Agradeço

11
  • já tentou usar load do jQuery?
    – LeAndrade
    16/08/2018 às 22:40
  • pow, @LeAndrade, da no mesmo 16/08/2018 às 22:41
  • Será que dá no mesmo??
    – LeAndrade
    16/08/2018 às 22:45
  • ja testei aqui, no segundo arquivo, so tem as divs, como coloquei na pergunta, mas tanto com o load como com o get ta trazendo a pagina iteira com todas as divs. vou mudar mais uma vez pra ver, jah te digo se confirmou 16/08/2018 às 22:51
  • fiz assim ó: $("#content").load("descrs/greanerydescriptions_pt.html #div_"+id); traz todas as M*das das divs que tem no arquivo, carai, jah to ficando com os dedos roidos de testar essa droga 16/08/2018 às 22:54

1 Resposta 1

0

Tenta fazer isso:

$("#content").append($("<div>" + data + "</div>").find("#div_"+id));
7
  • isso funcionaria mesmo sabendo que o elemento div_xxx esta em outro arquivo amigo @Bruno Trócolis? 17/08/2018 às 10:54
  • Assim do jeito que tá agora, tá meio estranho, mas funciono. 17/08/2018 às 15:39
  • Pow fera, nao deu certo naum amigo, mas acredito que tenha de fazer igual como o amigo @NoobSaibot, isto e, tratar o texto antes de setar o valor de "content" com a div do resultado. Mas note no comentario abaixo: 17/08/2018 às 16:46
  • se eu removo as tags <html>,<header> e <body> e deixo so as 'dives' no arquivo ele funciona, mas isso porque eu setei manualmente a propriedade "display" dela para "block" e todas as outras para "none", mas dai sempre aparece a mesma div, rerere 17/08/2018 às 16:48
  • acredito que o comentario do amigo @NoobSaibot esteja correto, ou seja, deixo todas com a propriedade "display" do CSS delas para "none" e depois que eu receber o bloco de código trazido pela function eu mudo a propr "display" para "block" antes de dar o append, talvez, mas eu nao faço a minima ideia de como fazer isso em jQuery, rererere 17/08/2018 às 16:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .