Success function not being called after making AJAX request codeigniter-CodePudding

When I make an AJAX call from view and pass form data to the controller. I get a couple of problems. First, the code inside success is never executed, and second, the page is being refreshed even though it is an AJAX call. Can anyone tell me where am I doing wrong?

I have seen a lot of questions since yesterday but none of them were able to solve my problem.

Model code

public function insert_user($name, $email) {
    $data = array();
    $data['name'] = $name;
    $data['email'] = $email;
    $data['created_at'] = date('y-m-d');

    $this->db->insert('all_users', $data);
    return true;
}

Controller code

public function insert_user () {
    $data = $this->input->post();
    $name = $data['name'];
    $email = $data['email'];
    $this->User_model->insert_user($name, $email);
    $this->load->view('view');
}

Ajax request code

const insertBtn = $(".insert-btn");
insertBtn.on("click", function () {
                const name = $(".insert-form input[type=name]");
                const email = $(".insert-form input[type=email]");
                $.ajax({
                   url: "<?php echo base_url() ?>index.php/Users/insert_user",
                   type: "post",
                   data: {name, email},
                   dataType: "json",
                   success: function () {
                       $("body").append("Request made successfully");
                   } 
                })
            });

My form looks something like this:

<form class="insert-form" action="<?php echo base_url() ?>index.php/Users/insert_user" method="post">
        <input type="text" name="name" placeholder="Enter name">
        <input type="email" name="email" placeholder="Enter email">
        <button class="insert-btn">Insert Data</button>
    </form>

NOTE: I am able to successfully insert data into the database.

CodePudding user response：

The browser is submitting the form before your AJAX code gets a chance to run/finish.

Instead of binding an event to the click event of the button, you want to bind to the submit event of the form. Then you want to cancel the browser's default action. This is done via the e.preventDefault(); method.

Also, dataType: "json" is not needed here. dataType tells jQuery what kind of data your AJAX call is returning. You generally don't need it as jQuery can automatically detect it. Plus, if you are not returning a JSON document, then this may cause a problem.

const insertForm = $(".insert-form");
insertForm.on("submit", function (e) {
    const name = insertForm.find("input[type=name]");
    const email = insertForm.find("input[type=email]");

    e.preventDefault();

    $.ajax({
        url: "<?php echo base_url() ?>index.php/Users/insert_user",
        type: "post",
        data: {name, email},
        success: function () {
            $("body").append("Request made successfully");
        } 
    })
});

CodePudding user response：

Controller code

public function insert_user () {
    $data = $this->input->post();
    $name = $data['name'];
    $email = $data['email'];
    $data = $this->User_model->insert_user($name, $email);
    $this->output
    ->set_content_type('application/json')
    ->set_output(json_encode($data));
}

CodePudding user response：

Ajax request code

const insertBtn = $(".insert-btn");
insertBtn.on("click", function () {
                const name = $(".insert-form input[type=name]");
                const email = $(".insert-form input[type=email]");
                $.ajax({
                   url: "<?php echo base_url() ?>Users/insert_user", // <?php echo base_url() ?>controller_name/function_name
                   type: "post",
                   data: {name, email},
                   dataType: "json",
                   success: function () {
                       $("body").append("Request made successfully");
                   } 
                })
            });

form looks something like this:

<form class="insert-form"  method="post">
        <input type="text" name="name" placeholder="Enter name">
        <input type="email" name="email" placeholder="Enter email">
        <button class="insert-btn">Insert Data</button>
    </form>