Echo HTML from PHP to display in ajax request on webpage

Question

I have a list of scientific publications displayed on a website and would like to load additional content as the user arrives at the end of a list of 10 publications, and presses a button to load another 10 publications.

I make an Ajax call to load the next 10 publications

I am trying to display html code that is echo-ed from php script but I cannot appear to display the html. In the console, I am getting '1' as a value for my HTML. I do not understand: 1. why I am getting the value of '1'; 2. Also, is it good practice to echo HTML to be displayed via javascript?

JS (AJAX call):

  var resp = xmlhttp.responseText;
  var respArray = resp.split('|');
  var response = respArray[1];
  var publicationList = respArray[0];

  var currentHTML = document.getElementById('showPubs').innerHTML;

  if(response == '1'){
  console.log('more publications available');

        var currentHTML = document.getElementById('showPubs').innerHTML;
        document.getElementById('showPubs').innerHTML += publicationList;

        }else{
            document.getElementById('showPubs').innerHTML += '<div id="noMorePub">No more publications</div>';

   }

PHP:

 $recentPublications .= '
        <div id="pub'.$articleID.'" class="pub20">
            <div class="divImg">'.$avatarPathHTML.'</div>
            <div class="contentPub">
                <div class="datepub">
                    <div class="fullName"><a class="sfullNme" href="2profile.php?username='.$articleUsername.'">'.$fullname.'</a></div>
                    <div class="date">'.$submitDate.'</div>
                </div>
                <div class="divLink">
                    <a href="testPage3.php?article='.$articleID.'" class="pubLink">'.$articleTitle.'</a>
                </div>
                <div class="authorString">'.$author_string.'</div>
            </div>
                <hr class="pubSeparator">
        </div>
    ';


 echo $recentPublications.'|1';

What you should do is a kind of pagination. Try to put in your url call some _GET parameters from & to that you will get them and put them in your query (limit from, to). In that way you will do every loading page or Ajax call a new query with just 10 results. Tryto separate the HTML from the server-side code. — KubiRoazhon
– KubiRoazhon, Commented Aug 12, 2016 at 10:24

Michail M. · Accepted Answer · 2016-08-12 10:24:15Z

1

I guess better idea is not use this dirty hack

  echo $recentPublications.'|1';

and

  var respArray = resp.split('|');
  var response = respArray[1];
  var publicationList = respArray[0];
  if(response == '1'){

You can just check length of response. if length of response is equal 0 bytes then other publications are not available.

answered Aug 12, 2016 at 10:24

Michail M.

7555 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karol Klepacki · Accepted Answer · 2016-08-12 10:20:01Z

0

The good practice is to separate concerns. Therefore, in your example, server-side script should only provide data to be displayed (ex. JSON via), and frontend should make AJAX call to specific endpoint.

answered Aug 12, 2016 at 10:20

Karol Klepacki

2,1181 gold badge20 silver badges30 bronze badges

Collectives™ on Stack Overflow

Echo HTML from PHP to display in ajax request on webpage

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related