jquery - Applying styles to html page using stylesheets included in xml -


i'm trying create theme switcher using user can change website themes clicking buttons. don't want use either local storage or cookies. i'm trying using xml. can attach stylesheet xml file , run html. forces style changes in xml file. html page doesn't change. how go it. please help.

    <html> <body>     <h3>populate data xml file using jquery</h3>     <input id="btngetdata" type="button" value="populate data xml file" />     <div id="updatepanel" style="padding:20px 10px">         <form action="datacheck.xml">             <input type="submit" value="blue">         </form>         <form action="datacheck1.xml">             <input type="submit" value="red">         </form>         <form action="datacheck2.xml">             <input type="submit" value="green">         </form>     </div> </body> <script src="jquery-1.11.1.min.js"></script> <script language="javascript" type="text/javascript">     $(document).ready(function () {         $("#btngetdata").click(function () {             $("#updatepanel").html("please wait...");             $.ajax({                 url: "datacheck.xml",     url:"datacheck1.xml",                 type: "get",                 datatype: "xml",                 success: onsuccess,                 error: onerror             });         });     });      function onsuccess(xml) {         var tablecontent = "                 <table border='1' cellspacing='0' cellpadding='5'>" +                             "                     <tr>" +                                 "                         <th>title</th>" +                                 "                         <th>artist</th>" +                                 "                         <th>country</th>" +                                 "                         <th>company</th>" +                                 "                         <th>price</th>" +                                 "                         <th>year</th>" +                             "                     </tr>";         $(xml).find('cd').each(function () {             tablecontent += "                     <tr>" +                                 "                         <td>" + $(this).find('title').text() + "</td>" +                                 "                         <td>" + $(this).find('artist').text() + "</td>" +                                 "                         <td>" + $(this).find('country').text() + "</td>" +                                 "                         <td>" + $(this).find('company').text() + "</td>" +                                 "                         <td>" + $(this).find('price').text() + "</td>" +                                 "                         <td>" + $(this).find('year').text() + "</td>" +                             "                     </tr>";         });         tablecontent += "                 </table>";         $("#updatepanel").html(tablecontent);     }      function onerror(data) {         $("#updatepanel").html("error! please try again.");     }    </script> 

you loading xml content, not it's css. change html css, have change source of file dynamically:

$(document).ready(function() {    $('.btn').click(function() {      $('#style').attr('href', $(this).data('url'))    });  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link rel="stylesheet" type="text/css" href="https://bootswatch.com/cerulean/bootstrap.min.css" id="style">  <div class="wrapper">    <div class="btn btn-success" data-url="https://bootswatch.com/cerulean/bootstrap.min.css">style 1</div>    <div class="btn btn-primary" data-url="https://bootswatch.com/slate/bootstrap.min.css">style 2</div>  </div>


Comments

Popular posts from this blog

css - SVG using textPath a symbol not rendering in Firefox -

Java 8 + Maven Javadoc plugin: Error fetching URL -

datatable - Matlab struct computations -