How can I remove spaces from a jquery filtered item?

Question

I am filtering an element from an Ajax Response as :

 var storyResults = $(data).filter('#success_stories');
 var videoResults = $(data).filter('#success_videos');

        if(storyResults.length == 0) {
            //hide the Load More button if there are no more records to load
            $(".load_more_stories").hide();
            $(".load_more_videos").show();
        }

        if(videoResults.length == 0) {
            //hide the Load More button if there are no more records to load
            $(".load_more_stories").hide();
            $(".load_more_videos").hide();
        }

Now I can't do that as :

(storyResults.trim().length == 0)

When I want to do that so I get error as it's array so then how can I trim spaces then from the array element?

Update :

What I want to do is to achieve the length == 0 if I am right about that by removing spaces from the following element would it make it true that the length of the element will be 0 or should I counting the innertext length ?

Here is the element as :

<div id="success_stories">                                          </div>

The Ajax Data Records are being pulled from this page as :

<?php

$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);

//throw HTTP error if page number is not valid
if(!is_numeric($page_number)){
    header('HTTP/1.1 500 Invalid page number!');
    exit();
}

$item_per_page_story = "30";

$story_start = (($page_number-1) * $item_per_page_story);
$story_end = $page_number * $item_per_page_story;

$item_per_page_video = "11";

$vid_start = (($page_number-1) * $item_per_page_video);
$vid_end = $page_number * $item_per_page_video;

?>

<?php if (array_key_exists($story_start, $clinic_stories)) { ?>

<div id="success_stories">

    <?php
  for ($i=$story_start; $i < $story_end; $i++) {
            if (isset($clinic_stories[$i])) { ?>
          <?php $patient_name = $clinic_stories[$i]->getPatientName(); ?>
            <?php if ($clinic_stories[$i]->getThumbnail()):?>
              <div class="col-md-4">
              <a data-featherlight="success/<?php echo $i+1; ?>" href="#">
              <span class="thumbnail grow" style="position: relative;left: 0px;top: 0px;">
                <img src="<?= "/uploads/" . $clinic_stories[$i]->getThumbnail() ?>" style="width:200px;height:150px;" alt="" />
              </span>
              </a>
            </div><?php endif; ?><?php } } ?></div>
<?php } else { echo '<div id="no_stories"></div>'; } ?>

<?php if (array_key_exists($vid_start, $clinic_videos)) { ?>

<div id="success_videos"><?php
for ($i=$vid_start; $i < $vid_end; $i++) {
    if (isset($clinic_videos[$i])) {
          $embed = $clinic_videos[$i]->getEmbed();
          $pos_vidStart = strpos($embed, "embed/");
          $pos_vidEnd = strpos($embed, "\"", $pos_vidStart+6);
          $embed = substr($embed, $pos_vidStart+6, $pos_vidEnd - ($pos_vidStart+6));
          ?>
          <div class="success-stories-video-frame">
            <input type="hidden" id="vid<?= $i+1; ?>" value="<?= $embed ?>">
            <?php if ($clinic_videos[$i]->getThumbnail()):?>
              <span class="thumbnail">
                 <a data-featherlight="reviews/video/id/<?php echo $embed; ?>" data-featherlight-iframe-overflow="hidden" href="#"> <img src="<?= "/uploads/" . $clinic_videos[$i]->getThumbnail() ?>" alt="video file" title="CLICK TO PLAY" /></a>
              </span>
            <?php endif; ?>
          </div><?php } } ?></div>

<?php } else {

    echo '<div id="no_videos"></div>';;

} ?>

Also the whole JS code is as follows :

<script type="text/javascript">
var track_page = 1; //track user click as page number, right now page number is 1
load_contents(track_page); //load content

$(".load_more_stories").click(function (e) { //user clicks on button
    track_page++; //page number increment everytime user clicks load button
    load_contents(track_page); //load content
});
$(".load_more_videos").click(function (e) { //user clicks on button
    track_page++; //page number increment everytime user clicks load button
    load_contents(track_page); //load content
});

//Ajax load function
function load_contents(track_page){
    $('.animation_image').show(); //show loading image

    $.post( '<?php echo $url; ?>/get-reviews', {'page': track_page}, function(data){

        var storyResults = $(data).filter('#success_stories');
        var videoResults = $(data).filter('#success_videos');

        if(storyResults.text().trim().length == 0) {
            //hide the Load More button if there are no more records to load
            alert(storyResults.text());
            $(".load_more_stories").hide();
            $(".load_more_videos").show();
        }

        if(videoResults.length == 0) {
            //hide the Load More button if there are no more records to load
            $(".load_more_stories").hide();
            $(".load_more_videos").hide();
        }



        $("#story_results").append(storyResults); //append data into #results element



        $("#video_results").append(videoResults); //append data into #results element

        //scroll page to button element
        $("html, body").animate({scrollTop: $(".box-content").offset().bottom}, 100);

        //hide loading image
        $('.animation_image').hide(); //hide loading image once data is received
    });
}
</script>

