Search jQuery

jQuery Forum

Using jQuery UI

vidjuheff..

Can't Append List Items

in Using jQuery UI • 6 months ago

This is my html (the testing list item is just there to make sure I can even have one with an icon, this one works)

<div id="projDirList">
<ul id="menu">
<li><a href="#test"><span class = "ui-icon ui-icon-folder-collapsed"></span>testing</a></li>
</ul>
</div>
<button onclick="browseProjDir()">Browse</button>

My javascript (stored in a file called script.js alongside my index.html)

3. function browseProjDir() {
$("#projDirList ul").append("<li><a href='#'>" + "testing2" + "</a></li>");
}

When I press my button, a small up error gets added to the upper left corner of the list and no items get added to the list itself. If I make two <script> tags and place the above code in the html it works. Unfortunately I need it to work with this external .js file. Any thoughts?

Replies(4)

popnoodles

Re: Can't Append List Items

6 months ago

First off

<button id="browseProjDir">Browse</button>

$('#browseProjDir').on('click', function(){browseProjDir();});

A small error gets added. What error? "If I make two <script> tags and place the above code in the html it works." You're reporting things that you're not showing us. Please show the html in question.

"Unfortunately I need it to work with this external .js file" There is nothing unfortunate about that, it doesn't matter.

vidjuheff..

Re: Can't Append List Items

6 months ago

Sorry, a small ARROW, my bad, its like a "^" symbol gets placed into the top left corner of the list.

here is the external js file:

var ActiveXObject;
var ws = new ActiveXObject('WScript.Shell');
var objShell = new ActiveXObject("Shell.Application");
var objFolder;
function browseProjDir() {
$(function(){
$("#projDirList ul").append("<li><a href='#'>" + "testing2" + "</a></li>");
});

note: all the shell stuff has been removed from the function to create a simple testing function, one that adds testing2 to the list.

the html is:

<!DOCTYPE html>
<html>
<head>
<title>Ae Control Panel</title>
    <HTA:APPLICATION ID="oHTA" APPLICATIONNAME="AE Control" WINDOWSTATE="maximize">

    <script src="js/jquery-1.8.2.js"></script>
    <script src="js/jquery-ui-1.9.1.custom.js"></script>
    <script src="js/script.js"></script>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.9.1.custom.css" />
<script src="js/script.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script>
  $(function() {
         $( "#menu" ).menu();
     });
</script>
<style>
     .ui-menu { width: 250px; height: 400px;}
</style>
</head>
<body>
<div id="projDirList">
<ul id="menu">
<li><a href="#test"><span class = "ui-icon ui-icon-folder-collapsed"></span>testing</a></li>
</ul>
</div>
<button onclick="browseProjDir()">Browse</button>
</body>
</html>

if I place the append function inside of <script> tags in the html it will add testing2, if I place it inside the browseProjDir() function inside <script> tags, it will add the text but the formatting won't apply to the new items.

To cut to the chase, I had a working <select> box (non-drop down) that dynamically added files to it after receiving shell data from the user. The only problem was I needed the user to identify folders from files so I wanted icons in my lists. Unfortunately, I also have to make it work in Internet Explorer as these will be .hta files. I am new to jquery as the previous version was done entirely in client-side javascript.

vidjuheff..