I keep getting "undefined" for my variable in jQuery and can not work out why?

Question

Hi,

I am just working on something small and need to get the data attribute value from a pre tag that is next to a div and then append that data attributes value to the div.

<div class="code-modal-header"></div>
<pre data-language="HTML"></pre>

I am using jQuery to add in the div like below: (still quite knew so there could be a few errors im not aware of)

// Open modal and fill with relevant code
$(document).ready(function(){

    if( $('pre[class*="language-"]') ){

                // This is the code that is not working correctly
        var preCodeLang = $('.code-modal-header').next().attr('data-language');
        console.log( preCodeLang );

                // This is appending the button (works)
        $('pre').before('<div class="code-modal-header"><button class="btn btn-sm btn-default code-modal-btn"><span class="glyphicon glyphicon-fullscreen"></span></button><span class="code-modal-language"></span></div>');

                // This clones the content of the pre and throws into an empty modal from the html (works)
        $('.code-modal-btn').click( function() {
            $('.code-modal .modal-content').append( $(this).parent().next().clone() );
            $('.code-modal').modal();
        });

                // This removes the content on the closing of the modal
        $('.code-modal').on('hidden.bs.modal', function (e) {
            $('.code-modal .modal-content pre').detach();
        });

    };

});

by all means check out the pen, but it is a little code messy as i have been messing on with this a couple hours now and not result.

you will see a language in the top right of the pre block, that is there through css. I want it to be added using jQuery to the header area if possible.

any help is appreciated i have googled my eyes out :)

Craig

Answer 1 · 2015-10-02T18:28:35Z

October 2, 2015 6:28pm

Hello Craig,

I took a look at your codepen and I think you misplaced the 'preCodeLang' variable. When you're looking for it, you still haven't generated any 'code-modal-header' div to the page.

 if( $('pre[class*="language-"]') ){

        // You're only appending the .code-modal-header after this...
        //var preCodeLang = $('.code-modal-header').next().attr('data-language');
        //console.log( preCodeLang );

        // This is appending the button (works)
        $('pre').before('<div class="code-modal-header"><button class="btn btn-sm btn-default code-modal-btn"><span class="glyphicon glyphicon-fullscreen"></span></button><span class="code-modal-language"></span></div>');

        // from now on it should exist :)
        var preCodeLang = $('.code-modal-header').next().attr('data-language');
        console.log( preCodeLang );

                // This clones the content of the pre and throws into an empty modal from the html (works)
        $('.code-modal-btn').click( function() {
            $('.code-modal .modal-content').append( $(this).parent().next().clone() );
            $('.code-modal').modal();
        });

                // This removes the content on the closing of the modal
        $('.code-modal').on('hidden.bs.modal', function (e) {
            $('.code-modal .modal-content pre').detach();
        });

    };

Have a nice weekend!

Cheers, Pedro

Welcome to the Treehouse Community

Looking to learn something new?

Craig Watson

Craig Watson

I keep getting "undefined" for my variable in jQuery and can not work out why?

1 Answer

Pedro Sousa

Pedro Sousa