CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Nicolás Videla
Nicolás Videla

Reputation: 44

Appending rows Jquery/Bootstrap

My mkRow() function isn't working at all, and I'd like to know why. I've tried making the button append a simple <h1>Hello</h1> and it works just fine, but when I try this it just fails

My HTML:

<html>
<head>
    <title>Testing</title>
</head>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="stylo.css">
    <script type="text/javascript" src="functions.js"></script>
<body>
    <div class="container" id="main">
        <div class="row">
            <div class="col-sm-12" id="Header">
                <h1>Todo List</h1>
            </div>
        </div>

        <div class="row" id="row1">
            <div class="col-sm-2"></div>

            <div class="col-sm-2 not-done item">
                <div class="boton btnleft"><</div>
                <p>what</p>
                <div class="boton btnright">></div>
            </div>

            <div class="col-sm-1"></div>

            <div class="col-sm-2 in-progress item">
                <div class="boton btnleft"><</div>
                <p>what</p>
                <div class="boton btnright">></div>
            </div>

            <div class="col-sm-1"></div>

            <div class="col-sm-2 done item">
                <div class="boton btnleft"><</div>
                <p>what</p>
                <div class="boton btnright">></div> 
            </div>

            <div class="col-sm-2"></div>
        </div>
    </div>

</body>
</html>

My .js File:

$(document).ready(init);
var rows = 0;

function init(){
    $(".btnright").on('click', mkRow);
    $(".btnleft").on('click', moveLeft);
}

function mkItem(content){
    var protoItem = '<div class="col-sm-2 item"><div class="boton btnleft"><</div><p>' + contenido + '</p><div class="boton btnright">></div></div>';
    return protoItem;
}

function getRows(){
    rows++;
    return rows;
}

function mkRow(){

    $("#main").append('
        <div class="row" id="row' + getRows + '">
            <div class="col-sm-2"></div>
            <div class="col-sm-2 not-done item">
                <div class="boton btnleft"><</div>
                <div class="boton btnright">></div>
            </div>

            <div class="col-sm-1"></div>

            <div class="col-sm-2 in-progress item">
                <div class="boton btnleft"><</div>
                <div class="boton btnright">></div>
            </div>

            <div class="col-sm-1"></div>

            <div class="col-sm-2 done item">
                <div class="boton btnleft"><</div>
                <div class="boton btnright">></div> 
            </div>

            <div class="col-sm-2"></div>
        </div>');

}

function moveRight(){
    //
}

 function moveLeft(){
    //
}

Upvotes: 0

Views: 44

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

when using .append() or .html() you can make it in one line or for more lines you need to use + sign

.append('<div>'+
           '<span>'+
           '</span>'+
        '</div>';
        );

Upvotes: 2

Related Questions