AjaxによるPHPエコーはスタイルを与えませんか？

Question

固定されました。

1. は、通常のHTML、CSS、JSやPHPでPHPページを作成しました。

   このファイルの内部では、ユーザーが選択した日付に応じてイベントを表示できるようにしたいと考えました。

2. 日付を選択すると、その日付に関連付けられた値がPHPスクリプトに投稿されます。

3. このPHPスクリプトの中で、投稿された変数はいくつかの条件を経て結果をエコーし​​ていました。

4. このphpスクリプトの結果は、最初のphpページに表示されます。

これまでのところ良いです。

ことは、それはスタイリングクラスを許可する、意味、テキストがスタイル表示したい、 です。

いくつかの調査は行っても、そのような問題は見つからないようです。

たとえば、ページに移動して、入力：12/22/2016に次のように書くと、表示されているデータが表示されます。問題は、は、スタイルに近い場所にはありませんです。

これは、何らかの形で、PHPスクリプトがこれらのスタイルを使用するためにどこにも言及していないためです。

スタイルは初期のPHPページ（html/css/js/php）で使用されており、結果が表示されます。

最初は、そのスタイルファイルが記述されているのとまったく同じページで呼び出されるため、結果のスタイルが認識されると思いました。

これは、PHPスクリプトの結果、それ：これは、PHPスクリプトで投稿することをJavaScriptコードで、どこで、同じページの特定のdivに結果を表示

<div class="tab-pane" role="tabpanel"> 

         <div class="container day-events"> 

          <div class="row event-list"> 

           <div class="event-list-time col-md-3 col-sm-3 center" style="background-image: url(/lascruces_styles/img/events-img/event.jpg);"> 

            <p class="event-list-start-time">2016-12-22 00:00:00</p> 

            <hr class="event-list-time-divider"> 

            <p class="event-list-end-time">2016-12-22 00:00:00</p> 

           </div> 

           <div class="event-list-info col-md-9 col-sm-9"> 

            <h2 class="event-list-name">dfgdfgdfg</h2> 

            <p>Organized by <span class="event-list-organizer"><a href="#">yyyyyyy</a></span></p> 

            <p class="event-list-description"><p>dffghfghgfhf</p></p> 

            <a href="#"><button type="button" class="btn more-info-list">More Information</button></a> 

           </div> 

          </div> 

         </div> 

をこれは、コードがこのメッセージを介してすべての方法を述べたPHPページである、であるJS：

PHP：

$result = mysqli_query($conn, $sql); 
    if (mysqli_num_rows($result) > 0) { 
    while ($row = mysqli_fetch_assoc($result)) { 
     echo '<div class="tab-pane" role="tabpanel"> 
         <div class="container day-events"> 
          <div class="row event-list"> 
           <div class="event-list-time col-md-3 col-sm-3 center" style="background-image: url(/lascruces_styles/img/events-img/event.jpg);"> 
            <p class="event-list-start-time">'.$row['Start_Date'].'</p> 
            <hr class="event-list-time-divider"> 
            <p class="event-list-end-time">'.$row['End_Date'].'</p> 
           </div> 
           <div class="event-list-info col-md-9 col-sm-9"> 
            <h2 class="event-list-name">'.$row['Event_Name'].'</h2> 
            <p>Organized by <span class="event-list-organizer"><a href="#">'.$row['Company_Name'].'</a></span></p> 
            <p class="event-list-description">'.$row['Event_Description'].'</p> 
            <a href="#"><button type="button" class="btn more-info-list">More Information</button></a> 
           </div> 
          </div> 
         </div> 
        </div>'; 
     }} else { echo 'No results found.'; } 

Answer 1

は、AJAXリクエストでデータ型HTMLを使用してみてください：あなたは（にconsole.logを保つことによって取得された出力が何であるか

$.ajax({ 
    type: "POST", 
    url: 'events_script.php', 
    data: ({dates: this.value}), 
    dataType : 'html', 
    success: function(data) { 
    $('.results-ajax').html(data); 
    alert(data); 
    } 
});