jQuery Ajax $.parseJSON works on Localhost but not on server-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

Thank you Phil for your help. I have removed the cursor thing and put it in my CSS :)

I finaly soldev my problem which wasn't a jQuery JSON problem but a PDO query on the infinite-scroll.php file.

Which is weird.

Query was:

$sitesQuery = 'SELECT '.$fields.' FROM annuaire_sites AS sites LEFT JOIN countries AS coun ON coun.id = sites.loc_country WHERE sites.category = '.$page['catNum'].' and sites.valid = 1 and sites.premium = 0 ORDER BY sites.date_ins DESC, sites.hour_ins DESC LIMIT :start, :perpage';

        $res_sites = $bdd->prepare($sitesQuery);
    
        $res_sites->bindValue(':start', 0, PDO::PARAM_INT);
        $res_sites->bindValue(':perpage', 60, PDO::PARAM_INT);
        $res_sites->execute();
        $res_sites->setFetchMode(PDO::FETCH_OBJ);

I replaced by:

$sitesQuery = 'SELECT '.$fields.' FROM annuaire_sites AS sites LEFT JOIN countries AS coun ON coun.id = sites.loc_country WHERE sites.category = '.$catNum.' and sites.valid = 1 and sites.premium = 0 ORDER BY sites.date_ins DESC, sites.hour_ins DESC LIMIT '.$start.', '.$displayedSites.'';

$res_sites = $bdd->prepare($sitesQuery);

$res_sites->execute();
$res_sites->setFetchMode(PDO::FETCH_OBJ);

I adandonned the bindValue thing which was the source of the problem for a reason I don't know! Because I use this same query on some pages and it works fine...

If someone has an explaination...

Anyway, thank you for your help again.