MNibor's questions

I have an aesthetic problem with the bootstrap 4 carousel that I am implementing. When I open it, it shows me a dark line to the right of the container, the carousel css is as follows:

/* Carousel base class */
.carousel {
   margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
   bottom: 3rem;
   z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
   background-color: white;
}

What I get is more or less this:

I managed to capture the moment when the image slides from one to another and you can see that between the images there is that dark line. I want to remove it and I don't know how to do it. If someone can give me a hand, I would greatly appreciate it... THANK YOU !!!

I am developing a map in LeafLet and Laravel 6 . From a route I load all the markers that I later show on the map.

In the controller I have this method where I get all the published bookmarks.

public function getInstallations(){
    $installations = Installation::where('status', 'PUBLISHED')->get();

    $data = [];
    foreach ($installations as $key => $value) {
        $data[$key + 1] = [
            'id' => $value->id,
            'uuid' => $value->uuid,
            'user_id' => $value->user_id,
            'category_id' => $value->category_id,
            'company' => $value->company,
            'name' => $value->name,
            'lat' => $value->lat,
            'lng' => $value->lng,
            'description' => $value->description,
            'on_grid' => $value->on_grid,
            'created_at' => $value->created_at,
            'pin' => $value->pin,
        ];
    }
    return response()->json($data);
}

Then in the view in the JS part I do the following:

var map = L.map('mapid').setView([{{ config('leaflet.map_center_latitude') }}, {{ config('leaflet.map_center_longitude') }}], {{ config('leaflet.zoom_level') }});

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

Variables

{{ config('leaflet.map_center_latitude') }}, {{ config('leaflet.map_center_longitude') }}], {{ config('leaflet.zoom_level') }}

I define them in a Leaflet configuration file that I have hosted in the config folder of the Laravel application.

I then access the data path from JS and store it in the getData variable:

let getData = `{{ route('getInstallations') }}`;

    const api = new XMLHttpRequest();
    api.open('GET', getData, true);
    api.send();

    var marker = {};

    api.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200) {
            let datos = JSON.parse(this.responseText);
            $.each(datos, function(index, item) {
                var instIcon = L.icon({
                    iconUrl: `/images/` + item.pin ,
                    iconSize:     [22, 32],     // size of the icon
                    iconAnchor:   [11, 32],     // point of the icon which will correspond to marker's location
                    popupAnchor:  [0, -33]      // point from which the popup should open relative to the iconAnchor
                });

                marker = new L.marker([item.lat, item.lng], {icon: instIcon})
                    .bindPopup('<p class="popup__header"> <strong>'+ item.name + '</strong><div class="separator-2"></div>' + '<button type="button" id="sendData" class="btn btn-success btn-sm btn-block dataModal sendData" data-toggle="modal" data-target="#dataModal" >Detalles</button> </p>' ).addTo(map);
            });

            $(document).ready(function(){
                $(document).on('click', '.sendData', function(){
                    var id=$(this).val(item.id);
                    var selector = '.modalTitle' + item.id;
                    alert(selector);
                    var name = $(selector).text();
                    $(".modalTitle").html(name);
                });
            });
        }
    }

I convert the getDatato another variable datosand loop through it to create the markers. The result is something like this:

In the construction of those pins, I define the option that they have a popup that would be shown in:

The goal is that clicking on "DETAILS" opens a bootstrap modal where you can show the record detail with its associated images.

The modal form code is from bootstrap 4:

<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title modalTitle" id="dataModalLabel"></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
            </button>
        </div>
        <div class="modal-body">
            <img class="img-fluid img-rounded" src="{{ asset('/images/generica.png') }}" alt="">
            <small class="text-muted float-right mt-2">Creado por: Usuario | 2019-12-04</small>
            <br><br>
            <p class="mt-2">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary mt-3" data-dismiss="modal">Cerrar</button>
            @auth ()
                <button type="button" class="btn btn-warning mt-3">Editar</button>
            @endauth
        </div>
        </div>
    </div>
</div>

The problem I have is that I cannot send the data via that button generated in the js code... if someone can give me a hand... I would appreciate it again

I am with a project that handles products that are published by users. Products allow other users to ask questions about the products, and the author of the post can reply. I have the problem in the comments section.

In the comments table it has an id field, user_id (the one that creates the question), parent_id (it would be a field where I store the "answer" and that would be the id of the question in the same table) and the body. There are other fields that would not be interesting to expose. The point is that to display the comments that the publication has, I do $comments = Comment::orderBy('parent_id')->get();. It turns out that if I do that query in the DB, and it returns:

After Laravel does this:

that is, the order that I require does not take it into account and returns me sorted by id... how can I solve this?

@foreach($product->comments as $comment)
            @if($comment->id === $comment->parent_id)

            <li class="media mb-3 pos-relative">
                <a href="#">
                    <img src="/images/users/{{ $comment->user->profile->image }}" alt="{{ $comment->user->name }}" class="d-flex mr-3 img-thumbnail img-fluid" style="width:50px; height:50px; border-radius:50%">
                </a>


                <div class="media-body">
                    <ul class="list-inline blog-meta text-muted">
                        <li class="list-inline-item"><i class="fa fa-user"></i> <a href="#">{{ $comment->user->name }}</a></li>
                        <li class="list-inline-item"><i class="fa fa-calendar"></i> {{ $comment->created_at }}</li>
                    </ul>
                    <p>{{ $comment->body }}</p>
                    @auth
                        @if($product->user_id === Auth::user()->id && $comment->user_id != Auth::user()->id) 
                        <p>
                            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#comment{{ $comment->uuid }}" aria-expanded="false" aria-controls="comment{{ $comment->uuid }}">
                                Responder
                            </button>
                        </p>
                        <div class="collapse" id="comment{{ $comment->uuid }}">
                            <div class="card card-body">
                                {!! Form::open(['route' => 'replyProducts']) !!}
                                    <div class="form-group">
                                        {{ Form::text('id', $product->id , ['class' => 'form-control', 'id' => 'id', 'hidden']) }}
                                        {{ Form::text('parent_id', $comment->id , ['class' => 'form-control', 'id' => 'parent_id']) }}
                                    </div>
                                    <div class="form-group">
                                        {{ Form::textarea('body', null, ['class' => 'form-control', 'id' => 'comment', 'rows' => '4', 'onKeyDown' => 'valida_longitud()', 'onkeyup' => 'valida_longitud()', 'onpaste' => 'return false']) }}
                                    </div>
                                    <div class="form-group">
                                        {{ Form::submit ('Responder', ['class' => 'btn btn-success btn-lg float-right']) }}
                                    </div>
                                {!! Form::close() !!}
                            </div>
                        </div>
                    @endif

                    @endauth
                </div>
            </li>
            @else
                <li class="media mb-3 pos-relative ml-5">
                    <a href="#">
                        <img src="/images/users/{{ $comment->user->profile->image }}" alt="{{ $comment->user->name }}" class="d-flex mr-3 img-thumbnail img-fluid" style="width:50px; height:50px; border-radius:50%">
                    </a>
                    <div class="media-body">
                        <ul class="list-inline blog-meta text-muted">
                            <li class="list-inline-item"><i class="fa fa-user"></i> <a href="#">{{ $comment->user->name }}</a></li>
                            <li class="list-inline-item"><i class="fa fa-calendar"></i> {{ $comment->created_at }}</li>
                        </ul>
                        <p>{{ $comment->body }}</p>
                    </div>
                </li>
            @endif
        @endforeach

inside a foreach first I check if the id of the comment is equal to the parent_id. If they are the same, it is a question. If the comment id differs from the parent_id, it is a response and all I do is indent the response.

Schema::create('comments', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->uuid('uuid')->unique()->nullable()->index();

        $table->unsignedBigInteger('user_id')->nullable();
        $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade')->onUpdate('cascade');

        $table->unsignedBigInteger('parent_id')->nullable();
        $table->foreign('parent_id')->references('id')->on('comments')->onDelete('cascade')->onUpdate('cascade');

        $table->string('body');
        $table->morphs('commentable');
        $table->timestamps();
    });

that is the comments table

the result that the controller sends to the view is fine... I don't understand why it is modified in the view...

I have a page that loads data

The button code is as follows:

<div class="elements-list clearfix">
    {{-- Button to Open the Modal --}}
    <button type="button" class="pull-left margin-clear btn btn-sm btn-info btn-animated" data-toggle="modal" data-target="#myModal">
    Ampliar<i class="fa fa-eye"></i>
    </button>

    <a href="{{ $link->link }}" target="_blank" class="pull-right margin-clear btn btn-sm btn-default-transparent btn-animated">Ir a la Página<i class="fa fa-link"></i></a>
</div>

with the button I fire the modal that is shown like this:

The code that loads the modal is as follows:

{{-- The Modal --}}
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
        {{-- Modal Header --}}
        <div class="modal-header">
            <h4 class="modal-title">{{ $link->title }}</h4>
            <button type="button" class="close" data-dismiss="modal">&times; 
 </button>
        </div>

        {{-- Modal body --}}
        <div class="modal-body">
            {{ $link->description }}
        </div>

        {{-- Modal footer --}}
        <div class="modal-footer">
            <a href="{{ $link->link }}" class="btn btn-info">Ir a la Página</a>
            <a href="#" class="btn btn-danger" data-dismiss="modal">Cerrar</a>
        </div>
    </div>
   </div>
  </div>

