CODEWITHSUNDEEP
javascripthtmlajax
SQueryL
SQueryL

Reputation: 140

Ajax doing everything but appending HTML

Basic "Load More on Scroll" AJAX function, console shows HTML being sent back from the request, but nothing is rendered. I must be overlooking something very simple.

$(window).scroll(function()
{
   if($(window).scrollTop() == $(document).height() - $(window).height())
    {
        $('div#loadmoreajaxloader').show();
        $.ajax({
        url: "loader.php",
        success: function(html)
        {
            if(html)
            {
                $("#postswrapper").append(html);
                $('div#loadmoreajaxloader').hide();
            }else
            {
                $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
            }
        }
        });
    }
});
<div id="postswrapper">
	<div id="loadmoreajaxloader" style="color: #FFF;">
		<span class="loader"><span class="loader-inner"></span></span>
	</div>
</div>

On scroll, the loader gets hidden as requested, but no HTML is brought back from loader.php. Loading loader.php by itself gives the correct HTML, though, so I'm certain the problem is with the AJAX.

requested return HTML

<td>
  <div class="foliocontainer" style="background-image:url('./img/FOLIO/JDOUBLE - THE DROP 1.jpg');" name="counter1 row6"><ul class="overlaycontainer"><li><a href="./img/FOLIO/JDOUBLE - THE DROP 1.jpg" data-lightbox="JDOUBLE - "THE DROP"" data-title="JDouble - The Drop (2014)"><span class="textoverlay"><span>JDOUBLE - "THE DROP" <br /><center><span style="font-size: 18px;">2014</span></center></span></span></a></li></ul></div></td><td><div class="foliocontainer" style="background-image: url('./img/FOLIO/CEDEK - ACTION v8.jpg');" name="counter2 row5"><ul class="overlaycontainer"><li><a href="./img/FOLIO/CEDEK - ACTION v8.jpg" data-lightbox="CEDEK - "ACTION REMIX"" data-title="Cedek & Niko Javan - Action Remix (2015)"><span class="textoverlay"><span>CEDEK - "ACTION REMIX" <br /><center><span style="font-size: 18px;">2015</span></center></span></span></a></li></ul></div></td><td><div class="foliocontainer" style="background-image: url('./img/FOLIO/DEAUX APRIL 1 - UNION.jpg');" name="counter3 row4"><ul class="overlaycontainer"><li><a href="./img/FOLIO/DEAUX APRIL 1 - UNION.jpg" data-lightbox="EVENT FLYER" data-title="Event Flyer (2015)"><span class="textoverlay"><span>EVENT FLYER <br /><center><span style="font-size: 18px;">2015</span></center></span></span></a></li></ul></div></td><td width="20%"><div class="spacer20"></div></td></tr><tr><td width="20%"><div class="spacer20"></div></td><td><div class="foliocontainer" style="background-image: url('./img/FOLIO/LINZ PRAG - HIGH UP.jpg');" name="counter1 row3"><ul class="overlaycontainer"><li><a href="./img/FOLIO/LINZ PRAG - HIGH UP.jpg" data-lightbox="LINZ PRAG - "HIGH UP"" data-title="Linz Prag - High Up (2014)"><span class="textoverlay"><span>LINZ PRAG - "HIGH UP" <br /><center><span style="font-size: 18px;">2014</span></center></span></span></a></li></ul></div></td><td><div class="foliocontainer" style="background-image: url('./img/FOLIO/BAZAAR v5.jpg');" name="counter2 row2"><ul class="overlaycontainer"><li><a href="./img/FOLIO/BAZAAR v5.jpg" data-lightbox=""BAZAAR"" data-title="HPNTK & LEViTATE - Bazaar (2015)"><span class="textoverlay"><span>"BAZAAR" <br /><center><span style="font-size: 18px;">2015</span></center></span></span></a></li></ul></div></td><td><div class="foliocontainer" style="background-image: url('./img/FOLIO/ATLFOREVER4-V5.jpg');" name="counter3 row1"><ul class="overlaycontainer"><li><a href="./img/FOLIO/ATLFOREVER4-V5.jpg" data-lightbox=""ATLANTA FOREVER 4" CONCEPT ART " data-title="Atlanta Forever 4 Concept Art (2014)"><span class="textoverlay"><span>"ATLANTA FOREVER 4" CONCEPT ART  <br /><center><span style="font-size: 18px;">2014</span></center></span></span></a></li></ul></div></td><td width="20%"><div class="spacer20"></div></td></tr><tr><td width="20%"><div class="spacer20"></div></td>

Upvotes: 0

Views: 95

Answers (1)

SQueryL
SQueryL

Reputation: 140

Error in the returned HTML. $counter was used in the main page to designate when a new row in the table should be created. Using the same variable in the external call (loader.php) would result in $counter being an incorrect value, despite it being right on the external page as a standalone. Changing the external page variable to $counter2 solved the issue.

Upvotes: 1

Related Questions