CODEWITHSUNDEEP
javascriptjqueryhtml
ErHunt
ErHunt

Reputation: 311

Adding HTML using JQuery

The jquery below leaves the time from datetime out of the brackets but not the date.

below is the jquery: 

 $('.counter_area').html('<div class="open-ViewCustomer well well-sm"' +
                'data-toggle="modal" data-id=' + v.id +
                ' data-first=' + v.first_name +
                ' data-last='  + v.last_name +
                ' data-time='  + v.joined_at +
                ' data-note='  + v.note +
                ' data-download=' + v.attach +
                ' href="#viewCustomer" data-placement="bottom" title="View Customer Details And Options">' + v.first_name +
                ' ' + v.last_name +
                '</div>'
            );

this is what it produces: 

<div class="open-ViewCustomer well well-sm" data-toggle="modal" data-id="2" data-first="joe" 
data-last="doe" data-time="2014-03-26" 18:22:50="" data-note="null" data-download="null" 
href="#viewCustomer" data-placement="bottom" title="View Customer Details And Options">joe   doe</div>

as you can see data-time="2014-03-26" 18:22:50="" should be data-time="2014-03-26 18:22:50"

I'm quite new to front end development, any help to solving this is appreciated.

Upvotes: 1

Views: 92

Answers (3)

Chris
Chris

Reputation: 3338

Right now you are stitching a string of HTML together via jQuery, then appending it to your website. This will generally give you the results that you want, but there is a better way to do this:

// select the counter_area div, and append() a new jQuery object
$('.counter_area').append(
    // create a new div and make it as a jQuery object
    $('<div class="open-ViewCustomer well well-sm"></div>') 
        // Set each attribute via the jQuery attr() method 
        .attr("data-toggle", "modal")
        .attr("data-id", v.id)
        .attr("data-first", v.first_name)
        .attr("data-last", v.last_name)
        .attr("data-time", v.joined_at)
        .attr("data-note", v.note)
        .attr("data-download", v.attach)
        .attr("href", "#viewCustomer")
        .attr("data-placement", "modal")
        .attr("title", "View Customer Details And Options")
        // set the text of your new div
        .text(v.first_name + " " + v.last_name)
    );

Why do it this way?

If someone says that their first name is "onload="window.location='http://example.com', then anyone who visits this page will be redirected from the site. This is a security risk known as XSS: people will use it to hack your website.

If you use the code that I have provided, then jQuery will clean up the names for you: the control characters (specifically the quote (")) will be written in such a way that it is made safe.

jQuery will also automatically handle spaces, quotes, and any other weird characters that might appear in the date or name, so you'll have one less thing to worry about.

Upvotes: 2

Brice Argenson
Brice Argenson

Reputation: 832

Try to add quotes around your values (after the equals and after the concatenated value). Without them, a space in your values will be interpreted as the end of your value and the begin of a new attribute.

Upvotes: 0

row1
row1

Reputation: 5578

There is a space in your joined date string, so you will need the quotes around the attribute:

' data-time="'  + v.joined_at + '"'+

Upvotes: 6

Related Questions