Why JQUERY AJAX call is not displayed on PHP page?

Question

I have 3 files [CallTasks.JS, opentask.php, calltask.php], I am doing an AJAX call in CallTasks.JS to calltask.php, in order to pass a string value to calltask.php and show it on opentask.php. I am using JQUERY selector to write text data in div #id="callsuccess", but it's not working.

CallTasks.JS:

$(document).ready(function () {
    $("#display_tasks").click(function() {
        var name = $(this).text();
        var namecut = name.substr(0,name.indexOf(' |'));
        $.ajax({
            type: 'POST',
            url: 'calltask.php',
            data: {mydata : namecut},
            success:function(data) {
                alert(data)
                $('#callsuccess').text(data)
            }
        });
    });
});

opentask.php: require_once $_SERVER['DOCUMENT_ROOT'] . 'calltask.php';

calltask.php:

<?php
    require_once $_SERVER['DOCUMENT_ROOT'] . 'sessionnotfound.php';
    require_once $_SERVER['DOCUMENT_ROOT'] . 'dbinfo.php';
    $dbc   = new mysqli($hn,$user,$pass,$db) or die("Unable to connect");
    $taskname = isset($_POST['mydata']) ? $_POST['mydata']: '' ;
    echo $taskname;
    $datatablequery = "SELECT DISTINCT datatable,docid FROM tasks WHERE tskname="."'".$taskname."'";
    $selectdatatable = $dbc->query($datatablequery);
    while ($row = $selectdatatable->fetch_assoc()) {
        $datatablerowresult = $row['datatable'];
        $docidrowresult = $row['docid'];
    ?>
        <div>
            <?php
                echo '<div id="callsuccess">'.$datatablerowresult.'<br>'.$docidrowresult.'</div>';
            ?>
        </div>
<?php
    }
?>

I am also including the CallTasks.JS script file into HTML Head tag inside opentask.php. the alert successfully shows the records I am retrieving from the table, but when I try to echo the results ON page, through the JQUERY final line inside success to PHP div echo into calltask.php, nothing is being shown on opentask.php which includes the calltask.php. What am I doing wrong here?

Answer 1

You're refreshing the page by redirecting to a URL when you click on the link. If you want to use AJAX to update the current page, call Event.preventDefault() in the click handler.

$(document).ready(function () {
    $("#display_tasks").click(function(e) {
        e.preventDefault();
        var name = $(this).text();
        var namecut = name.substr(0,name.indexOf(' |'));
        $.ajax({
            type: 'POST',
            url: 'calltask.php',
            data: {mydata : namecut},
            success:function(data) {
                alert(data)
                $('#callsuccess').text(data)
            }
        });
    });
});