Answer 1

There are some problems with your code, it generates invalid HTML just by the fact that you appending elements with the same IDs (success_stories + success_videos) when you pull the results from the server more than once.

What i'm suggesting is to return an array of objects from the server and create the elements on the client side:

$item_per_page_story = "30";

$story_start = (($page_number-1) * $item_per_page_story);
$story_end = $page_number * $item_per_page_story;

$item_per_page_video = "11";

$vid_start = (($page_number-1) * $item_per_page_video);
$vid_end = $page_number * $item_per_page_video;

$results = array(
    'stories' => array(),
    'videos' => array()
);

if (array_key_exists($story_start, $clinic_stories)) {
    $story = array();
    for ($i=$story_start; $i < $story_end; $i++) {
        if (isset($clinic_stories[$i])) {
            $story['id'] = $i + 1;
            $story['patient_name'] = $clinic_stories[$i]->getPatientName();
            if ($clinic_stories[$i]->getThumbnail()) {
                 $story['thumbnail'] = $clinic_stories[$i]->getThumbnail();
            }
        }
    }
    array_push( $results['stories'], $story );
}

if (array_key_exists($vid_start, $clinic_videos)) {
    $video = array();
    for ($i=$vid_start; $i < $vid_end; $i++) {
        if (isset($clinic_videos[$i])) {
            $video['id'] = $i+1;
            $embed = $clinic_videos[$i]->getEmbed();
            $pos_vidStart = strpos($embed, "embed/");
            $pos_vidEnd = strpos($embed, "\"", $pos_vidStart+6);
            $video['embed'] = substr($embed, $pos_vidStart+6, $pos_vidEnd - ($pos_vidStart+6));

            if ($clinic_videos[$i]->getThumbnail()) {
                 $video['thumbnail'] = $clinic_videos[$i]->getThumbnail();
            } 
        }
    }
    array_push( $results['videos'], $video );
}

echo json_encode( $results );

Next, when you fetch the data from the server, you get an JSON object of the videos and stories returned from the server:

function load_contents(track_page){
    $('.animation_image').show(); //show loading image

    $.post( '<?php echo $url; ?>/get-reviews', {'page': track_page}, function(data){

        // Check the console to see the results from the server
        console.log( data );

        var storyResults = data.stories;
        var videoResults = data.vidoes;

        if(storyResults.length == 0) {
            //hide the Load More button if there are no more records to load
            $(".load_more_stories").hide();
            $(".load_more_videos").show();
        } else {
            // Here we create the elements using jquery
            for( var i = 0; i < storyResults.length; i++ ) {
                $('<div></div>').addClass("col-md-4").append(
                    $('<a></a>').attr('data-featherlight', 'success/' + storyResults[i].id).attr('href', '#').append(
                        $('<span></span>').addClass('thumbnail').addClass('grow').css({
                            'position': 'relative',
                            'left': 0,
                            'top': 0
                        }).append(
                            $('<img />').attr('src', '/uploads/' + storyResults[i].thumbnail)
                        )
                    )
                ).appendTo( "#story_results" )
            }
        }

        /// SAME LOGIC FOR videoResults


        //scroll page to button element
        $("html, body").animate({scrollTop: $(".box-content").offset().bottom}, 100);

        //hide loading image
        $('.animation_image').hide(); //hide loading image once data is received
    });
}

Now if you find it to difficult, you can still create the html on the server side, and just append each HTML to the array. Simplified example:

$results = array(
    'stories' => array(),
    'videos' => array()
);

for ($i=$story_start; $i < $story_end; $i++) {
    $storyHTML = '<div class="col-md-4">
        <a data-featherlight="success/' . ($i+1) . '" href="#">
            <span class="thumbnail grow" style="position: relative;left: 0px;top: 0px;">
                <img src="/uploads/"' . $clinic_stories[$i]->getThumbnail() . '" style="width:200px;height:150px;" alt="" />
            </span>
        </a>
    </div>';
    array_push( $results['stories'], $storyHTML );
}

echo json_encode( $results );

And then you just need to loop over the elements on jQuery and append each and every one to the container.