0

Basically I am trying to accomplish a personal bit of code for a hobby.

The goal is to be able to read from a file that contains a single line that displays what I am currently listening to as it changes songs without any interaction from myself. Preferably i'd LIKE to be able to scroll the text field that contains the song name but I would be more than THRILLED to just get formattable text there.

Currently I've hit a roadblock because I am not that savvy (Shocked my PC hasn't caught fire thus far. . .) when it comes to programming.

What I have so far (Sorry for the terrible hack job):

<html>
  <head>
  <style>
      body {
          background-color: rgba(0, 0, 0, 0.65);
          white-space: nowrap;
          overflow: hidden;
          margin: 0px 0px 0px 0px;
      }
      p.ex1 {
          font:22px, arial, sans-serif;
          color:rgb(255, 255, 255);
      }  
  </style>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    setInterval('read',3000);
    function read(){
        jQuery.get('SongPlayback.html',
        function(data){$('.contents').html(data);}
        )
        }
  </script>      


  </head>
 <body>
    <p class="ex1">
    Now Playing:<br>
    <div id="contents"></div>
    </p>
 </body>
</html>

I am suspecting the major issue with all of this is it is to be run locally and I'm not sure if that is possible(?), have been reading quite a bit about how JS doesn't run locally for security reasons? Could be I'm just crapping all over the code. I have stored jquery.js in the same dir as the HTML file in addition to the "SongPlayback.html" file.

I have used <Object> to house the text before but I couldn't get it to update on song (file) change.

Iggypop
  • 13
  • 1
  • 3
  • What error is it that you are getting? if you don't know, check your console, if you don't know what that is, press `F12` in most major browsers to get a `web inspector` with a GUI. click on the `console` tab, and it will show what the error is. Data from a file can be read using the method described above, however, if you're only receiving a text from the file, simply do `$('.contents').html(data)}, 'text');` to specify your intent of receiving only a text string – Ohgodwhy May 03 '13 at 04:31
  • You cannot run jQuery.get requests locally without a server running. You can either download and start a server locally: http://www.apachefriends.org/en/xampp.html or put your code up on a rented server if you have one. – tomca32 May 03 '13 at 04:32
  • @tomca32 that is 100% false. The only browser that complains about it is Chrome, and even then, if you're doing all this locally, you're not worried about whether users are going to use Chrome, you can simply use Safari, Opera, Firefox, IE6-10. – Ohgodwhy May 03 '13 at 04:34
  • Well it's not really 100% false, he will run into the same origin issues. Of course it's possible to go around it, but I think it's better not to get into that. While you are technically correct, I think it will save him a lot of head scratching to just do this stuff on a server. – tomca32 May 03 '13 at 04:40
  • @Ohgodwhy yes, only Chrome complains about same origin policy when doing XMLHTPPRequests with `file://`, but did you actually get loaded content this way? I don't see neither of your mentioned browsers doing actual requests in console or Fiddler, not to mention getting any content from the response... – package May 03 '13 at 04:55
  • So I guess the statement has been made that in order to use the functions that I'm using already i would need to run a web server of sorts, either stripped down or fully. Anyone have any suggestions on attaining a result without running more things? I mean I could make a basic script to do what i want but I really wanted to try this in HTML. – Iggypop May 03 '13 at 05:10

3 Answers3

1

In order to work with the get or post request using jQuery, you need a server which will handle this type of requests. you must install wamp http://www.wampserver.com/en/#download-wrapper or xammp http://www.apachefriends.org/en/xampp.html. Then run your code using any of these applications.

Arvind Kumar Avinash
  • 71,965
  • 6
  • 74
  • 110
Tushar Gupta - curioustushar
  • 58,085
  • 24
  • 103
  • 107
1

So, answering my own question since it IS possible to do this all RELATIVELY locally.

This will give me what I want and will return the data values found in the respective files if they are formatted correctly. The only thing left for me to do is get rid of the terrible looking marquee in favor of some better CSS formatting.

