jQuery loading content from another div

Question

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.

adeneo · Accepted Answer · 2013-05-30 23:10:44Z

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

Thank you, I knew there was a better way to do it than using load.

Filippos Karapetis · Accepted Answer · 2013-05-30 23:11:07Z

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());

colestrode · Accepted Answer · 2013-05-30 23:15:44Z

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

Collectives™ on Stack Overflow

jQuery loading content from another div

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related