The problem I have is that no matter which button I press out of all the data displayed, it always shows me the data from the last record displayed on the page. How can i fix this ? Can someone give me a hand ? From already thank you very much

I have some CATEGORIES and the categories have an "item" that I called ENTRY

Schema::create('categories', function (Blueprint $table) {
      $table->increments('id');
      $table->string('name', 191);
      $table->string('slug', 191)->unique();

      $table->unsignedInteger('entry_id')->default(1);
      $table->foreign('entry_id')->references('id')->on('entries')->onDelete('cascade')->onUpdate('cascade');

      $table->timestamps();
    });

Create the relationships in the corresponding models.

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;

class Category extends Model
{
    protected $fillable = ['name', 'slug', 'entry_id'];

    public function posts(){
        return $this->hasMany(Post::class);
    }

    public function entries(){
        return $this->belongsTo(Entry::class);
    }
}

and in Entry

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;

class Entry extends Model
{
    protected $fillable = ['name', 'slug'];

    // Vendrian a ser los "Rubros" -> 'POST', 'EVENT', 'COURSE', 'INSTALLATION', 'CLASSIFIEDS'
    public function categories(){
        return $this->hasMany(Category::class);
    }

    public function events(){
        return $this->hasMany(Event::class);
    }

    public function courses(){
        return $this->hasMany(Course::class);
    }

    public function installations(){
        return $this->hasMany(Installation::class);
    }

    public function classifieds(){
        return $this->hasMany(Classified::class);
    }
}

Now when I want to display everything in a datatables on the backend I do the following:

public function index()
    {
        $categories = Category::all();
        return view('backend-admin.categories.index', compact('categories'));
    }

and in the index.blade.php I do

@foreach($categories as $category)
              <tr>
                            <td>{{ $category->id }}</td>
                            <td>{{ $category->name }}</td>
                            <td>{{ $category->entry->name }}</td>
                            <td width="105px">
                                {!! Form::open(['route' => ['categories-admin.destroy', $category->id], 'method' => 'DELETE']) !!}
                                <a href="{{ route('categories-admin.show', $category->id) }}" class="btn btn-primary btn-sm"><i class="fa fa-eye"></i></a>
                                <a href="{{ route('categories-admin.edit', $category->id) }}" class="btn btn-warning btn-sm"><i class="fa fa-edit"></i></a>
                                <span><button class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button></span>
                                {!! Form::close() !!}
                            </td>
                        </tr>
                        @endforeach

Can someone explain to me what I'm doing wrong?

I have a php page that loads the following table: the code is this:

<table id="tabla" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Usuario</th>
                    <th scope="col">Sector</th>
                    <th scope="col">Ultimo Ingreso</th>
                    <th scope="col">Acción</th>
                </tr>
            </thead>
            <tbody>
                <?php if ($arrDatos) {
                foreach ($arrDatos as $row) { ?>
                <tr>
                    <td>
                        <?php echo $row['id']; ?>
                    </td>
                    <td>
                        <?php echo $row['usuario']; ?>
                    </td>

                    <td>
                        <?php
                      if ($row['sector'] == 1) { ?>
                            <p>Administración</p>
                            <?php } else { ?>
                            <p>Producción</p>
                            <?php } ?>
                    </td>

                    <td>
                        <?php echo $row['ultimo_acceso']; ?>
                    </td>

                    <td>
                        <div class="btn-group">
                            <a href="#" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal" data-id=" <?echo $row[ 'id'];?>"><i class="fas fa-eye"></i></a>

                            <a href="editar.php?var=<?php echo base64_encode($row[ 'id']);?>" class="btn btn-success btn-sm">
                        <i class="fas fa-edit"></i>
                        </a>
                            <a href="eliminar.php?var=<?php echo base64_encode($row[ 'id']);?>" class="btn btn-danger btn-sm">
                        <i class="fas fa-trash-alt"></i>
                        </a>
                        </div>
                    </td>
                </tr>
                <?php }} ?>
            </tbody>
        </table>

I was reading that the datatables itself incorporates its own viewer for each record: dtybootstrap

It turns out that I followed all the steps explained in the documentation, as you can see I don't get the first button that you see in the image:

in the head I have the following:

