CODEWITHSUNDEEP
javascriptjqueryhtml
fraser_
fraser_

Reputation: 79

Appending an ID onto a div using jquery

I'm trying to build a page which has a menu within one div and a content panel in another, into which content is loaded depending on which menu button is clicked.

Here's my html

<div>
    <button id="buttonOne" type="button">Content 1</button>
    <button id="buttonTwo" type="button">Content 2</button>
    <button id="buttonThree" type="button">Content 3</button>
</div>

<div class="contentPane">
    <div class="colContent"></div>
</div>

and the js

$('#buttonOne').on('click', function(){
        $('#colContent').attr('id', 'sampleContent1');
    });

$('#buttonTwo').on('click', function(){
        $('#colContent').attr('id', 'sampleContent2');
    });

$('#buttonThree').on('click', function(){
        $('#colContent').attr('id', 'sampleContent3');
    });


$('#sampleContent1').html('<h1>Content One</h1><iframe width="560" height="315" src="https://www.youtube.com/embed/gpybxbeZfn4" frameborder="0" allowfullscreen></iframe><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, numquam dolor, id laborum reiciendis repellat tempora iusto velit odit harum obcaecati hic officia consequatur perspiciatis exercitationem tenetur placeat, beatae aut</p>');
$('#sampleContent2').html('<h1>Content Two</h1><iframe width="560" height="315" src="https://www.youtube.com/embed/tO7LIRhGbfo" frameborder="0" allowfullscreen></iframe><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, numquam dolor, id laborum reiciendis repellat tempora iusto velit odit harum obcaecati hic officia consequatur perspiciatis exercitationem tenetur placeat, beatae aut</p>');
$('#sampleContent3').html('<h1>Content Three</h1><iframe width="560" height="315" src="https://www.youtube.com/embed/PK8dsAeMmPk" frameborder="0" allowfullscreen></iframe><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, numquam dolor, id laborum reiciendis repellat tempora iusto velit odit harum obcaecati hic officia consequatur perspiciatis exercitationem tenetur placeat, beatae aut</p>');

jsFiddle

Based on multiple questions I've found answered here, this should work, but it isn't. I've also tried using:

$('#colContent').prop('id', 'sampleContent1');

and

$('#colContent').writeAttribute('id', 'sampleContent1');

but neither of those did the trick either.

Note: I originally tried doing this using jquery tabs, but it seems like all the tabs load in the background on pageload, and the volume of content sitting in the background caused the page to grind to a halt on mobile devices, so I went back to the drawing board and am now trying to load content in only when the relevant button is clicked. Where am I going wrong?

Upvotes: 0

Views: 73

Answers (3)

Bruce Xu
Bruce Xu

Reputation: 353

If I were you, I'll write the follow code to achieve this goal: [jsFiddle](https://jsfiddle.net/yujiangshui/kukks37s/17/)

But this is not the best practice, I make a simple version for you to understand.

When you learn more about jQuery and JavaScript you will figure out this problem.

Upvotes: 0

Soumya
Soumya

Reputation: 310

$('#buttonOne').on('click', function(){
        window.alert("One");
        $('.colContent').attr('id', 'sampleContent1');
    changeContent();
    });

$('#buttonTwo').on('click', function(){
        window.alert("Two");
        $('.colContent').attr('id', 'sampleContent2');
    changeContent();
    });

$('#buttonThree').on('click', function(){
        window.alert("Three");
        $('.colContent').attr('id', 'sampleContent3');
    changeContent();
    });


function changeContent() {
    $('#sampleContent1').html('<h1>Content One</h1><iframe width="560" height="315" src="https://www.youtube.com/embed/gpybxbeZfn4" frameborder="0" allowfullscreen></iframe><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, numquam dolor, id laborum reiciendis repellat tempora iusto velit odit harum obcaecati hic officia consequatur perspiciatis exercitationem tenetur placeat, beatae aut</p>');
$('#sampleContent2').html('<h1>Content Two</h1><iframe width="560" height="315" src="https://www.youtube.com/embed/tO7LIRhGbfo" frameborder="0" allowfullscreen></iframe><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, numquam dolor, id laborum reiciendis repellat tempora iusto velit odit harum obcaecati hic officia consequatur perspiciatis exercitationem tenetur placeat, beatae aut</p>');
$('#sampleContent3').html('<h1>Content Three</h1><iframe width="560" height="315" src="https://www.youtube.com/embed/PK8dsAeMmPk" frame`enter code here`border="0" allowfullscreen></iframe><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, numquam dolor, id laborum reiciendis repellat tempora iusto velit odit harum obcaecati hic officia consequatur perspiciatis exercitationem tenetur placeat, beatae aut</p>');

}

Upvotes: 0

user3886234
user3886234

Reputation:

Replace $('#colContent') with $('.colContent'). You're trying to set the ID of an element with the ID of colContent. Your HTML element has a class of colContent, not an id.

Upvotes: 1

Related Questions