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
Post a Comment