CODEWITHSUNDEEP
javascriptjqueryhtmltagsappend
nielsv
nielsv

Reputation: 6820

How to fix automatically closing div tag in this case

I have a question about appending data to a div in my html through jquery.

This is what I have in my html file:

<div class="container">
        <div class="row">
            <div class="span12">
                <div class="row">
                    <div id="errors" class="text-error"></div>
                </div>
            </div>
        </div>
</div>

This is my javascript file: 

function checkCompletion(data){

    // IMPORTANT VALUES
    var app_important = ["submit_description", "app_icon", "address", "email"];
    var event_important = ["name", "datefrom", "dateto", "description", "email"];

    $("#errors").append("<div class='span6'><div class='well'>");

    // LOOPS + HEADERS
    $("#errors").append("<h3>App</h3>");
    doLoop(data.app, app_important);

    $("#errors").append("<h3>Events</h3>");
    doLoop(data.events, event_important);
}

// ar           => app data array
// ar_important => important props app (array)
function doLoop(ar, ar_important) {
    $.each(ar, function(value) {
        $.each(ar_important, function(i) {
            if(ar[value][ar_important[i]] == '') $("#errors").append("<p>" + ar_important[i]+" is missing</p>");
            //else $("#errors").append("<p> :) "+ar_important[i]+"</p>");
        });
    });
    $("#errors").append("</div></div>");
}

The data parameter is a JSON object with lots of data.
As you can see I do $("#errors").append("<div class='span6'><div class='well'>");

But the div tag automatically closes so my errors aren't in it.
Does anyone know how I can fix this and still work with append?

Niels

Upvotes: 3

Views: 1928

Answers (1)

user1106925
user1106925

Reputation:

You don't need to build strings like this. You're already building DOM nodes in most of your code.

All you need to do is append directly to those nodes. Just fix the creation of the <div> elements, and then append to the inner most, which I think is what you're after.

function checkCompletion(data){

    var app_important = ["submit_description", "app_icon", "address", "email"];
    var event_important = ["name", "datefrom", "dateto", "description", "email"];

// make the outer `span6`
    var span6 = $("<div class='span6'></div>")

// make the inner `well`, and append it to the span6
    var well = $("<div class='well'></div>").appendTo(span6);

// do all your appends to the `well` element, 
//    passing it to `doLoop` so it can do the same
    well.append("<h3>App</h3>");
    doLoop(data.app, app_important, well);

    well.append("<h3>Events</h3>");
    doLoop(data.events, event_important, well);
}

function doLoop(ar, ar_important, well) {
    $.each(ar, function(value) {
        $.each(ar_important, function(i) {
           if(ar[value][ar_important[i]] == ''){
               well.append("<p>" + ar_important[i]+" is missing</p>");
           }
           //else{ errorAppend += "<p> :) "+ar_important[i]+"</p>";
        });
    });

  // append the outer `span6` to `#errors`
    $("#errors").append(span6);
}

There are even cleaner ways to create the elements. Here's the same code, with a better approach.

function checkCompletion(data){

    var app_important = ["submit_description", "app_icon", "address", "email"];
    var event_important = ["name", "datefrom", "dateto", "description", "email"];

// make the outer `span6`
    var span6 = $("<div/>", {"class":"span6"})

// make the inner `well`, and append it to the span6
    var well = $("<div/>", {"class":"well"}).appendTo(span6);

// do all your appends to the `well` element, 
//    passing it to `doLoop` so it can do the same
    $("<h3/>", {text: "App"}).appendTo(well);
    doLoop(data.app, app_important, well);

    $("<h3/>", {text: "Events"}).appendTo(well);
    doLoop(data.events, event_important, well);
}

function doLoop(ar, ar_important, well) {
    $.each(ar, function(value) {
        $.each(ar_important, function(i) {
           if(ar[value][ar_important[i]] == ''){
               $("<p/>", {text: ar_important[i]+" is missing"}).appendTo(well);
           }
           //else{ errorAppend += "<p> :) "+ar_important[i]+"</p>";
        });
    });

  // append the outer `span6` to `#errors`
    $("#errors").append(span6);
}

Upvotes: 1

Related Questions