Ajax request in MVC doesn't return corresponding value to the HTML page

Question

Below is my script in Dashboard module.

$(function()
{
    var o;
    $.get('dashboard/xhrgetInsert',function(o)
    {
            for(var i = 0;i <= o.length; i++)
            {
                $("#appendHere").append("<div>"+o[i].text+"</div>");
            }
    },'json');
    $("#randomInsert").submit(function()
    {
        alert("hi");
        var data = $(this).serialize();
        var url = $(this).attr("action");
        $.post(url,data,function(o)
        {
            $("#appendHere").append("<div>"+o+"</div>");
        },'json');
        return false;
    });

});

Supposedly, when I'm in the dashboard page this function(xhrgetInsert) has to return value to be appended in the HTML. Unfortunately, it doesn't append anything and as I checked in the chrome console 'response'..it says method doesn't exist. But If I type the method name in the url, it shows the values returned in json format as I specified so.

Same goes for 'xhrInsert()' function as it doesn't return value to be appended. Database connection is perfect as it can insert and select data from db just unable get back the values.. I'm wondering first, why it says the method doesn't exist, and secondly why doesn't return any value?

My 'Dasboard controller making call to dashboard model'

public function xhrInsert()
    {
        $this->model->xhrInsert();
    }
    public function xhrgetInsert()
    {
        $this->model->xhrgetInsert();
    }

Dashboard model contains mysql queries to the database whcih return values in jason format

public function xhrInsert()
    {
        $text =  $_POST['text'];
        $sql = $this->db->prepare("INSERT INTO data(text)VALUES(:text)");
        $sql->execute(array(':text'=>$text));
        echo json_encode($text);
    }
    public function xhrgetInsert()
    {
        $sth = $this->db->prepare("SELECT * FROM data");
        $sth->setFetchMode(PDO::FETCH_ASSOC);
        $sth->execute();
        $data = $sth->fetchAll();
        echo json_encode($data);
    }

Finally, this is my HTML for dashboard

<h1>Dashboard</h1>
<form id="randomInsert" action="<?php echo URL;?>dashboard/xhrInsert" method="post">
    <label>Text: </label><input type="text" name="text"/><br/>
    <input type="submit"/>
</form>
<div id="appendHere"></div>

Console Screenshot

<input type="hidden" id="base_url" value="<?php echo URL ?>"> // in your html file after this var o; var base_url = $('#base_url').val(); $.get(base_url+'dashboard/xhrgetInsert',function(o) Try this. — Amol Navsupe
– Amol Navsupe, Commented Apr 21, 2016 at 7:12
after this var o; var base_url = $('#base_url').val(); $.get(base_url+'dashboard/xhrgetInsert',function(o) Try this. — Amol Navsupe
– Amol Navsupe, Commented Apr 21, 2016 at 7:16
@AmolNavsupe, tried just like your suggection, but still didn't return any value — 112233
– 112233, Commented Apr 21, 2016 at 7:19
Try to use "exit;" or ""die;" after "echo json_encode($data);" because as per console you are getting response, but that whole html page and you need json data only, you can put condition for ajax request only. — Ashish Bhagat
– Ashish Bhagat, Commented Apr 21, 2016 at 7:44

Ashish Bhagat · Accepted Answer · 2016-04-21 07:54:50Z

1

Function should return the result json data to ajax request so it won't render the whole html page with result.

public function xhrInsert(){
    echo $this->model->xhrInsert();
    die;
}
public function xhrgetInsert()
{
    echo $this->model->xhrgetInsert();
    die;
}

Model

public function xhrInsert()
{
    $text =  $_POST['text'];
    $sql = $this->db->prepare("INSERT INTO data(text)VALUES(:text)");
    $sql->execute(array(':text'=>$text));
    return json_encode($text);
}
public function xhrgetInsert()
{
    $sth = $this->db->prepare("SELECT * FROM data");
    $sth->setFetchMode(PDO::FETCH_ASSOC);
    $sth->execute();
    $data = $sth->fetchAll();
    return json_encode($data);
}

edited Apr 21, 2016 at 7:54

answered Apr 21, 2016 at 7:51

Ashish Bhagat

4203 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ashish Bhagat Over a year ago

are you getting data from xhrgetInsert() function? can you share screenshot of console.

112233 Over a year ago

I am getting data in the console for xhrgetInsert if I manually keyed in the funciton in the url tab like: dashboard/xhrgetInsert.But even then its not appended to the html. But if I don't access the function manually, then it says method/function doesn't exist in the console.

112233 Over a year ago

your latest edit works fine for xhrInsert() but not for xhrgetInsert()..I expect that xhrgetInsert to be automatically called every time page is refreshed and that's why I included it inside $(function(){})..Is anything wrong here?

Ashish Bhagat Over a year ago

what is the response from ajax call. can you share me log.. $.get('dashboard/xhrgetInsert',function(o) { console.log(o);

Ashish Bhagat Over a year ago

check the url, is it correct and response code of ajax request. I think you should prepand domain name before url

|

Collectives™ on Stack Overflow

Ajax request in MVC doesn't return corresponding value to the HTML page

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related