Issue encountered while transferring data from view to controller via ajax

Question

Issue encountered while transferring data from view to controller via ajax

I'm looking for a way to send the ID of the checked field and the string "checked" to the database using AJAX. I'm not very familiar with how AJAX works.

<h2 id="h2">To Do List</h2>
        <ul id="new">
            <?php if(!empty($details)){ foreach($details as $key => $del) {  ?>
                <li id="try-0"><input class= "box" type="checkbox"><input class="set field" name="list[]" type="text" value="<?php echo $del['value'];?>"></li>          
            <?php  } ?>

            <li id="try-0"><input class= "box" type="checkbox"><input class="set field" name="list[]" style="margin: 5px 0 5px 10px;width: 297px;height: 35px;" type="text" value=""></li>

            <?php } else{ ?>
                <li id="try-0"><input class= "box" type="checkbox"><input class="set field" name="list[]" type="text" value=""></li>
            <?php } ?>   
        </ul>
        <button class="btn btn-info" id="btn1">add</button>

Javascript

<script type="text/javascript">
        $(document).ready(function() {
            var x =1;
            $('#btn1').hide();
            $('body').on('keyup', '.field', function(){
                var search_text = $('.field').last().val();
                if(search_text==""){
                    $('#btn1').hide();
                } else{
                    $('#btn1').show();
                }
            });

            $("#btn1").click(function (event) {
                event.preventDefault();
               $('#new').append('<li" id="try-'+x+'"><input class= "box" type="checkbox"><input  name="list[]" class="set field" type="text" value=""></li>'); 
                $('#btn1').hide();
                x++;      
            });

            $('body').on('click', '.box', function(){
                var sta = 'checked';
                $.ajax({
                    type: "POST",
                    url: "<?php echo base_url();?>homeController/statuspass",
                    data: {search_name:sta},
                    success: function(data){
                        // console.log(success);
                    }
                });
            });
        });
    </script>

When I click the checkbox, I want the checkbox's ID and a string to be passed to the controller and saved in the database.

However, when I try this, I get an error:

POST http://localhost/todolist/homeController/statuspass 500 (Internal Server Error)
    send @ jquery.min.js:2
    ajax @ jquery.min.js:2
    (anonymous) @ (index):146
    dispatch @ jquery.min.js:2
    y.handle @ jquery.min.js:2

php ajax codeigniter

Answer 1

Answer №1

An issue has been detected on the server end. Consider using xDebug to troubleshoot your PHP code or inserting die() messages in your controller action for better insight into the problem.

Answer 2

An issue has been detected on the server end. Consider using xDebug to troubleshoot your PHP code or inserting die() messages in your controller action for better insight into the problem.

Answer 3

Answer №2

To properly implement your Js code, it should look something like the following:

$(document).on('click', '#myFormSubmit', function(event) {
    event.preventDefault();

    var id = $('#hiddenInputThatHasMyID').val();
    var blah = 'blah';
    var blahblah = 'blahblah',

    // Make sure you have a way to retrieve the above variables or search for how to do so 

    // You can serialize your form data like this
    // var data = $('form#myForm').serialize();

    // Or manually create it like this
    var data = {id:id, blah:blah, blahblah:blahblah};

    $.ajax({
        url: "<?= site_url('controller/method') ?>",
        method: 'POST',
        data: data,
        dataType:'JSON',
        success: function(response) {
            console.log(response);
        },
        error: function(response) {
            console.log(response);
        }
    });
});

This code will send your data to the specified controller/method and receive a response from it. In your controller's method, expect something like the following:

public function method()
{
    $id = $this->input->post('id');
    $blah = $this->input->post('blah');
    $blahblah = $this->input->post('blahblah');

    // Perform necessary operations here and return variables
    $data['ret_var1'] = 'val1';
    $data['ret_var2'] = 'val2';

    // Output data as JSON
    header('Content-Type: application/json');
    echo json_encode($data);
}

In your ajax response, utilize the returned variables like so:

var var1 = response.var1;    // val1
var var2 = response.var2;    // val2

I hope this explanation clarifies things.

Additional Notes:

Remember to format your URL using

url: "<?= site_url('controller/method') ?>"

Answer 4

To properly implement your Js code, it should look something like the following:

$(document).on('click', '#myFormSubmit', function(event) {
    event.preventDefault();

    var id = $('#hiddenInputThatHasMyID').val();
    var blah = 'blah';
    var blahblah = 'blahblah',

    // Make sure you have a way to retrieve the above variables or search for how to do so 

    // You can serialize your form data like this
    // var data = $('form#myForm').serialize();

    // Or manually create it like this
    var data = {id:id, blah:blah, blahblah:blahblah};

    $.ajax({
        url: "<?= site_url('controller/method') ?>",
        method: 'POST',
        data: data,
        dataType:'JSON',
        success: function(response) {
            console.log(response);
        },
        error: function(response) {
            console.log(response);
        }
    });
});

This code will send your data to the specified controller/method and receive a response from it. In your controller's method, expect something like the following:

public function method()
{
    $id = $this->input->post('id');
    $blah = $this->input->post('blah');
    $blahblah = $this->input->post('blahblah');

    // Perform necessary operations here and return variables
    $data['ret_var1'] = 'val1';
    $data['ret_var2'] = 'val2';

    // Output data as JSON
    header('Content-Type: application/json');
    echo json_encode($data);
}

In your ajax response, utilize the returned variables like so:

var var1 = response.var1;    // val1
var var2 = response.var2;    // val2

I hope this explanation clarifies things.

Additional Notes:

Remember to format your URL using

url: "<?= site_url('controller/method') ?>"

Answer 5

Answer №3

CodeIgniter URLs are optimized to work well with underscores in the letters. Make sure to update your controller name from homeController to HomeController, ensuring that the first letter is capitalized and any subsequent letters are lowercase except for the first one. Also verify that you extend CI_Controller. Secondly, check if the method statuspass is available in your HomeController class.

Answer 6

CodeIgniter URLs are optimized to work well with underscores in the letters. Make sure to update your controller name from homeController to HomeController, ensuring that the first letter is capitalized and any subsequent letters are lowercase except for the first one. Also verify that you extend CI_Controller. Secondly, check if the method statuspass is available in your HomeController class.

Issue encountered while transferring data from view to controller via ajax

Answer №1

Answer №2

Answer №3

Similar questions

Tips for boosting performance in PHP when working with extensive arrays

Exploring the integration of AJAX callbacks with ASP.NET User controls

Utilizing backreferencing in PHP's preg_replace function

"Discover the step-by-step process for displaying the menu on a WordPress

Uploading files in chunks using a combination of HTML, JavaScript,

"Implementing a seamless auto-refresh feature using jQuery without any

Unintended redirects are occurring with AJAX requests when using the send() method

Passing variables via redirection using Zend framework

Which flavor of Ubuntu is optimal for setting up a LAMP and web development server? What are the advantages of using Ubuntu 32-bit for this

Can the App be initiated manually using AngularJS and AJAX injection?

Transferring data from Unity to PHP: Passing a variable's value

Is there a way to integrate PHP functionality into JavaScript?

Is there a way for me to determine the value or array that has been passed in the form?

employing the d3.queue method to defer execution until receiving the AJAX response

Recreating dropdown menus using jQuery Clone

How to Use jQuery Post Method to Submit a Form Without Redirecting

Guidelines for accessing the POST request entity with Slim framework

PHP Cross-site scripting validation is failing to function as intended

Creating a Rails application that dynamically fills a table with data from a

Using Django to pass context data in a JsonResponse