HIDE A DIV IF A VALUE FROM DB IS NOT OBTAINED IN JS

Question

HIDE A DIV IF A VALUE FROM DB IS NOT OBTAINED IN JS

Navigation

#1 by (0 votes)

0

The following code obtains information from a database and stores it in a respective div of a modal and then displays it on the screen:

eventClick:function(calEvent,jsEvent,view){
            $('#titulo').html(calEvent.title);
            FechaInicio = calEvent.start._i.split(" ");
            $('#fecha-inicio').html(FechaInicio[0]);
            $('#hora-inicio').html(FechaInicio[1]);
            FechaCierre = calEvent.end._i.split(" ");
            $('#fecha-cierre').html(FechaCierre[0]);
            $('#hora-cierre').html(FechaCierre[1]);
            $('#tipo').html(calEvent.Tipo);
            $('#lugar').html(calEvent.Lugar);
            $('#fecha-encuentro').html(calEvent.Fecha_encuentro);
            $('#hora-encuentro').html(calEvent.Hora_encuentro);
            $('#punto-encuentro').html(calEvent.Punto_encuentro);
            $('#material-individual').html(calEvent.Material_individual);
            $('#material-equipo').html(calEvent.Material_equipo);
            $('#ficha').html(calEvent.Ficha);
            $("#modal").modal();
        }

Then there is the modal code:

<div class="modal-body">
    <div class="container">
        <div class="row">
        <div class="col">
            <strong>Fecha inicio:</strong><div id="fecha-inicio"></div>
            <strong>Fecha cierre:</strong><div id="fecha-cierre"></div>
            <strong>Lugar:</strong><div id="lugar"></div>
            <strong>Fecha encuentro:</strong><div id="fecha-encuentro"></div>
            <strong>Punto encuentro:</strong><div id="punto-encuentro"></div>
            <strong>Material individual:</strong><div id="material-individual"></div>
        </div>
        <div class="col">
            <strong>Hora inicio:</strong><div id="hora-inicio"></div>
            <strong>Hora cierre:</strong><div id="hora-cierre"></div>
            <strong>Tipo:</strong><div id="tipo"></div>
            <strong>Hora encuentro:</strong><div id="hora-encuentro"></div>
            <strong>Material equipo:</strong><div id="material-equipo"></div>
        </div>
        </div>
    </div>

What I want is that when in the fullcalendar js some of the .HTML is empty then in the modal the div and the strong are hidden in the modal.

I thank you in advance for any help to solve this problem.

javascript html php modal fullcalendar

asked by Danyel Melendez Ramirez 04.10.2018 в 15:24

source

1 answer

PrinterMatrix does not print me a ticket how to load scripts from a folder with subfolders in python?

score 0 · Accepted Answer

One of several possible solutions would be to verify if the field contains information, if it contains the value is put in the div, if it does not contain value the element is hidden, but since the strong label of the div is separated with the value it would be convenient to put it all in a div to hide everything together, the code would be something like this:

HTML code

<style type="text/css">
  .hide{
       display: none;
    }
 </style>
<div class="modal-body">
<div class="container">
    <div class="row">
    <div class="col">
        <div><strong>Fecha inicio:</strong><div id="fecha-inicio"></div></div>
        <div><strong>Fecha cierre:</strong><div id="fecha-cierre"></div></div>
        <div><strong>Lugar:</strong><div id="lugar"></div></div>
        <div><strong>Fecha encuentro:</strong><div id="fecha-encuentro"></div></div>
        <div><strong>Punto encuentro:</strong><div id="punto-encuentro"></div></div>
        <div><strong>Material individual:</strong><div id="material-individual"> </div></div>
    </div>
    <div class="col">
        <div><strong>Hora inicio:</strong><div id="hora-inicio"></div></div>
        <div><strong>Hora cierre:</strong><div id="hora-cierre"></div></div>
        <div><strong>Tipo:</strong><div id="tipo"></div></div>
        <div><strong>Hora encuentro:</strong><div id="hora-encuentro"></div></div>
        <div><strong>Material equipo:</strong><div id="material-equipo"></div></div>
    </div>
    </div>
</div>

Here a class is created to hide the div more comfortably, and in the javascript validation of the value is performed with a ternary:

JS code

eventClick:function(calEvent,jsEvent,view){
        calEvent.title ? $('#titulo').html(calEvent.title) : $('#titulo').parent().addClass('hide');
        FechaInicio = calEvent.start._i.split(" ");
        FechaInicio[0] ? $('#fecha-inicio').html(FechaInicio[0]) : $('#fecha-inicio').parent().addClass('hide');
        FechaInicio[1] ? $('#hora-inicio').html(FechaInicio[1]) : $('#hora-inicio').parent().addClass('hide');
        FechaCierre = calEvent.end._i.split(" ");
        FechaCierre[0] ? $('#fecha-cierre').html(FechaCierre[0]) : $('#fecha-cierre').parent().addClass('hide');
        FechaCierre[1] ? $('#hora-cierre').html(FechaCierre[1]) : $('#hora-cierre').parent().addClass('hide');
        calEvent.Tipo ? $('#tipo').html(calEvent.Tipo) :  $('#tipo').parent().addClass('hide');
        calEvent.Lugar ? $('#lugar').html(calEvent.Lugar) : $('#lugar').parent().addClass('hide');
        calEvent.Fecha_encuentro ? $('#fecha-encuentro').html(calEvent.Fecha_encuentro) : $('#fecha-encuentro').parent().addClass('hide');
        calEvent.Hora_encuentro ? $('#hora-encuentro').html(calEvent.Hora_encuentro) : $('#hora-encuentro').parent().addClass('hide');
        calEvent.Punto_encuentro ? $('#punto-encuentro').html(calEvent.Punto_encuentro) : $('#punto-encuentro').parent().addClass('hide');
        calEvent.Material_individual ? $('#material-individual').html(calEvent.Material_individual) : $('#material-individual').parent().addClass('hide');
        calEvent.Material_equipo ? $('#material-equipo').html(calEvent.Material_equipo) : $('#material-equipo').parent().addClass('hide');
        calEvent.Ficha ? $('#ficha').html(calEvent.Ficha) : $('#ficha')
        $("#modal").modal();
    }

Or you can use an if it works better for you:

        if(calEvent.title){
            $('#titulo').html(calEvent.title);
        } else{
            $('#titulo').parent().addClass('hide');
        }