<html>
  <head>
  <style>
      body {
          background-color: rgba(0, 0, 0, 0.65);
          margin: 0px 0px 0px 0px;   
      }
      p.ex1 {
          font:18px arial, sans-serif;
          color:rgb(255, 255, 255);
          margin: 0px 0px 0px 0px;
      }  
  </style>

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

  <script>
            var previousData;
            function loadText() {
                $.ajax({
                    url: 'SongPlayback.json',
                    beforeSend: function(xhr) {
                        if (xhr.overrideMimeType) {
                            xhr.overrideMimeType("application/json");
                        }
                    },
                    dataType: 'json',
                    success: function(data) {
                        $.each(data, function(key, val) {
                            if (key == 'input') {
                                if (val != previousData) {
                                     previousData = val;
                                    $('#responsecontainer')
                                        .animate({opacity:0})
                                        .queue(function(){
                                             $(this).text(previousData).dequeue()
                                        })
                                        .animate({opacity:1});  
                                }
                            }
                        });
                    }
                });
            }

            setInterval(loadText, 500);

        </script>      


  </head>
 <body>
    <p class="ex1">Now Playing:<br>
    </p>
    <marquee direction="left" scrollamount="4">
    <p class="ex1" style="white-space:nowrap; height:25; width:200; margin:0px 0px 0px 0px;" id="responsecontainer"></p>
    </marquee>    
 </body>
</html>
Iggypop
  • 13
  • 1
  • 3
  • Credit for this doesn't go to me BTW, goes to: [link](http://obsproject.com/forum/viewtopic.php?f=11&t=3284) – Iggypop May 03 '13 at 19:58
0

In order to do a get or post, even lon you localhost, you need to be running a webserver to handle the request. You can use a tool like Xampp to set this up pretty easily. You'll need to relocate your files into a folder inside the htdocs folder inside the Xampp installed folder. For instance, if you add your files to htdocs/playlist/, you'd access it in your browser by visiting http://localhost/playlist/. Once this is set up, you'll be able to do get and post operations. Xampp is a great tool - it very easily sets up Apache, PHP and MySQL on your local PC. It's super simple and extremely useful for developing web scripts.

Surreal Dreams
  • 26,055
  • 3
  • 46
  • 61
  • This is false. Please try it yourself before posting. – Ohgodwhy May 03 '13 at 04:38
  • When you use jQuery get or post, you're doing an XMLHttpRequest - that's not going to happen without a webserver to respond. See also http://stackoverflow.com/questions/8486590/get-html-code-of-a-local-html-file-in-javascript and http://en.wikipedia.org/wiki/XMLHttpRequest - note the first paragraph where it mentions how requests are sent to a server. – Surreal Dreams May 03 '13 at 04:41
  • It's still incorrect, because as I'm responding to this, I'm using his code locally without the need for a server. Not every SO post is correct just because it's been answered, you can also delve deeper and when you realizde that `XMLHTTPRequest` is not literal, then you'll be fine. If it were, then we could only extrapolate XML data, couldn't we? – Ohgodwhy May 03 '13 at 04:45
  • So wait, you are saying that it is reading from "SongPlaylist.html" and displaying the result in the resulting HTML page? – Iggypop May 03 '13 at 04:47
  • @Ohgodwhy are you sure you're running OP script locally NOT in a webserver? AS far as I know you can't do `XMLHTTPRequest`s with `file://` protocol – package May 03 '13 at 04:50
  • @package I'm 100% certain. I'm using `$.ajax()` and not a `$.get()` wrapper, but yes, sans server, sitting in a folder I've decided, I'm capable of retrieving a string from a file that resides in the same directory. As mentioned above in my comment, Chrome throws a E_EXCEPTION error, but other browsers (firefox/safari/opera/ie) have no trouble displaying the results. – Ohgodwhy May 03 '13 at 04:51