Question

I am trying to build a kiosk on a local machine only. I’m planning to use JavaScript to make the menu lists functional. Here is my html code example.

<ul class="sf-menu">
        <li class="current">
            <a href="#a">Area1</a>
                <ul>
                    <li>
                        <a href="#aa">John's Store </a>
                    </li>
                        <li class="current">
                            <a href="#ab">Katy's store</a>
                                <ul>
                                    <li class="current"><a href="#">Orange</a></li>
                                    <li><a href="#aba">Watermelon</a></li>
                                    <li><a href="#abb">Apple</a></li>

                                </ul>
                        </li>
                        <li>

                            <a href="#">Catherine's Store</a>
                                <ul>
                                    <li><a href="#">Banana</a></li>
                                    <li><a href="#">Pear</a></li>
                                    <li><a href="#">Cherry</a></li>

                                </ul>
                        </li>

                </ul>
        </li>

        <li>
            <a href="#">Area2</a>
                <ul>
                        <li>
                            <a href="#">Peter</a>
                                <ul>
                                    <li><a href="#">Apple</a></li>
                                    <li><a href="#">Rockmelon</a></li>


                                </ul>
                        </li>
                        <li>
                            <a href="#">Lynda</a>
                                <ul>
                                    <li><a href="#">Strawberry</a></li>
                                    <li><a href="#">Jackfruit</a></li>
                                    <li><a href="#">Orange</a></li>

                                </ul>
                        </li>

                    </ul>
            </li> <!--current-->

    </ul> <!--sf-menu-->

The person who is going to update/change the menu(which is going to be massive) is going to use a simple text file eg notepad – .txt (for certain reasons). Is there any way to update the menu items with a simple text file? Can I use a JavaScript or jQuery plugin/code?

Any direction would be appreciated.

Answer 1

You can do this using .get:

  var textFile = "SCHEME://DOMAIN/FILENAME.txt";        
  jQuery.get(textFile, function(textFileData) {             
      //Parse file and populate menu based on specs.   
      //textFileData will have the text      
    }         

If you want the text back for each line you can do (assuming the names are separated by a newline):

   var EachLineInTextFile= textFileData.responseText.split("\n");         
   for (var i = 0, len = EachLineInTextFile.length; i < len; i++) 
   { 
     //This will give you each name from here you can put the name where you want it
   } 

A sample would be:

<script type="text/javascript">
    $(document).ready(function () {
        var textFile = "http://localhost/MyDomain/Menu.txt";
        jQuery.get(textFile, function (textFileData) {
            var EachLineInTextFile = textFileData.responseText.split("\n");
            for (var i = 0, len = EachLineInTextFile.length; i < len; i++) {
                STORE_TO_REPLACE = EachLineInTextFile[i];
                //STORE_TO_REPLACE: I would have to the entire format of your file to do this.
            }
        })
    });           
</script>

From here, if you need help replacing the values in your list take a look at this article

Or, if you want to replace them all you can use .each to iterate through your list.