Search code examples
javascriptwindows-phonevisual-studio-debugging

Javascript line/carriage returns not working

I'm having a problem that seems extremely easy/embarrassing on the surface but I'm at a loss at the moment.

There's a lot of backstory involved with the functions, but I'll try to keep it as concise as possible. I'm trying to insert a carriage/line return for formatting reason, but they're not working and I'm obviously overlooking something in my frustration.

Using some user inputted information to help create an app, I have this function:

    function insertStaticData(group, title, subtitle, description, content, backgroundImage) {

    var newItem = { group: group, title: title, subtitle: subtitle, description: description, content: content, backgroundImage: backgroundImage };

    list.push(newItem);
}

whereby the user inputs different information. Easy enough. Initially, the formatting is extremely ugly in the content portion since the user can type in paragraphs. Since I'm just testing at the moment, I reformatted their text like so:

insertStaticData(dataGroups[0], "Administration", "", "",
        "Person's Name \n"
        + "Principal \n"
        + "[email protected] \n\n"
        + "Another Name \n"
        + "Secretary\n"
        + "[email protected]", "http://www.imageurls/cf/images/map/map_right.gif");

As shown, the user didn't input a subtitle or description. Which is fine. But when I debug this as a Windows 8 app via Visual Studio, the line returns aren't recognized. I'm sure I'm being really stupid, but what gives? Hopefully this isn't too confusing.

Solution

  • As bfavaretto already commented, you need to use <br /> if this is for html.

    Better yet, wrap each line in a <p> tag so you can apply CSS-rule(s) if you want to modify appearance without having to change the code:

    insertStaticData(dataGroups[0], "Administration", "", "",
    "<p>Person's Name</p>" +
    "<p>Principal</p>" + //etc.

    You can make a wrap element to separate the rules like this:

    insertStaticData(dataGroups[0], "Administration", "", "",
    "<div class='myClass'>" +
    "<p>Person's Name</p>" +
    //etc...
    + "</div>"

    Then in CSS:

    .myClass { /* wrapper */ }
.myClass > p { /* per line */ }