Custom JQuery Sortable Accordion With Create/Delete levels - Delete Broke

Hi,

Indeed my server :slight_smile:
Regarding the styling, I’m currently more concerned with the JS side of things. The styling should be easy to do once the JS is working properly.
The code from your original page was quite tangled and I thought this would be a nice exercise in making it more readable and maintainable.
To that end, I normally first separate concerns (e.g. CSS in a separate file, JS in a separate file), implement just the core functionality (what we currently have), then look at the best way to add the required additional features.

We will certainly get to this, but these are more advanced areas.
We need to get the add/delete functionality working first.

[quote=“MrTIMarshall,post:19,topic:42665”]

I don’t have a clue what this means exactly. This part of the website is for the administration panel to edit or create a new table. I am thinking able implementing an undo feature if this is anything to do with deleted being saved?..

What do you mean by a deleted panel?[/QUOTE]

Well, in your original JS you had:

var MaxInputs = 8;

This meant that the user could hit the add button 9 times (the index being zero based).

You would then have accordion panels with the headings 1-9 (i.e. column 1, column 2 etc …)

If you hit the add button a tenth time, nothing happens (the MaxInputs limit was reached).

If you then delete 8 of the nine panels (so that only “column 1” is left), then hit the add button again, what do you expect to happen?

In your current demo nothing happens, as the MaxInputs limit was reached and deleting the accordion panels doesn’t decrease the count.

I would have thought that it was your intention to have a maximum of 8 (or 9?) accordion panels showing at any one time.

If you let me know, I’ll get the add / delete functionality working properly.

I thought as much with what you’ve said, I just wasn’t sure so I thought I would ask.

I never realised I broke this script whilst implementing it into this pager. I understand exactly what you mean now and you are correct, I would like a total maximum of 8 columns in total allowed so deleting one should decrease the variable of the maximum inputs.

Hi,

So I’ve had a look at this and have added the add/delete functionality.
I have also added an alert to inform the user if they have exceeded the max no. of columns or try to delete the final column.

Whenever the add/delete button is pressed, I am also renumbering the accordion panels from one to whatever.
As the panels are draggable, this is probably not correct.
Check out the updated demo to see what I mean.
What would you actually like to happen in this case?

<!DOCTYPE HTML>
<html>
  <head>
    <base href="http://rafflebananza.com/assets/global/plugins/SlickGrid-master/examples/" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>SlickGrid example 5: Refactoring</title>
    <link rel="stylesheet" href="../slick.grid.css" type="text/css" />
    <link rel="stylesheet" href="../controls/slick.pager.css" type="text/css" />
    <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" />
    <link rel="stylesheet" href="examples.css" type="text/css" />
    <link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css" />
    <style>
      .removeSection{
        z-index: 99999;
        position: absolute;
        margin-left: 430px;
        top: 7px;
        width: 32px;
      }
      .pixels, .percentage{
        width: 80px; 
        float: left;
      }
      div.divider{
        height: 27px; 
        width: 35px;
        float: left;
        padding-top: 10px; 
        text-align: center; 
        font-size: 17px; 
        color: #CCC;
      }
      .accordionHeader{
        position: relative;
        left: 15px;
      }
    </style>
  </head>

  <body>
    <div>
      <div class="options-panel">
        <strong>Edit Columns</strong>
        <hr/>
        <div id="accordion">
          <div class="group panel">
            <h3>
              <span class="removeSection"><a href="#" class="removeclass"><span class="ui-icon ui-icon-circle-close"></span></a></span>
              <a href="#" class="headertitle"><span class="accordionHeader">Column 1</span></a>
            </h3>
            <div>
              <div class="group">
                <div class="boo">
                  <span class="columnTitle">Column 1</span><br/>
                  <div class="row">
                    <input type="text" name="mytext[]" class="columnTitle" placeholder="Column Title">
                    <label>Please enter the title for the data under this column</label>
                  </div>
                  <div class="row">
                    <input type="number" name="mytext[]" class="pixels" placeholder="px">
                    <div class="divider">or</div>
                    <input type="number" name="mytext[]" class="percentage" placeholder="%">
                    <label>Please enter initial (page load) width for this column</label>
                  </div>
                </div>
                <div class="row">
                  <div class="dropdown">
                    <select name="age">
                      <option selected>
                        &nbsp;&nbsp;&nbsp;&nbsp;Column Input Type
                      </option>
                      <option>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Simple Text Input
                      </option>
                      <option>
                        &nbsp;&nbsp;Descriptive Text Input
                      </option>
                      <option> 
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Check/Tick
                      </option>
                      <option>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Progress Bar
                      </option>
                      <option>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Date Picker
                      </option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="AddNewColumn" id="addButton">
          <div class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons ui-sortable" role="tablist">
            <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
              <div class="group">
                <h3>
                  <span class="ui-icon ui-icon-plus"></span>
                  <a href="#">Add New</a>
                </h3>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    <script src="../lib/jquery.event.drag-2.2.js"></script>
    <script>
      "use strict";

      function create_accordion(str) {
        $(str)
        .accordion({
          header: "> div > h3",
          heightStyle: "content",
          active: false,
          collapsible: true,
        })
        .sortable({
          axis: "y",
          handle: "h3",
          cancel: ".RemoveSection",
          stop: function( event, ui ) {
            // IE doesn't register the blur when sorting
            // so trigger focusout handlers to remove .ui-state-focus
            ui.item.children("h3").triggerHandler("focusout");
          }
        });
      }

      function renumberColumns(){
        $(".accordionHeader").each(function(index){
          $(this).html("Column " + (index + 1));
        });
      }

      function addAccordionPanel(){
        var noPanels = $(".panel").length;
        if(noPanels < maxPanels){
          $("#accordion").append($newPanel).accordion("refresh");
          renumberColumns();
        } else {
          window.alert("Maximum columns reached");
        }
      }

      function removeAccordionPanel(panel){
        var noPanels = $(".panel").length;
        if(noPanels > 1){
          $(panel).parent().parent().remove();
          renumberColumns();
        } else {
          window.alert("You need at least one panel");
        }
      }

      var $newPanel = $("#accordion").html(),
          maxPanels = 3;

      $("#addButton").on("click", function(){
        addAccordionPanel();
        return false;
      });

      $(".options-panel").on( "click",".removeSection", function() {
        removeAccordionPanel(this);
        return false;
      });

      create_accordion("#accordion");
    </script>
  </body>
</html>

This is looking a lot better than my original, nice scripting, I’ve got a lot to learn!

Warning Line 5, Column 76: Using windows-1252 instead of the declared encoding iso-8859-1.
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>

Trying to validate a page and could not resolve so I used your meta tags but they also pulled out an error.

Hi,

Which page?

This one

Oh, ok.
Fixed by swapping:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

For:

<meta charset="utf-8">