Question

Page elements are defined like this.

<div id="readf" class="tabbertab">
<h2>First Reading</h2>

    <div id='titlefe' class='rtitle'>

    </div>
    <div id='readfe' class='rtext'>

    </div>

</div>

I make an ajax call to a php script to add data to these page elements.

<script>
    $('#readings').ready(function(){
    $.ajax({
        url: "loadenglish.php",
        type: "GET",
        data: { },
        cache: false,
        async: true,
        success: function (response) {
            if (response != '') 
            {
                alert (response);
            }
        },
        error: function (request, status, error) {
            alert ("status "+status+" error "+error+"responseText "+request.responseText);
        },
    });    

    });
</script>

The php script gets the data and does a script echo to add the data.

<?php
    $titlefe = 'text 1';

    $readfe = 'text 2';

    echo "<script type='text/javascript'> $('#titlefe').append('".$titlefe."');  $('#readfe').append('".$readfe."'); </script>";
?>

The alert statements shows that the php script gets the right information. But the page elements are not updated. Is there a different way to add $titlefe to element id titlefe?

Answer 1

In addition to what MK_Dev posted you can use PHP function json_encode();

<?php

//loadenglish.php
$params = array(
    'titlefe' => 'text 1',
    'readfe' => 'text 2',
);

echo json_encode($params);

Also there is a jQuery function $.getJSON(), which is a shortcut for $.ajax() function usage like yours.