CODEWITHSUNDEEP
jqueryhtmlreplacewith
Thomas Hodge
Thomas Hodge

Reputation: 13

Using .html() to replace text in a <div>

I have been searching all over for an answer to this and nothing seems to be relevant. Sorry if there is another similar question.

I am trying to put multiple pages on to just an index.html page, and therefore am trying to make clicking on a menu button replace text within my content div.

I have tried using .replaceWith(); .empty() and append() (and .appendTo() ), and have found that the following works, but only once. I am quite new to coding and therefore any responses in Laymans terms would be greatly appreciated. :)

My HTML: ......

<div id="menubar">
            <ul>
            <a href="index.html"><h6>Home</h6><a/>
            <h6 id="buildServ">Building Services</h6>
            <h6 id="maintServ">Maintenance and Handyman Services</h6>
            <h6>Garden Services</h6>
            <h6>Gallery</h6>
            <h6>Contact Me</h6>
            </ul>
</div>
<div id="content" style="padding:10px;marginleft:50px;width:40%;height:auto;float:left;border:3px solid white;border-radius:15px;background-image:url('menuGrad.jpg');background-repeat:repeat-x;behavior: url('PIE.htc');">

            <div id="textDiv">
                <p>this is where the homepage text will go</p>
        </div><!-- textDiv -->

            <div id="textDiv2" style="display:none;">
                <p>this is where the building services text will go</p>
            </div><!-- textDiv2 -->

                <div id="textDiv3" style="display:none;">
                    <p>this is where maintenance services text will go</p>
                </div><!-- textDiv3 -->

        </div><!-- content -->

and the jQuery: ...

                    <script>
        $("#buildServ").click(function(){
            $("#content").html($("#textDiv2"));
            $("#textDiv2").show();
            });
        $("#maintServ").click(function(){
            $("#content").html($("#textDiv3"));
            $("#textDiv3").show();
            });

        </script>

Once I have clicked on #buildServ it works, but then I click #maintServ and try to go back to #buildserv and it clears the #content .

Hope this is clear, if any other info is required to assist please let me know.

Upvotes: 0

Views: 2014

Answers (4)

Arun P Johny
Arun P Johny

Reputation: 388316

There is no need to write handler for each item

$textDivs = $('#content > div')
$("#menubar ul > *").click(function(){
    $textDivs.hide();
    $textDivs.eq($(this).index()).show();
    return false;
});

Demo: Fiddle

Upvotes: 1

Sergio
Sergio

Reputation: 28837

I think you could just show/hide your divs...

Like:

$("#buildServ").click(function () {
    $("#content > div").hide()
    $("#textDiv2").show();
});
$("#maintServ").click(function () {
    $("#content > div").hide()
    $("#textDiv3").show();
});

The problem with your code is that the hidden divs are inside the #content div and you are replacing that html. So when you do $("#content").html($("#textDiv3")); all other divs inside content disappear and you cannot get them back to other clicks.

Upvotes: 1

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35973

The problem is that you assign only the instance not the html of the div

try to change this:

       $("#buildServ").click(function(){
            $("#content").html($("#textDiv2"));
            $("#textDiv2").show();
            });
        $("#maintServ").click(function(){
            $("#content").html($("#textDiv3"));
            $("#textDiv3").show();
            });

to this:

   $("#buildServ").click(function(){
        $("#content").html($("#textDiv2").html());
        $("#textDiv2").show();
        });
    $("#maintServ").click(function(){
        $("#content").html($("#textDiv3").html());
        $("#textDiv3").show();
        });

The problem is that isn't correct this methd, I suggest you to copy the div #textDiv2 and #textDiv3 assign another id and after insert it into your div because in this way you can have multiple div with same id

Upvotes: 1

Navin Nair Kottayil
Navin Nair Kottayil

Reputation: 563

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
           $(document).ready(function(){
               $('#selectedTarget').load('includes/contentSnippet.html');
           });
        </script>   
    </head>
    <body>
        <div id="selectedTarget">
            Existing content.
        </div>
    </body>
</html>

JQuery: replace DIV contents with html from an external file. Full example?

Upvotes: 0

Related Questions