'jQuery Ajax $.parseJSON works on Localhost but not on server

Hello everybody and thank you in advance for your help.

I have a infinite scroll script that I have develop and working on localhost but not on my server.

The JS code look like this :

$('#load-more').on('mouseenter', function() {
  $(this).css('cursor', 'pointer');
}).on('click', function slide(event) {
  var relData = $.parseJSON($(this).attr('rel'));

  $('#loader').html('<img src="design/loader.gif" alt="" />');

  var data = {
    displayedSites: relData.displayedSites,
    catNum: relData.catNum,
    streamPage: relData.streamPage,
    numSites: relData.numSites
  };

  $.ajax({
    type: 'POST',
    url: 'ajax/infinite-scroll.php',
    data: data,
    dataType: 'json',
    timeout: 3000,
    success: function(data) {
      $('#sitesstream').fadeOut(100, function() {
        $(this).append(data.newSitesSet);
      }).fadeIn(1000);
      $('#loader').html('');
      if (data.moreSitesRel.active != 'off') {
        $('#load-more').show();
        $('#load-more').attr('rel', '{"displayedSites":"' + data.moreSitesRel.displayedSites + '", "catNum":"' + data.moreSitesRel.catNum + '", "streamPage":"' + data.moreSitesRel.streamPage + '", "numSites":"' + data.moreSitesRel.numSites + '"}');
      } else {
        $('#load-more').hide();
      }
    },
    error: function() {
      $('#siteStreamInfo').text('Problem');
    }
  });

  return false;
});

It calls a PHP file to add more content and send back to the page.

Do you have an idea of what is missing or what I should add / change to make it works on my server, which is a >7 php version. I also use jQuery version 3.5.1

Thank you so much.

jqueryajaxparse-javascript-sdk


Solution 1:[1]

As a basic rule-of-thumb, NEVER manually craft your own JSON strings.

You're probably running into something in the returned data that makes your JSON invalid when you set it back into the rel attribute.

Instead, use JSON.stringify()

$("#load-more").attr("rel", JSON.stringify({
  displayedSites: data.moreSitesRel.displayedSites,
  catNum: data.moreSitesRel.catNum,
  streamPage: data.moreSitesRel.streamPage,
  numSites: data.moreSitesRel.numSites
}));

FYI, your mouseenter handler would be much simpler as actual CSS

#load-more { cursor: pointer; }

You don't even need a :hover since cursor rules only apply on mouse-over.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Phil

Related Questions