CODEWITHSUNDEEP
jquerycssajaxrequesthref
45RPM
45RPM

Reputation: 133

AJAX Request jQuery Link with no styles

I have this code. It gets request data and displays it in DIV with refresh.

Why can it display requested data like "Simple text" in DIV but can't display for example this line:

<a href="#" data-role="button">Button</a>

with applied/rendered CSS and jQuery.mobile button styles? Am I missing something?

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <script>
      function GetData()
      {
        nocache = "&nocache=" + Math.random() * 1000000;
        var request = new XMLHttpRequest();
        request.onreadystatechange = function()
        {
          if (this.readyState == 4) {
            if (this.status == 200) {
              if (this.responseText != null) {
                document.getElementById("buttons").innerHTML = this.responseText;
              }
            }
          }
        }
        request.open("GET", "state" + nocache, true);
        request.send(null);
        setTimeout('GetData()', 1000);
      }
    </script>
  </head>
  <body onload="GetData()">
    <div id="buttons" data-role="content">  
    </div>  
  </body>
</html>

Upvotes: 0

Views: 89

Answers (1)

griegs
griegs

Reputation: 22760

replace this document.getElementById("buttons").innerHTML = this.responseText; with

$("#buttons").html(this.responseText);

That's what I do.

Also, seeing as you are using jQuery you can replace a large portion of your code that deals with checking ready states etc with $(function(){ //your code here });

You can also then do away with <body onload="GetDate()"> and simply have <body>.

Upvotes: 1

Related Questions