Calling html content into a jQuery variable

Question

So, I'm using jQuery to build a common menu in various HTML documents (page1.html, page2.html, page3.html).

Here is my code so far:

HTML Snippet:

<body>
    <div class="menu">

    </div>
</body>

JavaScript File:

var menucontent;

menucontent = "<ul>"+
                "<li title="+"Page 1"+">"+"<a href="+"Page1.html"+">"+"Page 1"+"</a></li>"+
                "<li title="+"Page 2"+">"+"<a href="+"Page2.html"+">"+"Page 2"+"</a></li>"+
                "<li title="+"Page 3"+">"+"<a href="+"Page3.html"+">"+"Page 3"+"</a></li>"+
              "</ul>";

$( ".menu" ).html(

menucontent

);

This all works fine, but its a pain in the ... to keep adding the "+" bits.

What I want to know is - can I have a separate html file with the below code in, that can be called into the JavaScript menucontent variable?

For your examples call the below menu.html...

<ul>
    <li title="Page 1"><a href=Page1.html>Page 1</a></li>
    <li title="Page 2"><a href=Page2.html>Page 2</a></li>
    <li title="Page 3"><a href=Page3.html>Page 3</a></li>
</ul>

...or is there a better way to do this?

You could use [documentFragment](http://davidwalsh.name/documentfragment) — A. Wolff, Oct 27 '15 at 11:05
Check this link: Looks like same issue http://stackoverflow.com/questions/11241056/repeat-same-html-code-in-several-pages — immazharkhan, Oct 27 '15 at 11:06

P. Frank · Answer 1 · 2015-10-27T11:27:12.313

1

I was wrong, sorry use the sytax below

UPDATE

'<ul>'+
    '<li title="Page 1"><a href="Page1.html">Page 1</a></li>'+
    '<li title="Page 2"><a href="Page2.html">Page 2</a></li>'+
    '<li title="Page 3"><a href="Page3.html">Page 3</a></li>'+
'</ul>';

I confused with multiline string.

'<ul/
>'+
    '<li title="Page 1"><a href="Page1.html">Page 1</a></li>'+
    '<li title="Page 2"><a href="Page2.html">Page 2</a></li>'+
    '<li title="Page 3"><a href="Page3.html">Page 3</a></li>'+
'</ul>';

edited Oct 27 '15 at 11:27

answered Oct 27 '15 at 11:02

P. Frank

5,691
6
22
50

But I'd still need to put the "+" elsewhere in the code where I have "" i.e: ? – Mr T Oct 27 '15 at 11:04
1

see my update!! because javascript does accept + for multi line. the correct way is "/" – P. Frank Oct 27 '15 at 11:05
returns `NaN` when trying – Alex Oct 27 '15 at 11:11
I was wrong, sorry. I confused with multiline string. :) – P. Frank Oct 27 '15 at 11:28

score 1 · Answer 2 · answered Oct 27 '15 at 11:04

You dont have to use all those concentations. Also, you generate wrong markup. It will probably be properly rendered by the browser, but you generate this string:

<li title=Page 1>

Instead, use single quotes as string delimiters and type '<li title="Page 1">' + ... or escape double quotes: "<li title=\"Page 1\">" + ...

So the correct version would look like:

var menucontent = '<ul>'+
    '<li title="Page 1"><a href="Page1.html">Page 1</a></li>'+
    '<li title="Page 2"><a href="Page2.html">Page 2</a></li>'+
    '<li title="Page 3"><a href="Page3.html">Page 3</a></li>'+
  '</ul>';

$( '.menu' ).html(menucontent);

@P.Frank of course it does, just type the `var` statement into your console :) — Alex, Oct 27 '15 at 11:08

score 1 · Answer 3 · answered Oct 27 '15 at 11:50

If you can use server-side code, you can do an ajax call to get your menu.
Example with a .NET aspx WebForm:

<% @ Page Language="C#" %>
<% Response.ContentType = "text/HTML"; %>
<ul>
    <li title="Page 1"><a href=Page1.html>Page 1</a></li>
    <li title="Page 2"><a href=Page2.html>Page 2</a></li>
    <li title="Page 3"><a href=Page3.html>Page 3</a></li>
</ul>

jQuery:

$(document).ready(function () {
    getMenu();
});

function getMenu() {
    $.ajax({
        type: "GET",
        url: "menu.aspx",
        cache: false,
        crossDomain: false,
        dataType: "html",
        success: function (data) {
            $(".menu").html(data);
        },
        error: function (xhr, aOptions, rError) { // error action }
    });
}

score 0 · Answer 4 · answered Oct 27 '15 at 11:07

try like

menucontent = "<ul>"+
                "<li title='Page 1'><a href='Page1.html'>Page 1</a></li>"+
                "<li title='Page 2'><a href='Page2.html'>Page 2</a></li>"+
                "<li title='Page 3'><a href='Page3.html'>Page 3</a></li>"+
              "</ul>";

Sean · Accepted Answer · 2015-10-27T11:41:22.767

I would like to use handlebar to separate the html markup to a html snippet

<script id="template" type="text/x-handlebars-template">
  <ul>
    <li title="Page 1"><a href="Page1.html">Page 1</a></li>
    <li title="Page 2"><a href="Page2.html">Page 2</a></li>
    <li title="Page 3"><a href="Page3.html">Page 3</a></li>
  </ul>
</script>
var source = $("#template").html();
var template = Handlebars.compile(source);
$( ".menu" ).html(template);

and you know what, now you have the ablity to dynamicly generate the template

<script id="template" type="text/x-handlebars-template">
      <ul>
        {{#each page}}
           <li title="{{title}}"><a href="{{url}}">{{title}}</a></li>
        {{/each}}
      </ul>
</script>
var source = $("#template").html();
var data = [{title: 'page 1', url: 'Page1.html'}, {title: 'page 2', url: 'Page2.html'}];
var template = Handlebars.compile(source, data);
$( ".menu" ).html(template);

awesome!

Calling html content into a jQuery variable

5 Answers5