<link rel="stylesheet" 
 href="../../componentes/bootstrap/css/bootstrap.min.css">
 <script src="../../componentes/jquery-3.3.1.min.js"></script>
 <script src="../../componentes/popper.min.js"></script>
 <script src="../../componentes/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" type="text/css" 
  href="../../componentes/DataTables/datatables.css">
  <script type="text/javascript" charset="utf8" 
  src="../../componentes/DataTables/datatables.js"></script>
  <link rel="stylesheet" href="../../componentes/DataTables/Buttons-
  1.5.1/css/buttons.bootstrap4.min.css">
  <link rel="stylesheet" href="../../componentes/DataTables/Responsive-
  2.2.1/css/responsive.bootstrap4.min.css">
  <script type="text/javascript" charset="utf8" 
  src="../../componentes/DataTables/Buttons-
  1.5.1/js/buttons.bootstrap4.min.js"></script>
  <script type="text/javascript" charset="utf8" 
  src="../../componentes/DataTables/Responsive-
  2.2.1/js/dataTables.responsive.min.js"></script>
  <script type="text/javascript" charset="utf8" 
  src="../../componentes/DataTables/Responsive-
  2.2.1/js/responsive.bootstrap4.min.js"></script>

  <link href="../../componentes/fontawesome/on-server/css/fontawesome-
  all.css" rel="stylesheet">
  <script>
  $(document).ready(function() {
    $('#tabla').DataTable({
        language: {
            "sProcessing": "Procesando...",
            "sLengthMenu": "Mostrar _MENU_ registros",
            "sZeroRecords": "No se encontraron resultados",
            "sEmptyTable": "Ningún dato disponible en esta tabla",
            "sInfo": "Mostrando del _START_ al _END_ de un total de _TOTAL_ 
     registros",
            "sInfoEmpty": "Mostrando de 0 al 0 de un total de 0 registros",
            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix": "",
            "sSearch": "Buscar: ",
            "sUrl": "",
            "sInfoThousands": ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst": "Primero",
                "sLast": "Último",
                "sNext": "Siguiente",
                "sPrevious": "Anterior"
            },
            "oAria": {
                "sSortAscending": ": Activar para ordenar la columna de 
        manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de 
        manera descendente"
            }
        },

        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal({
                    header: function(row) {
                        var data = row.data();
                        return 'Details for ' + data[0] + ' ' + data[1];
                    }
                }),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll({
                    tableClass: 'table'
                })
            }
        }
    });
});

</script>

At first I was breaking my head with the bootstrap modal but I realized that I can create a modal with the datatables itself, I don't know why it's not working for me... can someone give me a hand? DO YOU RECOMMEND THAT I DO IT IN THE DATATABLES MODE? OR THE BOOTSTRAP ONE?

Following the Google Maps documentation, I was able to import the data from a mysql DB.
I was even able to apply marker type analysis and add labels to the markers, as seen in the image below.

Now, I would like to remove that label, and put in different pins. I define the tags in the following routine when starting the js script:

var customLabel = {
    1: {
      label: 'S'
    },
    2: {
      label: 'E'
    },
    3: {
      label: 'M'
    },
    4: {
      label: 'T'
    },
  };

the marker is set in the following routine:

var icon = customLabel[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            label: icon.label
          });

I could in that same routine where I define to put the letter S if the value is 1, ..., etc choose the type of icon to show? I tried to follow the google maps documentation about the types of markers, but without results... Can someone give me a hand? I build the customLabel from a base field that has the values ​​1, 2, 3, ... Etc

I would like to use these icons

CODE I HAVE ON THE PAGE:

TABLE FROM WHERE I TAKE THE DATA:

CREATE TABLE `markers` (
 `id` bigint(20) UNSIGNED NOT NULL,
 `tipo` varchar(60) NOT NULL,
 `lat` varchar(30) NOT NULL,
 `lng` varchar(30) NOT NULL,
 `descripcion` varchar(500) DEFAULT NULL,
 `realizo` varchar(200) NOT NULL,
 `idtipo` tinyint(4) NOT NULL,
 `visible` tinyint(1) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

MAIN CODE OF THE PAGE THAT LOADS THE DATA:

<!DOCTYPE html >
  <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title>Mapa de Google Maps</title>
<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>

<body>
  <div id="map" style="width: 800px; height:500px;"></div>

<script>
  var customLabel = {
    1: {
      label: 'S'
    },
    2: {
      label: 'E'
    },
    3: {
      label: 'M'
    },
    4: {
      label: 'T'
    },
  };

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(-34.609555, -58.388772),
      zoom: 10
    });
    var infoWindow = new google.maps.InfoWindow;

      downloadUrl('resultado.php', function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
          var name = markerElem.getAttribute('name');
          var address = markerElem.getAttribute('address');
          var type = markerElem.getAttribute('type');
          var point = new google.maps.LatLng(
            parseFloat(markerElem.getAttribute('lat')),
            parseFloat(markerElem.getAttribute('lng')));

          var infowincontent = document.createElement('div');
          var strong = document.createElement('strong');
          strong.textContent = name
          infowincontent.appendChild(strong);
          infowincontent.appendChild(document.createElement('br'));

          var text = document.createElement('text');
          text.textContent = address
          infowincontent.appendChild(text);
          var icon = customLabel[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            label: icon.label
          });
          marker.addListener('click', function() {
            infoWindow.setContent(infowincontent);
            infoWindow.open(map, marker);
          });
        });
      });
    }

  function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;

    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request, request.status);
      }
    };

    request.open('GET', url, true);
    request.send(null);
  }

  function doNothing() {}
