How can i load ajax code before js processing?-CodePudding

I am trying to create a review system from a rating via a url.

I would like to use ajax to retrieve the contents of the url to then process it in my js as a number.

But I feel like the ajax happens after my page loads and so my js returns nothing to me.

Do you have an idea to solve my problem please?

Thank you

(I'm a beginner and I tweaked... watch your eyes! ^^ )

<body>
     
    <div >
        <div >
            <pre id="cible"></pre>
            <span  id="stars" data-rating="" data-num-stars="5" ></span>
            <div ><span id="note"></span><span>/5</span></div>
            <div ><span id="avis"></span><span> avis clients</span></div>
            <div >Avis vérifiés</div>
        </div>
    </div>
 
</body>

ajax/JS

$.ajax({
    method: "GET", // GET ou POST comme tu veut
    url: "content.php", // La page qui va faire le traitement
    dataType: 'json',
    data: {
        cle: "pre"
    }, // Les donnees a envoyer
    success: function (resultat) {
        $('#cible').html(resultat);
    }
})
 
// LIRE TEXT ET SORTIR TABLEAU DES 2 VALEURS
var myString = document.getElementsByTagName('pre')[0].innerHTML;
var splits = myString.split(";", 2);
 
console.log( splits);
console.log( splits[0]); // affiche "le premier élément"
console.log( splits[1]);
 
note = splits[1]
 
function roundHalf(note) {
    return Math.round(note * 10) / 10;
}
document.getElementById("note").innerHTML = roundHalf(note);
 
 
avis = splits[0]
document.getElementById("avis").innerHTML = avis;
 
 
// $(element).attr('data-key', 'value');
 
var myData = document.getElementById("stars").setAttribute("data-rating", roundHalf(note));
 
//ES5
$.fn.stars = function () {
    return $(this).each(function () {
        var rating = $(this).data("rating");
        var fullStar = new Array(Math.floor(rating   1)).join('<i ></i>');
        var halfStar = ((rating % 1) !== 0) ? '<i ></i>' : '';
        var noStar = new Array(Math.floor($(this).data("numStars")   1 - rating)).join(
            '<i ></i>');
        $(this).html(fullStar   halfStar   noStar);
    });
}
 
//ES6
$.fn.stars = function () {
    return $(this).each(function () {
        const rating = $(this).data("rating");
        const numStars = $(this).data("numStars");
        const fullStar = '<i ></i>'.repeat(Math.floor(rating));
        const halfStar = (rating % 1 !== 0) ? '<i ></i>' : '';
        const noStar = '<i ></i>'.repeat(Math.floor(numStars - rating));
        $(this).html(`${fullStar}${halfStar}${noStar}`);
    });
}
$(function () {
    $('.stars').stars();
});

php


<?php
$text = file_get_contents("https://cl.avis-verifies.com/fr/cache/2/e/8/2e88d3bd-ea3f-96a4-9db4-70d3c8494879/AWS/2e88d3bd-ea3f-96a4-9db4-70d3c8494879_infosite.txt");
echo json_encode($text);
?>

i want 4.68 in "Nan" place

If i insert directly the content of the url in the html, <pre style="word-wrap: break-word; white-space: pre-wrap;">16;4.14</pre> and delete the ajax part, the code is working fine. final result Why, when i use ajax to fill the the code bellow doesn't work ?

CodePudding user response：

Do the work when you have the value, not before.

You have the value in the success callback of $.ajax(). Every other piece of code in your JS script runs before that.

function roundHalf(value) {
    return Math.round(value) / 10;
}
// this section runs before

$.ajax({
    method: "GET",
    url: "content.php",
    dataType: 'json',
    data: {
        cle: "pre"
    },
    success: function (resultat) {
        // NOW is the time to do the work
        var splits = resultat.split(";", 2);
        $("#note").text(roundHalf(splits[1]));
        $("#avis").text(splits[0]);
        $("#stars").data('rating', splits[1]).stars();
    }
});

// this section runs before

PHP

<?php
$text = file_get_contents("https://cl.avis-verifies.com/fr/cache/2/e/8/2e88d3bd-ea3f-96a4-9db4-70d3c8494879/AWS/2e88d3bd-ea3f-96a4-9db4-70d3c8494879_infosite.txt");
header('Content-Type: text/plain; charset=utf-8');
echo $text;
?>