Load specific content from a div that is in another jQuery html file

Asked

Viewed 149 times

0

Save list! I need a help here, I have a file ". html" where I assemble a list that is configured like this:

<!-- ... -->
<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>

The file "greanerydescriptions_pt.html" is configured like this:

<!-- ... -->
</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>

The code of the function Open(id) {...} ta working, but it brings the entire file, and I need it to bring only the div specifies that this instantiated in the event `onclik="Open('_xxx');".

I don’t know how to fix this.

Could someone help me?

Thanks

javascript html jquery div

  • tried to use load jQuery?

  • Pow, @Leandrade, da no mesmo

  • I wonder if it’s the same??

  • already tested here, in the second file, only have the Divs, as I put in the question, but both with the load as with the get Bringing the page with all the Divs. I will change once more to see, I tell you if confirmed

  • so did I: $("#content").load("descrs/greanerydescriptions_pt.html #div_"+id); brings all the M*das of the Divs you have in the file, carai, Jah to getting the roids fingers to test this drug

  • But you know which div it is to bring?

  • The function load will load the document, if what you want is just the specific id you will have to do it next to the server, since you will have to work on the file to then recover only the necessary.

  • He wants to carry a div, in case with the load jQuery to do so for example (load"page.html #umaDiv") only the div is loaded a iv and not the whole document. I just didn’t understand the #div +id that he wants to pass in the load function.

  • He wants to recover only #div_"+id that is in the document to be loaded. As far as I know this will not be possible without handling the contents before.

  • Eh that same @Noobsaibot, eh exactly like this written in the event call, ie: in onclick="Open('_000');" I call Function, dai, ...load("blábláblá.html #div_" + id), where "id" is the parameter passed in the call. You could answer right here as I would have to treat the "content before"?

  • o **#div_" + id @Leandrade, in this case, would be ...load("blablabla.html #div_000")... when I click on the <a> tag that calls the event with ...('_000'), ou ficaria: ..(load".... html #div_001")quando eu clicar no <a> com...('_001') and so on

Show 6 more comments

1 answer

0

Try to do that:

$("#content").append($("<div>" + data + "</div>").find("#div_"+id));

  • this would work even though the element div_xxx this in another archive friend @Bruno Trócolis?

  • So the way it is now, it’s kind of weird, but I work.

  • Pow fera, it did not work out with a friend, but I believe you have to do the same as the friend @Noobsaibot, that is, treat the text before setting the value of "content" with the result div. But note in the comment below:

  • if I remove the <html> tags,<header> and <body> and leave only the 'Dives' in the file it works, but that’s because I manually set her "display" property to "block" and all the others to "None", but then always appears the same div, rerere

  • I believe that the comment of friend @Noobsaibot is correct, IE, I leave all with the property "display" of their CSS for "None" and after I receive the block of code brought by Function I change the propr "display" to "block" before giving the append, maybe, but I have no idea how to do it in jQuery, rererere

  • Talk buddy, I don’t quite get what you want to do, but I think it’s carrying the <div> choose the same page and hide the rest, to work I also changed Teg <a> for <button>, function here with me. To simplify you could create greanerydescriptions_en.html only with the div's or use JSON. I hope to help.

  • opa @Bruno Trócolis, eh, but what happens is that this piece loads the entire page, and if I leave the greanerydescription_pt.html soh with the Divs, they are without the formatting of the stylesheet and without character selection

Show 2 more comments

Browser other questions tagged javascript html jquery div

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