</script>

<input type="text" name="lat" value="">
<input type="text" name="lng" value="">
<script async defer src="https://maps.googleapis.com/maps/api/js?key=*******YOUR API KEY***********&callback=initMap">
</script>
</body>
</html>

FILE CODE result.php where I get the information from the database:

<?php
 session_start(); //Iniciar una nueva sesión o reanudar la existente
 require '../../includes/conexion.php';
 include '../../includes/funcs_pdo.php';

 function parseToXML($htmlStr){
  $xmlStr=str_replace('<','&lt;',$htmlStr);
  $xmlStr=str_replace('>','&gt;',$xmlStr);
  $xmlStr=str_replace('"','&quot;',$xmlStr);
  $xmlStr=str_replace("'",'&#39;',$xmlStr);
  $xmlStr=str_replace("&",'&amp;',$xmlStr);
  return $xmlStr;
 }

// Select all the rows in the markers table
$conexion = new Conexion();
$stmt = $conexion -> prepare("SELECT id, tipo, lat, lng, descripcion, idtipo FROM markers WHERE visible=1 ORDER BY id DESC");
$stmt->execute();

header("Content-type: text/xml");

// Start XML file, echo parent node
echo '<markers>';

if ($stmt->rowCount() > 0) {
  while($row_markers=$stmt->fetch(PDO::FETCH_ASSOC)){
   echo '<marker ';
   echo 'name="' . parseToXML($row_markers['tipo']) . '" ';
   echo 'address="' . parseToXML($row_markers['descripcion']) . '" ';
   echo 'lat="' . $row_markers['lat'] . '" ';
   echo 'lng="' . $row_markers['lng'] . '" ';
   echo 'type="' . $row_markers['idtipo'] . '" ';
   echo '/>';
  }
 }
 // End XML file
 echo '</markers>';

All this information appears in the Google Maps documentation and I adapted it with my connection to the database and the result of this is the map that appears in the image above.

This is one of many questions or queries that I have about the implementation of Google Maps in a web page. The first one is that by entering the following line with my APIKEY the map IS NOT SHOWN:

<script src="https://maps.googleapis.com/maps/api/js?key=BLABLABLABLABLABLABLABLABLABLABLA&callback=initMap" async defer></script>

On the other hand, if I add this other line before, if it is shown !!!

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Seeing with F12 it tells me that I have included the google maps api many times... The code that I have armed is the following:

<head>
<meta charset="utf-8">
<title>Mapa</title>
<style>
  #map-canvas {
    height: 800px;
    width: 100%;
    box-shadow: 5px 5px 5px #888;
  }
 </style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <!--<script src="https://maps.googleapis.com/maps/api/js?key=BLABLABLABLABLABLABLABLABLABLABLA&callback=initMap" async defer></script>-->

I have a small problem with some things that I am doing in js and that are not working well for me.
The issue is like this: I have a select where the user chooses options:

<select id="cobertura" name="cobertura">
  <option value="">Elija una opción...</option>
  <option value="1">Opción 1</option>
  <option value="2">Opción 2</option>
  <option value="3">Opción 3</option>
 </select>

Depending on what the user selects, it will show me or not certain "divs" on the page for what I do:

<div id="div_1" class="contenido">
   <!-- muestro contenido -->
</div>

<div id="div_2" class="contenido">
   <!-- muestro otro contenido diferente -->
</div>

Now, when the user chooses option 3, what I have to show are the two divs for this I do:

<script type="text/javascript">
   $(document).ready(function(){
     $(".contenido").hide();
     $("#cobertura").change(function(){
        $(".contenido").hide();
        $("#div_" + $(this).val()).show();
     });
   });
 </script>

Now, this validation before the select event works fine, that is, it shows me only div1 in option 1 and only div2 in option 2, but I don't know how to build it to show me the two divs with option 3

