CODEWITHSUNDEEP
jquery
user1869566
user1869566

Reputation: 110

jQuery loading content from another div

So i have several divs that are hidden and when a user clicks an image it will load the content from that div. I have a working method but believe it's not the correct method.

The HTML

<div class="slide">
    <img src="images/image1.jpg" alt="" id="project-1" /> 
    <img src="images/image2.jpg" alt="" id="project-2" /> 
    <img src="images/image3.jpg" alt="" id="project-3" />  
</div>
<div id="project-1" class="hidden">
    <p>Project </p>
</div>
<div id="project-2" class="hidden">
    <p>Project 2</p>
</div>
<div id="project-3" class="hidden">
    <p>Project 3</p>
</div>
<div id="main">

</div>

Current jQuery:

$(document).ready(function()
{
    $('.slide img').click(function ()
    {
        var project = $(this).attr('id');   
        $('#main').fadeOut('slow', function() {
            $("#main").load(window.location.pathname+" #"+project+" > *").fadeIn('slow');
        });
    });
});

As you can see it's using load() to load data from the same page, is there a better function to use than load for this, i want to take all the data from one div and put it into the #main div. The project var stores the name of the div i want to get the data from.

Upvotes: 0

Views: 592

Answers (3)

colestrode
colestrode

Reputation: 10668

You can't have multiple elements with the same ID, so you'll need to change your markup. After clicking on an image, you can clone the corresponding div, then insert that cloned element into the main div:

HTML

<div class="slide">
    <img src="images/image1.jpg" alt="" data-div-id="project-1" /> 
    <img src="images/image2.jpg" alt="" data-div-id="project-2" /> 
    <img src="images/image3.jpg" alt="" data-div-id="project-3" />  
</div>

jQuery

$(document).ready(function() {
    $('.slide img').click(function () {
        var project = $('#' + $(this).data('div-id')).clone();   
        $('#main').fadeOut('slow', function() {
            $("#main").empty().append(project).fadeIn('slow');
        });
    });
});

Upvotes: 0

Filippos Karapetis
Filippos Karapetis

Reputation: 5204

You could use jQuery's html() function:

http://api.jquery.com/html/

i.e.

$(document).ready(function()
{
    $('.slide img').click(function ()
    {
        var project = $(this).attr('id');
        $("#main").html($("#" + project).html());
    });
});

Edit: You don't need to target by ID, so this bit:

        var project = $(this).attr('id');
        $("#main").html($("#" + project).html());

can be simplified to:

        $("#main").html($(this).html());

Upvotes: 1

adeneo
adeneo

Reputation: 318352

You can not use the same ID twice, ID's are unique, so you'll need to change something:

<div class="slide">
    <img src="images/image1.jpg" alt="" data-id="project-1" /> 
    <img src="images/image2.jpg" alt="" data-id="project-2" /> 
    <img src="images/image3.jpg" alt="" data-id="project-3" />  
</div>
<div id="project-1" class="hidden">
    <p>Project </p>
</div>
<div id="project-2" class="hidden">
    <p>Project 2</p>
</div>
<div id="project-3" class="hidden">
    <p>Project 3</p>
</div>
<div id="main">

</div>

Then you can do :

$(document).ready(function() {
    $('.slide img').on('click', function() {
        var project = $('#' + $(this).data('id')).html();
        $('#main').fadeOut('slow', function() {
            $(this).html(project).fadeIn('slow');
        });
    });
});

FIDDLE

Upvotes: 1

Related Questions