Поле сетки отображается неправильно при вызове HTML данных с использованием AJAX - PullRequest
Новая
       122

Поле сетки отображается неправильно при вызове HTML данных с использованием AJAX

1 голос
/ 07 августа 2020

Я разработал сетку, используя HTML и CSS. Когда пользователь нажимает на сетку, я показываю другую сетку, используя PHP и AJAX.

Мой код: 

$(document).ready(function() {
  $(document).on('click', '.showme', function() {

    var id = $(this).attr("id");
    var num = $(this).attr("class");
    var poststr = "request=" + num + "&moreinfo=" + id;
    $.ajax({enter code here
      url: "http://kiranasaman.com/mobiledesign/testme.php",
      cache: 0,
      data: poststr,
      success: function(result) {
        document.getElementById("grid").innerHTML = result;
      }
    });
  });
});
main {
  display: block;
  box-sizing: border-box;
  width: 90%;
  margin: 1em auto;
  padding: 1em 2em;
  color: #000;
  background-color: rgba(204, 204, 204, .7);
  border: .07em solid rgba(0, 0, 0, .5);
  border-radius: .5em;
}

button {
  text-align: center;
  font-size: 100%;
  border-radius: 1em;
  border: .1em solid #333;
  padding: 1em;
  width: 8em;
  margin: .25em;
  width: 23%;
}

button strong {
  display: block;
  box-sizing: border-box;
  line-height: 1.35;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  font-size: 200%;
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  margin: 0 auto;
  border: .1em solid #fff;
}

button:hover,
button:focus {
  background-color: #060;
  box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  color: #fff;
  outline: none;
}

.gridmine {
  display: -ms-grid;
  -ms-grid-columns: auto 1fr;
  -ms-grid-rows: auto 1fr auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto minmax(min-content, 1fr) auto;
}

.title {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  grid-column: 1;
  grid-row: 1;
}

.title1 {
  ms-grid-column: 2;
  -ms-grid-row: 1;
  grid-column: 2;
  grid-row: 1;
}

.title2 {
  ms-grid-column: 3;
  -ms-grid-row: 1;
  grid-column: 3;
  grid-row: 1;
}

.gridmine button {
  width: 100%;
  height: 100%;
  margin: 0;
}

.gridmine button:hover {
  background-color: #73090D;
}

.gridmine .soman {
  height: 200px;
  font-size: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<main>

  <h2 style="font-size:28px;">Shop by Category</h2>
  <div class="gridmine" id="grid">
    <div class="soman title">
      <button class='request_1 showme' id='rating_1' style="background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);">

      <h3>  Rice, Grains &amp; Flours</h3>
      </button>
    </div>
    <div class="soman title1">
      <button style="background: linear-gradient(to right, #ff9a9e  0%, #fad0c4 100%);">

         <h3>Dals, Pulses &amp; Seeds</h3>
      </button>
    </div>
    <div class="soman title2">
      <button style="background: linear-gradient(to right, #a1c4fd  0%, #c2e9fb 100%);">
        <h3>Sugar &amp; Salts</h3>
      </button>
    </div>

  </div>
</main>

Когда пользователь щелкает по полю, я получаю данные, используя AJAX и PHP, и показываю их, заменяя ту же сетку.

PHP код: 

<?php
  $request_id = preg_replace("/[^0-9]/","",$_REQUEST['request']);
  $request_moreinfo = preg_replace("/[^0-9]/","",$_REQUEST['moreinfo']);

  if($request_id=="1")
  {
      echo "<div id='grids' class='gridmine'>
        <div class='soman titles'>
          <button class='request_2 seeme' id='rating_2' style='background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);'>

          <h3>  Rice</h3>
          </button>
        </div>
        <div class='soman title1s'>
          <button style='background: linear-gradient(to right, #ff9a9e  0%, #fad0c4 100%);'>

             <h3>Grains</h3>
          </button>
        </div>
        <div class='soman title2s'>
          <button style='background: linear-gradient(to right, #a1c4fd  0%, #c2e9fb 100%);'>
            <h3>Flours</h3>
          </button>
        </div>
</div>";
  }
  ?>

Я использую один и тот же класс для всего в обеих сетках. Первая сетка отображается правильно, но вторая сетка, полученная из запроса AJAX PHP, не отображается должным образом, как первая, ее ширина меньше.

Кто-нибудь, пожалуйста, скажите мне что здесь может быть не так? Заранее спасибо.

1 Ответ

1 голос
/ 09 августа 2020

Вы устанавливаете innerHTML из #grid как то, что по сути является одним и тем же элементом, включая контейнер. Если вы удалите контейнер, он должен работать: 

echo "
        <div class='soman titles'>
          <button class='request_2 seeme' id='rating_2' style='background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);'>

          <h3>  Rice</h3>
          </button>
        </div>
        <div class='soman title1s'>
          <button style='background: linear-gradient(to right, #ff9a9e  0%, #fad0c4 100%);'>

             <h3>Grains</h3>
          </button>
        </div>
        <div class='soman title2s'>
          <button style='background: linear-gradient(to right, #a1c4fd  0%, #c2e9fb 100%);'>
            <h3>Flours</h3>
          </button>
        </div>
";

Затем он просто заменит его тремя элементами div с кнопками.

...