Can someone guide me?

I have a problem with an SQL statement that I don't use much, in fact this is the first time I use it for practical purposes.

I have two tables, one for questions and one for answers. The structures are these:

questions:

idpregunta / idnota / fecha / detalle (la pregunta en si) /idusuario

answers:

idrespuesta / idpregunta / fecha / detalle (de la respuesta) / idusuario

The functionality is this: for a note, there are unique questions and answers. In other words, each question has only one answer. I do the following:

 SELECT idpregunta, fecha, detalle FROM preguntas WHERE idnota = 1 
 UNION ALL 
 SELECT idpregunta, fecha, detalle FROM respuestas 
 ORDER BY idpregunta DESC, fecha ASC

Now... in questions I have

idpregunta      idnota          fecha       detalle

1                1              xxxx        pregunta 1

2                1              xxxx        pregunta 2

3                2              ccccc       pregunta 3

and in answers I have

idrespuesta        idpregunta      fecha       detalle

1                       1          xxxxx       respuesta 1

when I do that query it shows me for note 1: question 1 ----> answer 1

but when I access note 2 it shows me: question 2 ----------------> answer 1

I'm doing something wrong!!!

Can you give me a hand ?

I have a web page in PHP that displays an ad and below, users can ask questions about the product it sells. When loaded it does the following:

<?php
session_start();
require '../../includes/conexion.php';
include '../../includes/funcs_pdo.php';
include_once("../../includes/analyticstracking.php");

$codigo = base64_decode($_REQUEST['var']);

$conexion = new Conexion();
$stmt = $conexion -> prepare("SELECT T1.id, T1.titulo, T2.detalle as detalle2, T1.disponibles, T1.vendidos, T1.localizacion, T1.detalle, T1.foto, T1.precio, T1.forma_pago, T1.email, T1.telefono, T1.usuario, T1.idusuario, T1.lecturas FROM avisos as T1 INNER JOIN avisos_rubros as T2 ON T1.rubro = T2.id WHERE T1.id = :valor");
$stmt->bindParam(':valor', $codigo);
$stmt->execute();
$row = $stmt->fetch(PDO::FETCH_ASSOC);

$idUsuarioVendedor = $row['idusuario'];

?>

The problem I have is that below I have the classic textarea with a button where the user asks the question, all within a form that I want to send to the same page by post. My question is where do I put the code of said post? after that? or before that code?

I have a table on a page in which I use the datatables.jquery plugin, which for me is very practical and functional.
It turns out that in the table I use two hidden fields, the id and the nrologins (I use the latter to order the data that the sql query brings)

<table id="tabla" class="ui celled stackable table">
        <thead>
            <tr>
                <th hidden>nrologins</th>
                <th hidden>Id</th>
                <th>Nombre</th>
                <th>Apellido</th>
            </tr>
        </thead>

     <tbody>
            <?php
                if ($arrDatos) {
                    foreach ($arrDatos as $row) { ?>
                <tr>
                    <td hidden> <?php echo $row['nrologins']; ?> </td>
                    <td hidden> <?php echo $row['id']; ?> </td>
                    <td> <?php echo $row['nombre']; ?> </td>
                    <td> <?php echo $row['apellido']; ?> </td>
                </tr>
            <?php }} ?>
        </tbody>
      </table>

Now, at full screen, it works fine but when I reduce the screen (or for example I see it from the mobile) the "hidden" fields are shown !!!... How can I prevent this from happening?

I have in a form, three SELECT two of them are multiple and one is a simple select. I am using the semantic ui form validation system. I manage to validate all the fields, but there is only one that does not validate me.

<div class="field">
    <label>País:</label>
    <select id="paisnom" class="ui fluid search dropdown" name="paisnom" required>
         <option value="0"></option>
         <?php
         $conexion = new Conexion();
         $stmt = $conexion -> prepare("SELECT paiscod, paisnom FROM paises ORDER BY paisnom");
         $stmt->execute();

         while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
         if ( $row['paiscod'] == $pais ) { ?>
            <option value = "<?php echo $row['paiscod']?>" selected><?php echo ($row['paisnom'])?></option>
         <?php } else { ?>
             <option value = "<?php echo $row['paiscod']?>"><?php echo ($row['paisnom'])?></option>
         <?php }
         }?>
    </select>
    </div>

that way I load the country select... and then how do I validate it

dropdown3: {
            identifier  : 'paisnom',
            rules: [{
                type   : 'empty',
                prompt : 'Por favor, tiene que elegir un país de residencia'
            }]
        },

so I validate one of the other two select

