Ajax request not printing html response <p>I have an ajax request that fetches some data and returns a html response that I print out on the page. The problem is that for some reason the html response doesn't get printed, only textual data does. The correct response is being returned as I've checked in the browser console.</p> <p>Here is the ajax function:</p> <pre><code>function getRating(work_id, selectorToWriteTo) { $.ajax({ url: '/read/getRatingsForGivenWork', type: 'GET', dataType: 'html', async: true, data: { field1: work_id}, success: function (data) { //your success code $(selectorToWriteTo).html(data); }, error: function (xhr, ajaxOptions, thrownError) { alert("Error: " + thrownError); } }); } </code></pre> <p>function that returns the html data:</p> <pre><code> public function getRatingsForGivenWork() { $ratings = $this-&gt;getModel ( 'read', 'getRatingsForGivenWork', $_GET['field1']); if($ratings !== null) { print "&lt;div class=\"ui small star rating\" data-rating=\"" . $ratings ."\" data-max-rating=\"5\"&gt;Leave rating&lt;/div&gt;"; } else { print 0; } } </code></pre> <p>Where I invoke the ajax function:</p> <pre><code>&lt;div class="extra"&gt; &lt;script&gt; document.write(getRating(&lt;?php echo $row['works.work_id']; ?&gt;, '.extra')); &lt;/script&gt; &lt;/div&gt; </code></pre> <p>Response in Chrome developer tools:</p> <p><img src="https://i.stack.imgur.com/uvYJU.png" alt="enter image description here"></p> <p>Chrome console:</p> <p><img src="https://i.stack.imgur.com/wKdVA.png" alt="enter image description here"></p> <p>The right response comes back but it doesn't print the html on the page. Anyone know why this is?</p>