How to pass a string with special characters in php so I can display it on page

Question

I have an index (fscrawler) of pdfs, docs and spreadsheets. I wrote a php script to search the index and display the contents of the documents (opens up in a modal). Below is the code to open the modal with the documents details. However I am unable to view the documents,

I would like to preserver the documents original format(indentations and bolds). kindly advice.

    <button type="button" onclick="searchDetails('<?php echo $r['_source']['file']['filename']; ?>',
      '<?php header('Content-Type: text/html; charset=UTF-8');  
        echo htmlentities( $r['_source']['content']); ?>',
      '<?php echo addslashes($r['_source']['path']['real']); ?>',
      '<?php echo $q ?>')"
      class="btn btn-info btn-sm openBtn" data-toggle="modal" > Details </button>

Answer 1

Catching the syntax errors in the browser console is a good first step. Next, look at the source of the rendered page. As a PHP developer, your job is to output valid html, css, and in your case JavaScript to get your page to render. When you get a Syntax Error in the console, that means JavaScript. It runs browser side so it has to be debugged in the browser.

What you're trying to do here is write out a JavaScript invocation of the JavaScript searchDetails() function. But what are you hoping to accomplish with the php header call? I dont know what searchDetails does, but header applies to the page php is rendering. It wouldn't apply to the file content. You can have a Content-Type header for the webpage, but you can't put a header in a JavaScript string. You can put the string value of a header in JavaScript but that won't actually describe the content-type of anything to the browser.

I suppose htmlentities might be sufficient to expose the content of your files, but pdfs, docs, and spreadsheets are going to look very funky that way. not sure exactly what you want it to look like, but you're probably going to want to serve the content of these files with distinct http requests so they can have distinct headers (esp Content-Type). I can't make sense of how htmlentities(spreadsheet_content) would be a valuable string to display.

Generally speaking, rendering JavaScript from php (or any templating thing) is a pattern I suggest you avoid. Write static JavaScript and have a clear mechanism to expose data to JavaScript. It's fraught with difficulties, including being very difficult to write (quoting and escaping for js, php, html all in the same code ) and debug (eg your syntax error), and often fails to be robust in the face of further development.

I would probably generate a json file that described the file data and then would read that through JavaScript and render the page from it with a js library, probably Vue.js. As I mentioned I would build a separate php resource for serving the file content so I could add a ContentType header on that. If you do this, make absolutely sure you're not serving files outside of your index. It might be wise to request files from their position in the index if possible rather than by path to avoid requests exposing eg /etc/shadow.

If you want to make webpages think of that as primarily JavaScript centered development. Use PHP to generate data but try to keep your HTML and JS as static as possible. Choose a JavaScript library - do not fall into the trap of thinking raw js is "simpler" or "more straightforward"; it's not. If you don't have a preference I recommend Vue but Angular, React, even d3.js would all work here. Your data contracts will be more explicit and you'll be able to develop the backend and the frontend in isolation, providing some confidence that the backend works as you hack out JavaScript end. This might seem like a big complication to break things out this way, but if you give it a try, I think you'll experience pretty quickly how much easier it is.