dropdown2: {
            identifier : 'intereses[]',
            rules: [{
                type   : 'empty',
                prompt : 'Por favor, elija algunos temas de su interés'
            }]
        },

it has the straight brackets at the end because it is a select multiple
that could be happening?
any suggestion?

I have a function in PHP where I process the mail that is the following

function enviarEmailST($email, $nombre, $asunto, $cuerpo){
require_once 'PHPMailer/PHPMailerAutoload.php';
$mail = new PHPMailer();
$mail->isSMTP();
$mail->SMTPAuth = true;
$mail->SMTPSecure = 'tls';// Enable TLS encryption, `ssl` also accepted
$mail->Host = 'mail.correo.com';//Modificar
$mail->Port = 237;//Modificar

$mail->Username = '[email protected]'; //Modificar
$mail->Password = 'password'; //Modificar

$mail->setFrom('[email protected]', 'Empresa - Soporte T$eacute;cnico');//Modificar
$mail->addAddress($email, $nombre);

$mail->Subject = $asunto;
$mail->Body    = $cuerpo;
$mail->IsHTML(true);
$mail->smtpConnect([
'ssl' => [
  'verify_peer' => false,
  'verify_peer_name' => false,
  'allow_self_signed' => true
]
]);

if($mail->send()) {
    return true;
} else {
    return false;
}
}

Occasionally when I set up what would be the sender I do 'Company - Technical Support' but when the mail is received, it does not consider the accents of the sender.

Meanwhile, I have a form from where I send the email.

<form class="ui form" role="form" action="envio.php" method="POST" accept-charset="utf-8" autocomplete="off">
<div class="ui segment">

    <div class="three fields">
        <div class="field">
            <label>Nombre de Usuario:</label>
            <input id="usuario" type="text" name="usuario" value="<?php echo $row['usuario']; ?>">
        </div>

        <div class="field">
            <label>Nombre y Apellido:</label>
            <input id="nombre" type="text" name="nombre" value="<?php echo $row['nombre']; ?>" >
        </div>

        <div class="field">
            <label>Correo Electrónico:</label>
            <input id="email" type="email" name="email" value="<?php echo $row['correo']; ?>" >
        </div>

        <div class="field">
            <label>Id Usuario:</label>
            <input name="id" id="id" type="text" value="<?php echo $id; ?>">
        </div>
    </div>

    <div class="field">
        <label>Asunto:</label>
        <input id="asunto" type="text" name="asunto">
    </div>

    <div class="field">
        <textarea id="cuerpo" type="textarea" name="cuerpo" rows=15 ></textarea>
    </div>

    <!--Botones de envío de la información-->
    <button type="submit" name="save" class="ui green icon button">
      <i class="send icon"></i>
      Enviar
    </button>

</div>
</form>

It turns out that if I put accents in the SUBJECT, they are also ignored when receiving the email, but if I put accents in what would be the BODY of the email, those IF IT TAKES THEM INTO ACCOUNT

Can someone tell me what is going on?

PS: I WANT TO CLARIFY THAT THE EMAIL IS SENT PERFECTLY... THE PROBLEM IS THE ACCENTS OF THE SENDING USER (I mean ME) AND THE ACCENTS OF THE SUBJECT

I have two select, one I load the countries, in the other the provinces that "reacts" according to the country that was selected first. I recently consulted how to bring a country code from a DB and make that country select show me the country that comes from the DB, but I also have a province that I bring from the DB. Now, applying this load, the select of provinces "does not react" since it is not loaded according to the select selected by means of the database data. The select of countries is loaded with:

<select id="pais" class="ui fluid search dropdown" name="pais">
        <option value="0"></option>
        <?php
            $conexion = new Conexion();
            $stmt = $conexion -> prepare("SELECT paiscod, paisnom FROM paises ORDER BY paisnom");
            $stmt->execute();

            while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
            if ( $row['paiscod'] == $pais ) { ?>
                <option value = "<?php echo $row['paiscod']?>" selected><?php echo ($row['paisnom'])?></option>
            <?php } else { ?>
                <option value = "<?php echo $row['paiscod']?>"><?php echo ($row['paisnom'])?></option>
            <?php }
            } 
        ?>
    </select>


    <select id="provincias" class="ui fluid search dropdown" name="selectProvincias">
        <option value=""></option>
    </select>



    $id_pais = $_POST['id_pais'];

    $conexion = new Conexion();
    $stmt = $conexion -> prepare("SELECT provincod, provinnom FROM provincia WHERE paiscod = :valor");
    $stmt->bindParam(':valor', $id_pais);
    $stmt->execute();

    if ($stmt->rowCount() > 0) {
        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {   
            $html .= '<option value = "'.$row['provincod'].'">'. $row['provinnom'].'</option>';
        }
    }
    echo $html;


    <script language="javascript">
    $(document).ready(function() {
        $("#pais").change(function() {
            $("#pais option:selected").each(function() {
                id_pais = $(this).val();
                $.post("provincias.php", {
                    id_pais: id_pais
                }, function(data) {
                    $("#provincias").html(data);
                });
            });
        })
    });
    </script>

