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?

Check this link: Looks like same issue stackoverflow.com/questions/11241056/… — immazharkhan
– immazharkhan, Commented Oct 27, 2015 at 11:06

Alex · Accepted Answer · 2015-10-27 11:04:37Z

1

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);

answered Oct 27, 2015 at 11:04

Alex

10.3k6 gold badges36 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Over a year ago

@P.Frank of course it does, just type the var statement into your console :)

P. Frank · Accepted Answer · 2015-10-27 11:27:12Z

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, 2015 at 11:27

answered Oct 27, 2015 at 11:02

P. Frank

5,7456 gold badges26 silver badges52 bronze badges

4 Comments

Mr T Over a year ago

But I'd still need to put the "+" elsewhere in the code where I have "" i.e: <a href="link.html"> ?

P. Frank Over a year ago

see my update!! because javascript does accept + for multi line. the correct way is "/"

Alex Over a year ago

returns NaN when trying

P. Frank Over a year ago

I was wrong, sorry. I confused with multiline string. :)

krlzlx · Accepted Answer · 2015-10-27 11:50:09Z

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 }
    });
}

Vishnu Katpure · Accepted Answer · 2015-10-27 11:07:24Z

0

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>";

answered Oct 27, 2015 at 11:07

Vishnu Katpure

3953 silver badges17 bronze badges

Comments

Sean · Accepted Answer · 2015-10-27 11:41:22Z

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!

Collectives™ on Stack Overflow

Calling html content into a jQuery variable

5 Answers 5

1 Comment

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related