How i call controller function from below javascript code in view page(Codeigniter)

Question

This is the javascript code that which used in core PHP for saving data entered in google map. I want to pass the values in the variable 'url' to controller function in Codeigniter. what should i do?

function saveData() {
            var name = escape(document.getElementById('name').value);
            var address = escape(document.getElementById('address').value);
            var type = document.getElementById('type').value;
            var latlng = marker.getPosition();
            var url = 'phpsqlinfo_addrow.php?name=' + name + '&address=' + address +
                      '&type=' + type + '&lat=' + latlng.lat() + '&lng=' + latlng.lng();      

            downloadUrl(url, function(data, responseCode) {

              if (responseCode == 200 && data.length <= 1) {
                infowindow.close();
                messagewindow.open(map, marker);
              }
            });
          }

          function downloadUrl(url, callback) {
            var request = window.ActiveXObject ?
                new ActiveXObject('Microsoft.XMLHTTP') :
                new XMLHttpRequest;

            request.onreadystatechange = function() {
              if (request.readyState == 4) {
                request.onreadystatechange = doNothing;
                callback(request.responseText, request.status);
              }
            };

            request.open('GET', url, true);
            request.send(null);
          }

          function doNothing () {
          }

it's working code in core php. I want to use this in framework Codeigniter. That is i want to pass the values from this javascript to by calling function in controller. — Stevin George
– Stevin George, Commented Jan 23, 2018 at 13:20

DFriend · Accepted Answer · 2018-01-23 21:22:46Z

To fetch the parameters from a GET request use the CI library input. Documentation HERE.

Here's a simplified version for demonstration purposes starting with the view file viewMap.php

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <button value="test" id='mapsave'>Click Me</button>
        <div id="response"></div>

        <script>
            var el = document.getElementById("mapsave");
            el.addEventListener("click", saveData, false);

            function saveData() {
                var res = document.getElementById("response");
                var request = new XMLHttpRequest();
                var name, url;
                name = "Stevin";
                url = "<?= base_url('maps/insert_church_details?name='); ?>" + name;    

                request.onreadystatechange = function () {
                    if (request.readyState == 4) {
                        res.innerHTML = request.responseText;
                    }
                };
                request.open('GET', url, true);
                request.send();
                }
        </script>       
    </body>
</html>

Here is the controller. I've renamed it simply Maps instead of mapController because it simplifies URLs. Who want's to go http://example.com/mapController ? Also, mapController violates CodeIgniter class naming conventions. (Better explained HERE)

class Maps extends CI_Controller
{

    public function index()
    {
        $this->load->view('viewMap');
    }

    public function insert_church_details()
    {
        echo $this->input->get('name');
        //exit; <- Bad idea for CodeIgniter
    }
}

In this example we only have the one item in the query string and we use input->get('name') to fetch it. The parameter passed to get() is the name of item. If we have several items we can fetch them one at a time or use get() without a parameter and capture all the items in an array. (See the docs if that doesn't make sense.)

Calling exit or die in CodeIgniter is a bad habit - not recommended. We're not doing procedural programming here. Using them will short-circuit the framework's normal execution path and, in this case, bypass several "hook" points that might be defined. Let functions return and have CI follow its normal execution path.

It's important to know that the call to base_url() only works because the JavaScript is included inline. If you load the js from an external file (e.g. <script src="assets/js/maps.js"></script>) it will not evaluate correctly.

You'll have to find another way to create a full URL, or use a relative URL.

Here's how to use an external js file, send and fetch a couple of parameters, use a relative URL, and respond with and utilize json.

The view

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <button value="test" id='mapsave'>Click Me</button>
        <div id="response"></div>

        <script src="assets/js/maps.js"></script>       
    </body>
</html>

The Controller

class Maps extends CI_Controller
{

    public function index()
    {
        $this->load->view('viewMap');
    }

    public function insert_church_details()
    {
        $name = $this->input->get('name');
        $addr = $this->input->get('address');
        echo json_encode(['name' => $name, 'addr' => $addr]);
    }
}

The javascript

var el = document.getElementById("mapsave");
el.addEventListener("click", saveData, false);

function saveData() {
    var res = document.getElementById("response");
    var request = new XMLHttpRequest();
    var name, url, address;
    name = "Stevin";
    address = 'Home';
    url = '/maps/insert_church_details?name=' + name + '&address=' + address;

    request.onreadystatechange = function () {
        var out;
        if (request.readyState == 4) {
            out = JSON.parse(request.responseText);
            res.innerHTML = out.name + ", " + out.addr;
        }
    };

    request.open('GET', url, true);
    request.send();
}

ramin ashrafimanesh · Accepted Answer · 2018-01-24 13:13:20Z

0

Just try use and replace {controllerName} into your controller name and replace {functionName} into controller method name:

var url = '<?php echo base_url(); ?>{controllerName}/{functionName}?name=' + name + '&address=' + address +
                  '&type=' + type + '&lat=' + latlng.lat() + '&lng=' + latlng.lng();

edited Jan 24, 2018 at 13:13

answered Jan 23, 2018 at 13:26

ramin ashrafimanesh

1,07210 silver badges14 bronze badges

6 Comments

ramin ashrafimanesh Over a year ago

Please show your controller and method in codeigniter for help you

Stevin George Over a year ago

<?php class mapController extends CI_Controller { public function index() { $this->load->view('viewMap'); } public function insert_church_details() { print_r("hiii");exit; } } ?>

Stevin George Over a year ago

i just use one function insert_church_details().the function only using just print_r.

Stevin George Over a year ago

@DFriend var url = '<?php echo base_url(); ?>{controllerName}/{functionName}?name=' + name + '&address=' + address + '&type=' + type + '&lat=' + latlng.lat() + '&lng=' + latlng.lng(); when adding like this..not calling the function in controll.

DFriend Over a year ago

And you know this because...? What does the request header show in the network tab of your browser's developer's tool? What does the response header show?

|

Collectives™ on Stack Overflow

How i call controller function from below javascript code in view page(Codeigniter)

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related