QUESTION 1: Why doesn't the js recognize the change in the select country when it takes the value from the DB?

QUESTION 2: How do I pass the code of the province that comes through BD so that it shows me the selected province?

I am using a MySql database, where I store news, a small download and the note.

In the database are all the notes with their corresponding characters.

Then I pull up the titles and downloads and show them in a table that you can click to see them in full.

I did some research and put the following on each record:

<?php echo utf8_decode($row['titulo']); ?>
<?php echo utf8_decode($row['resumen']); ?>

What I get is a very disparate result. The titles there is not one that comes out with the correct characters, and the downloads some come out well and others do not.

See the images:

Could it be that the problem is that I am using netbeans?

I tried to use

<?php echo utf8_encode($row['titulo']); ?>
<?php echo utf8_encode($row['resumen']); ?>

and it works fine but I don't know if it's the best solution

I have a button in the information or help form (the red button with the "i")

I am with semantic ui and according to the documentation I can generate a modal defining the following:

<div class="ui modal">
   <i class="close icon"></i>
   <div class="header">
      Modal Title
   </div>
   <div class="image content">
     <div class="image">
         An image can appear on left or an icon
     </div>
    <div class="description">
       A description can appear on the right
    </div>
   </div>
   <div class="actions">
    <div class="ui button">Cancel</div>
    <div class="ui button">OK</div>
   </div>
  </div>

that would be the content of the modal... while I must define

     $('.ui.modal')
       .modal()
     ;

Now... I don't know how to bind the button (let's say it has id="help") to the event of clicking on it to show that modal message...

I have a button:

<div class="ui container">
   <a href="#" class="fluid ui violet button"><i class="mail icon"></i>  Enviar Mensaje</a>
</div>

below I have the initialization of the popup message:

<script type="text/javascript">
  $('.activating.element')
    .popup()
  ;

  $('.ui.popup')
    .popup({
    title   : 'Atención:',
    content : 'Esta funcionalidad sólo está disponible para usuarios registrados'
  })
  ;
</script>

How do I link that popup message with the button that I defined above? I read the documentation but I did not understand.

I have a button on the form that is used to upload an image. But applying the typical code does not look good...

          <div class="ui segment">
        <div class="field">
          <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
          <label for="#elegir">Elige el archivo a subir: </label>
          <input id="elegir" name="uploadedfile" type="file" /><br />
          <input type="submit" class="ui blue inline button" value="Subir archivo" />
        </div>
      </div>

I searched the semantic-ui documentation but didn't find an implementation of this item...

I am using Semantic-ui and on a page I load a table, which in the last two cells of each row, I place two icons that should behave as links to two other processes such as: edit the record, or delete it. Now... according to the semantic-ui people's documentation they say that you could load each row of the table in the following way:

   <tr>
     <td>Cell</td>
     <td>Cell</td>
     <td>Cell</td>
     <td>Cell</td>
     <td class="center aligned">
         <i class="eye icon"></i>
     </td>

     <td class="center aligned">
       <i class="delete icon"></i>
     </td>
   </tr>

Now, I implement each row as follows inside a PHP while loop

<tbody>
      <?php while($row = $resultado->fetch_array(MYSQLI_ASSOC)) { ?>
        <tr>
          <td><?php echo $row['id']; ?></td>
          <td><?php echo $row['nombre']; ?></td>
          <td><?php echo $row['usuario']; ?></td>
          <td><?php echo $row['correo']; ?></td>
          <td><?php echo $row['last_session']; ?></td>
          <td class="center aligned">
            <i class="eye icon">
              <a href="modificar.php?id=<?php echo $row['id']; ?>"><p>Ver</p></a>
            </i>
          </td>

          <td class="center aligned">
            <i class="delete icon">
              <a href="eliminar.php?id=<?php echo $row['id']; ?>"><p>Borrar</p></a>
            </i>
          </td>
        </tr>
        <?php } ?>
    </tbody>

There I had to make a weird trick to put a "see" to have a link since I don't know how to make the icon become a "button"... or finally place a button in that cell... I don't know... Can someone who has experience with semantic-ui give me a hand? Thank you very much already !!!

See how it looks !!!: HORRIBLE !!!