Why is the hr tag not placed below each div I indicated? from jQuery

Navigation
1

From a array that I get from db , I create a modal with bootstrap3-dialog .

I create the elements easily, the only one I have problems with is the hr tag, since they are not placed under each element that I indicate, but they are all grouped in the part > upper-right of the modal .

Next, what I try: 

let valores = [{"id":7,"n_activo":"0811049","nombre":"Ciller 1-1","mar_mod":"Trane / CGAFC304AHA10000E0000000000000","serial":"C03M11007","ldp":"Servicios Criticos","estatus":0},{"id":9,"n_activo":"0811050","nombre":"Chiller 1-2","mar_mod":"Trane / CGAFC304AHA10000E0000000000000","serial":"C03M11008","ldp":"Servicios Criticos","estatus":0},{"id":20,"n_activo":"0811058","nombre":"Bomba B Chiller 1-1","mar_mod":"Armstrong / 3x2x10    4030","serial":"490976","ldp":"Servicios Criticos","estatus":0},{"id":19,"n_activo":"0811143","nombre":"Compresor","mar_mod":"Bottarini / Ks 45 - ESE 30","serial":"BA23011002","ldp":"Servicios Criticos","estatus":0}];

BootstrapDialog.show({
  title: 'Equipos en Buen Estado',
  type: BootstrapDialog.TYPE_SUCCESS,
  message: function(dialogRef) {
    dialogRef.getModalContent()[0].getElementsByClassName("modal-body")[0].setAttribute('class', 'panel-body');

    let form = $('<form/>',{
      'id' : 'form_eliminar_item',
      'role'  : 'form',
      'class'  : 'form-horizontal'
    });

    for(n in valores){
      div = $('<div/>',{
        'class' : 'form-group col-sm-12 col-xs-12',
      });
        label = $('<label/>',{
          'class' : 'control-label col-sm-3 col-xs-12',
          'text'    : '#: '
        });
        label.appendTo(div);
        div_field = $('<div/>',{
          'class' : 'col-sm-9 col-xs-12',
        });
          field = $('<span/>',{
            'class' : 'col-sm-10',
            'text'    : (parseInt(n)+1)
          });
          field.appendTo(div_field);
        div_field.appendTo(div);
      div.appendTo(form);

      div = $('<div/>',{
        'class' : 'form-group col-sm-12 col-xs-12',
      });
        label = $('<label/>',{
          'class' : 'control-label col-sm-3 col-xs-12',
          'text'    : 'Área: '
        });
        label.appendTo(div);
        div_field = $('<div/>',{
          'class' : 'col-sm-9 col-xs-12',
        });
          field = $('<span/>',{
            'class' : 'col-sm-10',
            'text'    : valores[n].ldp
          });
          field.appendTo(div_field);
        div_field.appendTo(div);
      div.appendTo(form);

      div = $('<div/>',{
        'class' : 'form-group col-sm-12 col-xs-12',
      });
        label = $('<label/>',{
          'class' : 'control-label col-sm-3 col-xs-12',
          'text'    : 'N° de Activo: '
        });
        label.appendTo(div);
        div_field = $('<div/>',{
          'class' : 'col-sm-9 col-xs-12',
        });
          field = $('<span/>',{
            'class' : 'col-sm-10',
            'text'    : valores[n].n_activo
          });
          field.appendTo(div_field);
        div_field.appendTo(div);
      div.appendTo(form);

      div = $('<div/>',{
        'class' : 'form-group col-sm-12 col-xs-12',
      });
        label = $('<label/>',{
          'class' : 'control-label col-sm-3 col-xs-12',
          'text'    : 'Nombre: '
        });
        label.appendTo(div);
        div_field = $('<div/>',{
          'class' : 'col-sm-9 col-xs-12',
        });
          field = $('<span/>',{
            'class' : 'col-sm-10',
            'text'    : valores[n].nombre
          });
          field.appendTo(div_field);
        div_field.appendTo(div);
      div.appendTo(form);

      div = $('<div/>',{
        'class' : 'form-group col-sm-12 col-xs-12',
      });
        label = $('<label/>',{
          'class' : 'control-label col-sm-3 col-xs-12',
          'text'    : 'Serial: '
        });
        label.appendTo(div);
        div_field = $('<div/>',{
          'class' : 'col-sm-9 col-xs-12',
        });
          field = $('<span/>',{
            'class' : 'col-sm-10',
            'text'    : valores[n].serial
          });
          field.appendTo(div_field);
        div_field.appendTo(div);
      div.appendTo(form);

      div = $('<div/>',{
        'class' : 'form-group col-sm-12 col-xs-12',
      });
        label = $('<label/>',{
          'class' : 'control-label col-sm-3 col-xs-12',
          'text'    : 'Marca / Modelo: '
        });
        label.appendTo(div);
        div_field = $('<div/>',{
          'class' : 'col-sm-9 col-xs-12',
        });
          field = $('<span/>',{
            'class' : 'col-sm-10',
            'text'    : valores[n].mar_mod
          });
          field.appendTo(div_field);
        div_field.appendTo(div);
      div.appendTo(form);
      
      if(parseInt(n) < (valores.length - 1)){
        div = $('<hr/>',{
          'style' : 'display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px;',
        });
        div.appendTo(form);
      }
    }
    return form;
  },
  buttons: [
    {
      label: 'Ver en los registros',
      action: function(dialog) {
        
      }
    }
  ]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.min.js"></script>
    
asked by Pablo Contreras 24.09.2017 в 06:45
source

1 answer

1

The <hr> elements are not displayed correctly because they are not assigned a correct bootstrap class, so they appear floating inside the form.

You should wrap them in a div with an appropriate class, for example it could be in the following way in html: 

<div class="form-group col-sm-12 col-xs-12">
  <hr style="display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px;">
</div>

To achieve this you should modify the part of the script that generates the hr tag in the following way: 

  if(parseInt(n) < (valores.length - 1)){
    div = $('<div/>',{
      'class' : 'form-group col-sm-12 col-xs-12',
    });
    hr = $('<hr/>',{
      'style' : 'display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px;',
    });
    hr.appendTo(div);
    div.appendTo(form);
  }


let valores = [{"id":7,"n_activo":"0811049","nombre":"Ciller 1-1","mar_mod":"Trane / CGAFC304AHA10000E0000000000000","serial":"C03M11007","ldp":"Servicios Criticos","estatus":0},{"id":9,"n_activo":"0811050","nombre":"Chiller 1-2","mar_mod":"Trane / CGAFC304AHA10000E0000000000000","serial":"C03M11008","ldp":"Servicios Criticos","estatus":0},{"id":20,"n_activo":"0811058","nombre":"Bomba B Chiller 1-1","mar_mod":"Armstrong / 3x2x10    4030","serial":"490976","ldp":"Servicios Criticos","estatus":0},{"id":19,"n_activo":"0811143","nombre":"Compresor","mar_mod":"Bottarini / Ks 45 - ESE 30","serial":"BA23011002","ldp":"Servicios Criticos","estatus":0}];

BootstrapDialog.show({
  title: 'Equipos en Buen Estado',
  type: BootstrapDialog.TYPE_SUCCESS,
  message: function(dialogRef) {
    dialogRef.getModalContent()[0].getElementsByClassName("modal-body")[0].setAttribute('class', 'panel-body');

    let form = $('<form/>',{
      'id' : 'form_eliminar_item',
      'role'  : 'form',
      'class'  : 'form-horizontal'
    });

    for(n in valores){
      div = $('<div/>',{
        'class' : 'form-group col-sm-12 col-xs-12',
      });
        label = $('<label/>',{
          'class' : 'control-label col-sm-3 col-xs-12',
          'text'    : '#: '
        });
        label.appendTo(div);
        div_field = $('<div/>',{
          'class' : 'col-sm-9 col-xs-12',
        });
          field = $('<span/>',{
            'class' : 'col-sm-10',
            'text'    : (parseInt(n)+1)
          });
          field.appendTo(div_field);
        div_field.appendTo(div);
      div.appendTo(form);

      div = $('<div/>',{
        'class' : 'form-group col-sm-12 col-xs-12',
      });
        label = $('<label/>',{
          'class' : 'control-label col-sm-3 col-xs-12',
          'text'    : 'Área: '
        });
        label.appendTo(div);
        div_field = $('<div/>',{
          'class' : 'col-sm-9 col-xs-12',
        });
          field = $('<span/>',{
            'class' : 'col-sm-10',
            'text'    : valores[n].ldp
          });
          field.appendTo(div_field);
        div_field.appendTo(div);
      div.appendTo(form);

      div = $('<div/>',{
        'class' : 'form-group col-sm-12 col-xs-12',
      });
        label = $('<label/>',{
          'class' : 'control-label col-sm-3 col-xs-12',
          'text'    : 'N° de Activo: '
        });
        label.appendTo(div);
        div_field = $('<div/>',{
          'class' : 'col-sm-9 col-xs-12',
        });
          field = $('<span/>',{
            'class' : 'col-sm-10',
            'text'    : valores[n].n_activo
          });
          field.appendTo(div_field);
        div_field.appendTo(div);
      div.appendTo(form);

      div = $('<div/>',{
        'class' : 'form-group col-sm-12 col-xs-12',
      });
        label = $('<label/>',{
          'class' : 'control-label col-sm-3 col-xs-12',
          'text'    : 'Nombre: '
        });
        label.appendTo(div);
        div_field = $('<div/>',{
          'class' : 'col-sm-9 col-xs-12',
        });
          field = $('<span/>',{
            'class' : 'col-sm-10',
            'text'    : valores[n].nombre
          });
          field.appendTo(div_field);
        div_field.appendTo(div);
      div.appendTo(form);

      div = $('<div/>',{
        'class' : 'form-group col-sm-12 col-xs-12',
      });
        label = $('<label/>',{
          'class' : 'control-label col-sm-3 col-xs-12',
          'text'    : 'Serial: '
        });
        label.appendTo(div);
        div_field = $('<div/>',{
          'class' : 'col-sm-9 col-xs-12',
        });
          field = $('<span/>',{
            'class' : 'col-sm-10',
            'text'    : valores[n].serial
          });
          field.appendTo(div_field);
        div_field.appendTo(div);
      div.appendTo(form);

      div = $('<div/>',{
        'class' : 'form-group col-sm-12 col-xs-12',
      });
        label = $('<label/>',{
          'class' : 'control-label col-sm-3 col-xs-12',
          'text'    : 'Marca / Modelo: '
        });
        label.appendTo(div);
        div_field = $('<div/>',{
          'class' : 'col-sm-9 col-xs-12',
        });
          field = $('<span/>',{
            'class' : 'col-sm-10',
            'text'    : valores[n].mar_mod
          });
          field.appendTo(div_field);
        div_field.appendTo(div);
      div.appendTo(form);
      
      if(parseInt(n) < (valores.length - 1)){
        div = $('<div/>',{
          'class' : 'form-group col-sm-12 col-xs-12',
        });
        hr = $('<hr/>',{
          'style' : 'display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px;',
        });
        hr.appendTo(div);
        div.appendTo(form);
      }
    }
    return form;
  },
  buttons: [
    {
      label: 'Ver en los registros',
      action: function(dialog) {
        
      }
    }
  ]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.min.js"></script>
    
answered by 24.09.2017 / 07:10
source
Get the Following using TwitterAPIExchange.php Problem when uninstalling Netbeans 8.2 in Windows 10