After plugin Html loads - any dynamically added control losses style

[chef 3745]

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

[chef 3745]

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.

[techywarrior 688]

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.

[chef 3745]

I really have to learn jquery better. I only just learned javascript... finally. it took me three days of solid coding. lol

[techywarrior 688]

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

[ebr 14910]

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.