How to add panel before and after panel

Question

Report designer layout contains Bootstrap 3 panels. Detail panel has Add group button which should add new panels before and after it.

This is implemented in onclick event handler using jquery prepend and append:

        var $this = $(this),
            $parentpanel = $this.parents(".designer-panel").get(0);
        $parentpanel.prepend('<div class="panel designer-panel">' +
'<div class="panel-body designer-panel-body" style="height:1px">' +
'</div>' +
'<div class="bg-warning">' +
'<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' +
'</i> Group heade {0}: <span id="band{0}_expr" contenteditable="true">"group expression"</span>' +
'</div></div></div>');

        $parentpanel.append('<div class="panel designer-panel">' +
'<div class="panel-body designer-panel-body" style="height:1px">' +
'</div>' +
'<div class="bg-warning">' +
'<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' +
'</i> Group footer {0}' +
'</div></div></div>');

    });

If clicked in Add band button html appears instead of panel.

It looks like jquery preoend and append does not add dom objects work for unknown reason.

How to fix this so that new panels appear before and after detail panel ?

$(function() {

          var startpos,
          selected = $([]),
          offset = { top: 0, left: 0 };

      
    $('#designer-detail-addband').on('click', function () {
        var $this = $(this),
$parentpanel = $this.parents(".designer-panel").get(0);

        $parentpanel.prepend('<div class="panel designer-panel">' +
'<div class="panel-body designer-panel-body" style="height:1px">' +
'</div>' +
'<div class="bg-warning">' +
'<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' +
'</i> Group heade {0}: <span id="band{0}_expr" contenteditable="true">"groupexpression"</span>' +
'</div></div></div>');

        $parentpanel.append('<div class="panel designer-panel">' +
'<div class="panel-body designer-panel-body" style="height:1px"></div>' +
'<div class="bg-warning">' +
'<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' +
'</i> Group footer {0}' +
'</div></div></div>');

    });

      
      
      
      
      
    $(".designer-panel-body").droppable({
        accept: ".designer-field"
     });

    $(".designer-field").draggable({
            start: function (event, ui) {
                var $this = $(this);
                if ($this.hasClass("ui-selected")) {
                    selected = $(".ui-selected").each(function () {
                        var el = $(this);
                        el.data("offset", el.offset());
                    });
                } else {
                    selected = $([]);
                    $(".designer-field").removeClass("ui-selected");
                }
                offset = $this.offset();
            },

            drag: function (event, ui) {
                // drag all selected elements simultaneously
                var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
                selected.not(this).each(function () {
                    var $this = $(this);
                    var elOffset = $this.data("offset");
                    $this.css({ top: elOffset.top + dt, left: elOffset.left + dl });
                });
            }
        });



        $(".panel-resizable").resizable({
          minWidth: "100%",
          maxWidth: "100%",
          minHeight: 1
        });
      });

.panel-resizable {
        min-height: 1px;
        overflow: hidden;
        margin: 0;
        padding: 0;
      }

    .designer-field  {
        border: 1px solid lightgray;
        white-space: pre;
        overflow: hidden;
      position: absolute;
    }

    .designer-panel-body {
        min-height: 1px;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    .panel-footer {
        padding: 0;
    }

    .designer-panel, .panel-body {
        margin: 0;
        padding: 0;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    </head>

    <body>
      <div class='panel designer-panel'>
        <div class='panel-body designer-panel-body panel-resizable' style='height:2cm'>

          <div class='designer-field' style='left:5px;top:6px;width:180px'>field 1 in group 1 header</div>

    <div class='designer-field' style='left:54px;top :36px;width:160px'>field 2 in group 1 header</div>
        </div>
        
        <div class='panel-footer'>Group 1 Header</div>
      </div>
          
    <div class='panel designer-panel'>
      <div class='panel-body panel-resizable' style='height:1cm'>
    <div class='designer-field' style='left:24px;top:2px;width:140px'>field in detail group </div>
        </div>
      <div class='panel-footer panel-primary'>Detail <a role="button" id="designer-detail-addband"> Add group</a></div>
      </div>

      <div class='panel'>
        <div class='panel-body panel-resizable' style='height:1cm'>
          
    <div class='designer-field' style='left:44px;top:2px;width:140px'>field in group 1 footer</div></div>
        <div class='panel-footer panel-warning'>Group 1 Footer</div>
      </div>

score 2 · Accepted Answer · answered Oct 29 '16 at 20:49

2

I think your issue is here:

$parentpanel = $this.parent(".designer-panel");

jQuery parent only goes one level up the DOM, and looking at your HTML the first div with .designer-panel is several levels up from your anchor. If you change it to the code below then you should hopefully get the element you want.

$parentpanel = $this.parents(".designer-panel").get(0);

answered Oct 29 '16 at 20:49

Alex Young

4,009
1
16
34

After this change inserted html appers as text. How to fix this so that instead of text panels appear ? – Andrus Oct 29 '16 at 20:57
I tried also to wrap strings into `$(...)`. In this case `[Object object]` appears in page. – Andrus Oct 29 '16 at 21:06
1

Can you post what your code looks like now? I think your HTML in the original question is not correct, the div start and end tags do not match up properly. – Alex Young Oct 29 '16 at 21:14
I fixed code snippet in question. `prepend()` and `append()` insert html as text. How to insert html as panels ? – Andrus Oct 30 '16 at 06:38
I posted this as separate question in http://stackoverflow.com/questions/40326711/how-to-force-prepend-and-append-to-add-dom-objects-not-text – Andrus Oct 30 '16 at 06:59
How to make headers sortable in this code ? I posted it in http://stackoverflow.com/questions/40333881/how-to-make-header-panels-sortable – Andrus Oct 30 '16 at 21:43

How to add panel before and after panel

1 Answers1