PHP echo through Ajax doesn’t give style?

Got blocked.

  1. Created a php page with normal html, css, js and php.

    Inside of that file, wanted for the user to be able to see events accordingly to the selected date.

  2. In order to do that, once the date was selected, the value associated that date would get posted into a php script.

  3. Inside of that php script, the posted variable was going through some conditions and echoing the results.

  4. Then, the result of this php script, would be displayed in the initial php page.

Ok, so far so good.

Thing is, Want the text to appear styled, which means, want it to allow styling classes.

Did some research but can’t seem to find any problem like that.

When you go to the page and write, for example, the following in input: 12/22/2016, you can see data being displayed. Problem is, it doesn’t come anywhere close to styled.

This makes sense, somehow, because the php script doesn’t have mentioned anywhere to use those styles.

The styles are being used in the initial php page (html/css/js/php), where the results will be displayed.

Initially I thought the style in the results would be recognized because it is called in the exact same page where those style files are mentioned.

What am I doing wrong?

This it the result of the php script:

<h1 class="hero-header-otro">It works! dfgdfgdfg</h1>

As you can see, it has the class called inside of the h1

This is the javascript code that posts in the php script and displays the results in a specific div of the same page where this js code is, which is the php page mentioned all the way through this message:

    jQuery(function($) {

  $(".date").datepicker({
    onSelect: function(dateText) {
      display("Selected date: " + dateText + "; input's current value: " + this.value);
      $(this).change();
    }
  }).on("change", function() {
    display("Got change event from field");
    $.ajax({
      type: "POST",
      url: 'events_script.php',
      data: ({dates: this.value}),
      success: function(data) {
        $('.results-ajax').html(data);
        alert(data);
      }
  });
});
  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

The CSS:

.hero-content > h1.hero-header-otro {
    font-size: 4rem;
    margin-bottom: 20px;
    font-weight: bold;
    color: #ffffff;
}

Answer

Got it fixed. This it the result of the php script:

<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> 

This is the javascript code that posts in the php script and displays the results in a specific div of the same page where this js code is, which is the php page mentioned all the way through this message:

    jQuery(function($) {

  $(".date").datepicker({
    onSelect: function(dateText) {
      display("Selected date: " + dateText + "; input's current value: " + this.value);
      $(this).change();
    }
  }).on("change", function() {
    display("Got change event from field");
    $.ajax({
      type: "POST",
      url: 'events_script.php',
      data: ({dates: this.value}),
      dataType : 'html',
      success: function(data) {
        $('.results-ajax').html(data);
        alert(data);
      }
  });
});
  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

The 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.'; }

Leave a Reply

Your email address will not be published. Required fields are marked *