CODEWITHSUNDEEP
jqueryajax
hyphen
hyphen

Reputation: 967

using appendTo to add many DIVs to HTML. Getting "unexpected token <" error

I am trying to display a div for each result in my database, and the HTML structure is set up in such a way that in order for each unique record to display correctly, I need to append a lot of HTML code to a DIV by using appendTo in the AJAX response. Two questions:

1) Does it make sense to have all this HTML code in my AJAX response? It seems like there must be a better way to do this, and I just don't know what it is. Can anyone point me in a better direction?

2) I'm also getting an "unexpected token <" error on my second line of HTML code (noted below).

function getGoals() {
var account = <?php echo $account; ?>;
var request = $.ajax({
    type: "POST",
    url: 'inc/functions.php',
    dataType: "JSON",
    data: {action: "get_goals", account:account}
});
request.done(function(response){
    $('.goals').remove(); 
    if(response.goals.length != 0) {

        for(var i = 0; i < response.goals.length; i++) {
            $('<div class="col-sm-6" class="goals">
                <div class="block">  //  <--this is the line of problem code according to dev tools.
                    <div class="block-title">
                        <h2>' + response.goals[i].goal_name + '</h2>
                        <h2 class="pull-right">Created: ' + response.goals[i].date_created + '</h2>
                    </div> 
                    <div class="row gutter30">
                        <div class="col-sm-4">
                            <h4 class="subHeader">Goal Amount</h4>
                            <h3 class="positiveNum">&#36;' + response.goals[i].goal_amount + '</h3>
                        </div>
                        <div class="col-sm-4">
                            <h4 class="subHeader">This is a header</h4>
                            <h3 class="positiveNum">&#36;' + response.goals[i].monthly_amount + '</h3>
                        </div>
                        <div class="col-sm-4">
                            <h4 class="subHeader">Target Date</h4>
                            <h3 class="positiveNum">' + response.goals[i].goal_date + '</h3>
                        </div>
                </div>
                <div class="row gutter30">
                    <div class="col-sm-12">
                        <div class="progress progress-striped">
                            <div class="progress-bar progress-bar-success" 
role="progressbar" aria-valuenow="' + response.goals[i].percent + '"" aria-valuemin="0"
 aria-valuemax="100" style="width: 'response.goals[i].percent + '%;">' + 
response.goals[i].percent + '&#37;</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>').hide().appendTo("#goal-contain").fadeIn(900);
        }
    }
});
request.fail(function(jqxhr, textStatus){
    alert("Request failed: " + textStatus);
});

};

Upvotes: 1

Views: 87

Answers (1)

Ranjit Singh
Ranjit Singh

Reputation: 3735

The JavaScript language performs automatic semicolon insertion at the end lines, so creating multiline strings usually ends up looking something like this:

var multiStr = "This is the first line" + 
    "This is the second line" + 
    "This is more...";

String upon string of concatenated JavaScript mess...ugly, slow, and ...ugly. Many novice JavaScript developers don't know that there's a better way to create multiline strings:

var multiStr = "This is the first line \
    This is the second line \
    This is more...";

Adding a backslash at the end of each line tells the JavaScript engine that the string will continue to the next line, thus avoiding the automatic semicolon insertion annoyance.

Upvotes: 2

Related Questions