使用Ajax / jQuery将PHP内容输入到CSS Selector中

Question

I'm creating a script that has a needle which points to various degrees and needs to change dynamically. The number of degrees it needs to move is located in degrees.php (In the page is just a number) I am trying to grab the contents of degrees.php and input it into a CSS Selector to move the needle to the right direction.

What I have so far,

Below is my jquery which grabs the content from wind.php which has a number (139) for example and loads it into the DIV ID #windraw. I've then got it setting an interval for it to keep grabbing the content from that page and updating the CSS on the fly as the content changes. Then loading it into that div id tag and.... The part which I'm stuck on, getting the content from #windraw into the CSS Selector "rotate" (https://github.com/jcubic/jquery.rotate)

jQuery:

<script>
    $(document).ready(function() {
    clearInterval(refreshId);
    $("#windraw").load("../raw/wind.php");
     });

    $(document).ready(function() {
    refreshId = setInterval(function() {
    $("#windraw").load("../raw/wind.php");
    $('#winddirneedle').css('rotate', $"#windraw");
    }, 5000);
    });
</script>

I get the error "Uncaught SyntaxError: missing ) after argument list" In my console debug however.

HTML:

<div id="winddircontain"><div id="winddirneedle" style=""></div></div>

winddircontain is a circle and winddirneedle is the needle that points to the right direction.

I'm quite a beginner in jQuery and only know a handful of it. Could someone please point out whats going wrong with my code? Thanks!

Answer 1

It would be better to use $.get for this I think, rather than loading the result into a DOM element first. Also you have some syntax errors.

$(document).ready(function () {
  var refreshId = setInterval(function () {
    $.get('../raw/wind.php').done(function (result) {
      $('#winddirneedle').css('rotate', result);
    });
  }, 5000);
});