Jump to content

After plugin Html loads - any dynamically added control losses style


chef
 Share

Recommended Posts

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 by chef
Link to comment
Share on other sites

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

techywarrior

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.

  • Like 1
Link to comment
Share on other sites

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

techywarrior

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...