Geek Answers Handbook

Ajax request does not print html response

I have a query ajaxthat retrieves some data and returns the response htmlthat I print on the page. The problem is that for some reason the response is htmlnot printed, only text data. The correct answer is returned, as I checked in the browser console.

Here is the function ajax:

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);
        }
     });
}

which returns html data:

public function getRatingsForGivenWork()
{
     $ratings = $this->getModel ( 'read', 'getRatingsForGivenWork', $_GET['field1']);
     if($ratings !== null)
     {      
          print "<div class=\"ui small star rating\" data-rating=\"" . $ratings ."\" data-max-rating=\"5\">Leave rating</div>";
     }
     else
     {
          print 0;
     }

   }

Where I call the ajax function:

<div class="extra">
     <script>
          document.write(getRating(<?php echo $row['works.work_id']; ?>, '.extra'));
     </script>    
</div>

The answer in Chrome Developer Tools:

enter image description here

Chrome console:

enter image description here

The correct answer is returned, but it does not print html on the page. Does anyone know why this is?

+4
source share
5 answers

After deepening, I managed to find out the problem. It all came down to the fact that PHP loads before JavaScript.

PHP . ajax getRating(work_id, selectorToWriteTo), .

ajax :

<div class="ui small star rating" data-rating="3" data-max-rating="5">Leave rating</div>

javascript, . , document.ready() :

$( document ).ready(function() {
   $('.ui.small.rating').rating();
});

, , , , , , PHP-, PHP , .

- JavaScripts window.onload, :

window.onload = function(event){
    event.stopPropagation(true);
    $('.ui.small.rating').rating();
}

, , , onload . - , , , , , .

.

UPDATE:

. setTimeOut:

window.onload = function(event){
    setTimeout(function(){
       event.stopPropagation(true);
       $('.ui.small.rating').rating('disable');
    }, 0);
0

id HTML div, ; div.

<div class="extra" id="div1">
</div>

<script>
    getRating(<?php echo $row['works.work_id']; ?>, '#div1');
</script>
0

, AJAX - ? Inspect Element Network.

, .

, getRating(work_id, selectorToWriteTo)?

selectorWriteTo?

0

. html . , .

 $(selectorToWriteTo).load(data);
0

, , , , , -, , , , SQL-? js , html .extra div, , script ( , PHP- JS) :

script:

<div class="extra"></div>
<script>
    document.write(getRating(<?php echo $row['works.work_id']; ?>, '.extra'));
</script>

<div class="extra"></div> PHP ( , ), div. script . .extra html , ajax succesfull, , , else , , print 0;. - 0, <span>You cannot rate this</span>, , . , divs html, append:

$(selectorToWriteTo).append(data);

, , - CSS ui small star rating extra , , display: none; visibility: hidden;

0

More articles:


All Articles