How to add a menu from a jQuery script file in HTML

Question

I need to put in a menu from a script file so that I can only need to make changes in one place to reflect across the project.

$(document).ready(function() 
{
    var str = "<h3>Menu</h3><ul class='nav vertical-nav'>";
    str.append("<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=1' ></i>Chair</a></li>");
    str.append("<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=3' ></i>Secretary</a></li>");
    str.append("<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=2' ></i>Treasurer</a></li>");
    str.append("<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=4' ></i>Admin</a></li>");
    str.append("</ul>");

    $('#insert-menu').html(str);

});

Now the above example is purely appending strings, which does not work. I am new to jquery, so I am learning about the DOM to achieve this.

Now I can find documentation on inserting html files, but not really a lot on how to add code directly.

When I do the <h3> tag by itself it works, but when I start adding attributes (I think) that is where the problem lies.

Am I on the right track here?

the thing is you cannot get php to dynamically run it is interpreted on runtime — loveNoHate
– loveNoHate, Commented Oct 7, 2014 at 19:23
But the file in which I am importing this script passes down the variable from the php - so should that not cover it? — jwknz
– jwknz, Commented Oct 7, 2014 at 19:24
no, never used, but php is done with the page rendering it and you pass it dynamically :/ — loveNoHate
– loveNoHate, Commented Oct 7, 2014 at 19:30
Cool thanks - I will look into it when I improve the code :-) — jwknz
– jwknz, Commented Oct 7, 2014 at 19:37

Mooseman · Accepted Answer · 2014-10-07 19:25:32Z

2

To use .append, you need a jQuery object.

var str = "<h3>Menu</h3><ul class='nav vertical-nav'>"; is a string.

Use var str = $("<h3>Menu</h3><ul class='nav vertical-nav'>"); instead.

answered Oct 7, 2014 at 19:25

Mooseman

18.9k14 gold badges74 silver badges95 bronze badges

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

1 Comment

Mooseman Over a year ago

On a side note, you can also use str.appendTo('#insert-menu');.

JBar · Accepted Answer · 2014-10-07 19:38:29Z

2

Another way to do this with DOM elements

var menu = $("<ul>");
var item1 = $("<li>").append($("<a>").prop("href","?p=1")).text("Item 1"); 
var item2 = $("<li>").append($("<a>").prop("href","?p=2")).text("Item 2"); //..so on
//..so on
menu.append(item1).append(item2);
$('#insert-menu').append(menu);
//..so on

lets you avoid HTML errors for one.

answered Oct 7, 2014 at 19:38

JBar

3732 silver badges6 bronze badges

Comments

Harutyun Abgaryan · Accepted Answer · 2014-10-07 19:28:19Z

Use this

$(document).ready(function() 
{
    var str = "<h3>Menu</h3><ul class='nav vertical-nav'>";
    str+="<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=1' ></i>Chair</a></li>";
    str+="<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=3' ></i>Secretary</a></li>";
    str+="<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=2' ></i>Treasurer</a></li>";
    str+="<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=4' ></i>Admin</a></li>";
    str+="</ul>";

    $('#insert-menu').html(str);

});

or

$(document).ready(function() 
{
    var str = $("<h3>Menu</h3><ul class='nav vertical-nav'>");
    str.append("<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=1' ></i>Chair</a></li>");
     str.append("<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=3' ></i>Secretary</a></li>");
     str.append("<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=2' ></i>Treasurer</a></li>");
     str.append("<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=4' ></i>Admin</a></li>");
     str.append("</ul>");

    $('#insert-menu').html(str);

});

Collectives™ on Stack Overflow

How to add a menu from a jQuery script file in HTML

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related