Is there a limit to jquery-steps content?

Question

I am using jquery steps to show users a form, but I am running into a bit of a strange problem with the content property.

If I have both " " on one line of code, the steps work.

However, if I move the closing " to another line by adding another input field, the steps do not render.

$("#wizard").steps({
    headerTag: "h3",
    bodyTag: "fieldset",
    transitionEffect: "slideLeft",
    onStepChanging: function(event, currentIndex, newIndex) {

    //only apply to first step

    if (currentIndex === 0 && ($("#workType > option:selected").val()) === "1") {

        $("#wizard").steps("insert", 1, {
            title: "Construction Details",
            content: "<input type='text' name='budget' id='budget' placeholder='What is your budget?'><br/>"
        });
    }
});

So This works:

content: "<input type='text' name='budget' id='budget' placeholder='What is your budget?'><br/>"

This does not:

 content: "<input type='text' name='budget' id='budget' placeholder='What is your budget?'>
           <input type='text' name='timeline' id='timeline' placeholder='When do you want to start?'>
                            <br/>"

Does the content need to all be placed on one line or am I doing something wrong? TIA

Answer 1

you could try concatenating string using + like:

content: "<input type='text' name='budget' id='budget' placeholder='What is your budget?'>" + 
           "<input type='text' name='timeline' id='timeline' placeholder='When do you want to start?'> +
           "<br/>";

or another way:

var content_str = [
    '<input type='text' name='budget' id='budget' placeholder='What is your budget?'>',
    '<input type='text' name='timeline' id='timeline' placeholder='When do you want to start?'>',
    '<br />'
].join('');
...
contnet: content_str