Each Database Row enter a separate DIV

Asked

Viewed 189 times

1

Good afternoon I’m trying to make a query Mysqli , ie , I want each line of the database enters a separate div , I searched and found nothing resembling what I think is in a difficult way to understand

HTML code

<div id="inicio" class="col-md-4 col-sm-4 col-xs-12 profile_details">
  <div class="well profile_view">
    <div class="col-sm-12">
      <h4 class="brief"><i>Digital Strategist</i></h4>
      <div class="left col-xs-7">
        <h2 id="inicio"></h2>
        <p><strong>About: </strong> Web Designer / UX / Graphic Artist / Coffee Lover </p>
        <ul class="list-unstyled">
          <li><i class="fa fa-building"></i> Address: </li>
          <li><i class="fa fa-phone"></i> Phone #: </li>
        </ul>
      </div>
      <div class="right col-xs-5 text-center">
        <img src="../images/img.jpg" alt="" class="img-circle img-responsive">
      </div>
    </div>
    <div class="col-xs-12 bottom text-center">
      <div class="col-xs-12 col-sm-6 emphasis">
        <p id="inicio" class="ratings">
          <a>4.0</a>
          <a href="#"><span class="fa fa-star"></span></a>
          <a href="#"><span class="fa fa-star"></span></a>
          <a href="#"><span class="fa fa-star"></span></a>
          <a href="#"><span class="fa fa-star"></span></a>
          <a href="#"><span class="fa fa-star-o"></span></a>
        </p>
      </div>
      <div class="col-xs-12 col-sm-6 emphasis">
        <button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
                                                    </i> <i class="fa fa-comments-o"></i> </button>
        <button type="button" class="btn btn-primary btn-xs">
                                                    <i class="fa fa-user"> </i> View Profile
                                                </button>
      </div>
    </div>
  </div>
</div>

Javascript

$("document").ready(function() {

  //CarregarFuncionarios
  $.getJSON("../include/carrFunc.php", function(data) {
    var items = [];
    i = 0;
    $.each(data, function(i) {
      items.push("<option value='" + data[i].idFuncionario + "'>" +
        data[i].nomeFunc + "</option>");
    });
    $("#inicio").append(items);
  });

});

PHP 

<?php
include "conexao.php";

$sql = "SELECT idFuncionario,nomeFunc FROM tbfuncionario;";
$result = $conn->query($sql);
$data = array();
if ($result->num_rows > 0) {
    // output data of each row
    $data = $result->fetch_all( MYSQLI_ASSOC );
    //print_r ($data);
} else {
    echo "Nenhum resultado encontrado.";
}       
$conn->close();
//echo "<br>";
echo json_encode( $data );
?>

Imagem Exemplo

php javascript html ajax mysqli

  • What gives console.log(data); on the getJSON callback? This HTML you have on the page is what each row of the database should fill?

  • I didn’t really understand the use of <option> there in javascript

  • @Sergio alias put more things there , I have this form ready in HTML but wanted to use the effects that it has

  • @Geeksilva then I used the same code that I use to load the combobox .. I do not have much knowledge in web . but wanted each bank line to fill a div on the page

  • Dude, Voce has more than one "id" with the same name "start" allocated in several Tags, so the browser will never put it in the right place :( Another point is that Voce is giving an append of a <option> without having any <select> on your page :(

  • Explaining better ...precise that appears the fields of each user ex:name , address and etc, ... and precise that appears in separate Ivs , according to each data

  • What gives console.log(data); in the callback of getJSON?

  • Uncaught Referenceerror: data is not defined at <Anonymous>:1:13 (Anonymous) @ VM5597:1

  • @Sergio varios Object ) [Object, Object, Object, Object, Object, Object, Object, Object, Object]

  • @Somdesp ok, and what gives console.log(typeof data, JSON.stringify(data));?

  • @Sergio Appears all database data

  • @Somdesp can you put an example of one of these objects here? so we can answer better?

  • @Sergio one of the lines {"idFuncnario":"7","nomeFunc":"Anderson Silva"} that I need to appear in each div or separated in html

  • And in the HTML where this data should be inserted?

  • @Sergio in HTML when I use $("#start"). append(items[i]); in JS and <div name="start" id="start"> in html appears all within the same div

  • But on what HTML? element that div or span? to give an example of how to mount it. And by the way, these objects only have 2 keys (idFunc and function)?

  • @Sergio I wanted to put in div .. at first would have these keys after I would add more ...I will put an image at the end to better understand

  • @Sergio added the image of the example I want to do

Show 13 more comments

1 answer

2


To do this you have to iterate the JSON that you receive more or less as you have in the question.

You can do this in a giant HTML concatenation, or use templates or existing HTML chunks.

Using your HTML, and the JSON you showed you could do something like in the example below. It’s template style, and it’s a good way to learn and have control over the code. The idea is to put + obj.chave + where necessary.:

function gerarFunctionario(obj){
 return '<div class="well profile_view">'+
    '<div class="col-sm-12">'+
      '<h4 class="brief"><i>Digital Strategist</i></h4>'+
      '<div class="left col-xs-7">'+
        '<h2>'+obj.nomeFunc+'</h2>'+
        '<p><strong>About: </strong> Web Designer / UX / Graphic Artist / Coffee Lover </p>'+
        '<ul class="list-unstyled">'+
          '<li><i class="fa fa-building"></i> Address: </li>'+
          '<li><i class="fa fa-phone"></i> Phone #: </li>'+
        '</ul>'+
      '</div>'+
      '<div class="right col-xs-5 text-center">'+
        '<img src="../images/img.jpg" alt="" class="img-circle img-responsive">'+
      '</div>'+
    '</div>'+
    '<div class="col-xs-12 bottom text-center">'+
      '<div class="col-xs-12 col-sm-6 emphasis">'+
        '<p id="inicio" class="ratings">'+
          '<a>4.0</a>'+
          '<a href="#"><span class="fa fa-star"></span></a>'+
          '<a href="#"><span class="fa fa-star"></span></a>'+
          '<a href="#"><span class="fa fa-star"></span></a>'+
          '<a href="#"><span class="fa fa-star"></span></a>'+
          '<a href="#"><span class="fa fa-star-o"></span></a>'+
        '</p>'+
      '</div>'+
      '<div class="col-xs-12 col-sm-6 emphasis">'+
        '<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">'+
            '</i> <i class="fa fa-comments-o"></i> </button>'+
        '<button type="button" class="btn btn-primary btn-xs">'+
             '<i class="fa fa-user"> </i> View Profile'+
         '</button>'+
      '</div>'+
    '</div>'+
  '</div>';
}

var data = [{
    "idFuncionario": "7",
    "nomeFunc": "Anderson Silva"
  },
  {
    "idFuncionario": "2",
    "nomeFunc": "Maria Silva"
  }
]

var html = data.map(gerarFunctionario).join('');
$("#inicio").html(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inicio" class="col-md-4 col-sm-4 col-xs-12 profile_details">

</div>

  • It worked. Thank you very much

  • Obs: To pull from the bench I just add the strings inside the ne array

  • @Somdesp places the last two lines inside the ajax function, where you have the $.each and delete what you have there now. The function gerarFunctionario you can put in the 2nd line of the code that is in the question. Before the getJSON.

  • Now I am with another problem kkk and to do the same : I am using the similar function to Insert but I can not use the buttons ID inside Json

  • @Somdesp asks another question. Remember that you can only have 1 ID with the same name on the page, i.e., you cannot repeat Ids.

  • Thank you I just asked the question

Show 1 more comment

Browser other questions tagged php javascript html ajax mysqli

You are not signed in. Login or sign up in order to post.