jQuery code, multiple line syntax, what's wrong?

Question

Hi i'm newbies in jQuery and I wanna better way for organize my code.

Code:

$(".color-list.one li:nth-child(2)").on('click', function() {
    $.getJSON("json/a2.json", function(data) {
        //Handle my response
        $('ul.elements-list').html('<li class="elements-item"><span class="tog">' + data.name + '</span><div class="togcont hidden"><p>' + data.info + '</p><p>' + data.size + '</p></div></li>');

        $('ul.elements-list').append('<li class="elements-item"><span class="tog">' + data.name + '</span><div class="togcont hidden"><p>' + data.info + '</p><p>' + data.size + '</p></div></li>');

    });
});

Code after my better organize:

    $(".color-list.one li:nth-child(2)").on('click', function() {
        $.getJSON("json/a2.json", function(data) {
            //Handle my response
            $('ul.elements-list').html('
                <li class="elements-item"><span class="tog">' + data.name + '</span> +
                <div class="togcont hidden"><p>' + data.info + '</p> +
                <p>' + data.size + '</p></div></li>');

            $('ul.elements-list').append('
<li class="elements-item"><span class="tog">' + data.name + '</span>
<div class="togcont hidden"><p>' + data.info + '</p>
<p>' + data.size + '</p></div></li>');

        });
    });

Could you explain me what is no work please!

Can you paste your `data` as well.. What does `browser console` show? — Roy M J, Jan 20 '14 at 07:27
How you format code, is a matter of taste and a personal choice. Format the code as you feel best and/or you could try reading the conversions for the programming language you're writing in. — vallentin, Jan 20 '14 at 07:28
possible duplicate of [Creating multiline strings in JavaScript](http://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript) — Felix Kling, Jan 20 '14 at 07:45

score 1 · Answer 1 · answered Jan 20 '14 at 07:28

You just forgot to finish up some single quotes

Just Try,

  $(".color-list.one li:nth-child(2)").on('click', function() {
        $.getJSON("json/a2.json", function(data) {
            //Handle my response
            $('ul.elements-list').html('
                <li class="elements-item"><span class="tog">' + data.name + '</span>' +
                '<div class="togcont hidden"><p>' + data.info + '</p>' +
                '<p>' + data.size + '</p></div></li>');

            $('ul.elements-list').append('
<li class="elements-item"><span class="tog">' + data.name + '</span>' +
'<div class="togcont hidden"><p>' + data.info + '</p>' +
'<p>' + data.size + '</p></div></li>');

        });
    });

@downvoter: please provide the reason for your downvote. so that i can correct my mistakes. — Rajaprabhu Aravindasamy, Jan 20 '14 at 07:31

Rayan Bouajram · Accepted Answer · 2014-01-20T07:37:18.690

Multi-line strings must be appended with a \ at the end.

    $(".color-list.one li:nth-child(2)").on('click', function() {
        $.getJSON("json/a2.json", function(data) {
            //Handle my response
            $('ul.elements-list').html('\
                <li class="elements-item"><span class="tog">' + data.name + '</span> +\
                <div class="togcont hidden"><p>' + data.info + '</p> +\
                <p>' + data.size + '</p></div></li>');

            $('ul.elements-list').append('\
<li class="elements-item"><span class="tog">' + data.name + '</span>\
<div class="togcont hidden"><p>' + data.info + '</p>\
<p>' + data.size + '</p></div></li>');

        });
    });

However if you want a more sufficient way to write your strings, here's something I generally do:

    $(".color-list.one li:nth-child(2)").on('click', function() {
        $.getJSON("json/a2.json", function(data) {

            var r = '<li class="elements-item">';
                    r += '<span class="tog">' + data.name + '</span>';
                    r += '<li class="elements-item">';
                        r += '<span class="tog">' + data.name + '</span>';
                        r += '<div class="togcont hidden">';
                            r += '<p>' + data.info + '</p>';
                            r += '<p>' + data.size + '</p>';
                        r += '</div>';
                    r += '</li>';
            //Handle my response
            $('ul.elements-list').html(r);

            var v = '<li class="elements-item">';
                    v += '<span class="tog">' + data.name + '</span>';
                    v += '<div class="togcont hidden">';
                        v += '<p>' + data.info + '</p>';
                        v += '<p>' + data.size + '</p>';
                    v += '</div>';
                v += '</li>';

            $('ul.elements-list').append(v);
        });
    });

It's cleaner and easier to maintain, IMO. Good luck!

Amazing, Just did what i wanted to do! Without asking you more than answered my question, thanks a lot — GilbertOOl, Jan 20 '14 at 07:40

score 0 · Answer 3 · answered Jan 20 '14 at 07:29

Why you have plus sign in html? MAybe that is the problem.

 $('ul.elements-list').html('
            <li class="elements-item"><span class="tog">' + data.name + '</span> **+**
            <div class="togcont hidden"><p>' + data.info + '</p> **+**
            <p>' + data.size + '</p></div></li>');

score 0 · Answer 4 · answered Jan 20 '14 at 07:29

0

Javascript doesn't support New Lines "\n" in string.

So use use like this:

var html = '\
<li class="elements-item">\
<span class="tog">\
</span>\
</li>';

answered Jan 20 '14 at 07:29

Waqar Alamgir

9,828
4
30
36

jQuery code, multiple line syntax, what's wrong?

4 Answers4