chef 3748 Posted March 8, 2015 Share Posted March 8, 2015 (edited) I have a button on my my plugin html page. It creates dynamic List Items. However, after the server loads the Html in my plugin settings, when ever I press the button to create a new list item, the list item appears without any of the CSS styles from the server. I figure this is because the CSS has already bee read and used during load. How do I keep the styles for my new list items? <div style="vertical-align:middle;" id="newClientList"> <script type="text/javascript"> function AddProfileToList() { var e = document.getElementById("clientName"); strClientName = e.options[e.selectedIndex].text; //HERE is where the trouble begins var mainDiv = document.getElementById("newClientList"); var newUList = document.createElement("ul"); newUList.setAttribute("class", "ulForm ui-listview"); newUList.setAttribute("data-role", "listview"); newUList.setAttribute("data-inset", "true"); newUList.setAttribute("data-split-icon", "delete"); newUList.setAttribute("id", "clientProfiles"); //if (strClientName === "Dashboard") { var newLItem = document.createElement("li"); var configurationLink = document.createElement("a"); configurationLink.setAttribute("href", Dashboard.getConfigurationPageUrl("DashboardConfigPage")); configurationLink.innerText = "Represents a saved Profile 1"; var deleteButtonLink = document.createElement("a"); deleteButtonLink.setAttribute("href", "#"); deleteButtonLink.setAttribute("data-icon", "delete"); deleteButtonLink.setAttribute("class", "btnDeletePropfile"); deleteButtonLink.setAttribute("onclick", "deleteProfile(id)"); newLItem.appendChild(configurationLink); newLItem.appendChild(deleteButtonLink); newUList.appendChild(newLItem); mainDiv.appendChild(newUList); } </script> Edited March 8, 2015 by chef Link to comment Share on other sites More sharing options...
chef 3748 Posted March 8, 2015 Author Share Posted March 8, 2015 I figured it out. You have to call a refresh of your list and tell it what style it is. The github examples by Snazzy and Luke use jquery to do this: $('#clientProfiles', page).html(html).listview('refresh'); Hopefully in the future we will be able to see a list of CSS styles on Github, or at least have a record of what the Style is called. Link to comment Share on other sites More sharing options...
techywarrior 688 Posted March 8, 2015 Share Posted March 8, 2015 That JS hurts my eyes. Please replace it with this: function AddProfileToList() { strClientName = $("#clientName").val(); //is strClientName used here? Also, is it global? If not do var strClientName $( "<ul/>", { "class": "ulForm ui-listview", "data-role": "listview", "data-inset": "true", "data-split-icon": "delete", "id": "clientProfiles", html: '<li><a href="Dashboard.getConfigurationPageUrl(\'DashboardConfigPage\')">Represents a saved Profile 1</a><a href="#" data-icon="delete" class="btnDeleteProfiile" onclick="deleteProfile(id)"></a></li>' }).appendTo( "#newClientList"); //not seeing where you are setting id that is being used in deleteProfile $("#newClientList").append(newUList); } I just wrote it off the top of my head without really checking anything but I am pretty sure that should work the way it is. 1 Link to comment Share on other sites More sharing options...
chef 3748 Posted March 8, 2015 Author Share Posted March 8, 2015 I really have to learn jquery better. I only just learned javascript... finally. it took me three days of solid coding. lol Link to comment Share on other sites More sharing options...
techywarrior 688 Posted March 8, 2015 Share Posted March 8, 2015 jQuery makes so many JS things easier and the code is very concise and easy to understand. It's an extremely powerful library and it's relatively light (for what it does). At one point there were a whole bunch of JS libraries written to make cross browser JS simpler and in general to make it faster/simpler to write complex JS interactions but jQuery rather quickly became the defacto standard library. Some people still use Prototype/Scriptaculous, Mootools, and Dojo but I think an extremely large percentage of sites that use a JS library use jQuery. The first time you write one line of jQuery and it replaces 10+ lines of plain JS you'll be sold Link to comment Share on other sites More sharing options...
ebr 14939 Posted March 9, 2015 Share Posted March 9, 2015 I figured it out. You have to call a refresh of your list and tell it what style it is. The github examples by Snazzy and Luke use jquery to do this: $('#clientProfiles', page).html(html).listview('refresh'); Hopefully in the future we will be able to see a list of CSS styles on Github, or at least have a record of what the Style is called. That's not css per se - that is jquery and, when you add stuff on the fly, you need to tell jquery to apply its styling. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now