Welcome Guest, Not a member yet? Register   Sign In
Update database without reloading view? (Involving Google Maps API)
#1

I have my View working so that it shows an infoWindow with a clickable "thumb up/thumb down" for a property that a User is looking at.

However, I cannot get the logic to work for calling an appropriate function within the model or controller such that I am able to run an update to the database reflecting the Users desire.

I do not want the page to have to reload, so all I want is that ability to tell the controller (or model) when a state change to the thumb occurs.


What is the right way to approach doing this?

Controller

Code:
<?php defined('BASEPATH') OR exit('No direct script access allowed');

class Maptest extends CI_Controller {
    
    function __construct() {
        parent::__construct();
        
        // Load form validation ibrary & user model
        $this->load->library('form_validation');
        $this->load->model('mapModel');
        
        // User login status
        $this->isUserLoggedIn = $this->session->userdata('isUserLoggedIn');
    }
    
    public function index($incoming = null){
        //need to load a view
        
        if($incoming == 5) {
            
            return;
        }
        
        //test function for sending data to view
        $data = array('lat' => 32.7157,
                        'long' => -117.1611 ,
                        'zoom' => 10                    );
                        
        
        $data = $this->mapModel->getPropertyMarkers();
        
        //var_dump($data);
        
        $data['markers'] = $this->mapModel->getPropertyMarkers();
        
        
        $string = $this->load->view('maptest/index', $data , FALSE);

    }
    
    
}


Model

Code:
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class MapModel extends CI_Model{
    function __construct() {
        // Set table name
        $this->table = 'users';
    }
    
    public function getPropertyMarkers($data = null) {
        //ideally this function will return the property markers
        //with $data having different arugments to cull out the properties
        //not desired...
        
        //OR there will be a list of propert ID's in $data that will then let this function get
        //the desired rows from the property table
        
        //for now, just return all rows
        
        $this->db->select('lat, long, property_name');
        //$this->db->from('property');
        $query = $this->db->get('property', 5, 5);
        
        return $query->result_array();
        
    }
}

View:  in myFunction is where I "want" to call a Controller or Model function using the various procedures that "should" work at calling a function from a View, but $this->CI =& getInstance() fails miserably  when the code generates within the script for creating the map and markers, as the $this is referring to the View, and I can't figure out how to pass in the pointer to the Controller... 


Code:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
  font-size: 50px;
  cursor: pointer;
  user-select: none;
}

.fa:hover {
  color: darkblue;
}
</style>
<style>
#map_canvas {
  height: 300px;
  width: 50%;
  margin: 0px;
  padding: 0px
}
</style>
</head>

<div id="map_canvas"></div>

<script>
var geocoder;
var map;
var markers = [];
var infowindow;

function initMap() {
      var city = {lat: 32.8244410, lng:-117.109917};
      map = new google.maps.Map(document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(city.lat, city.lng),
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  infowindow = new google.maps.InfoWindow();
    
// ------------  This code builds the markers for display of incoming variable 'markers
    <?php $i = 1; ?> //for variable name production    
        <?php foreach ($markers as $marker): ?>  //this creates each position variable brought in the passed variable
        var <?php echo 'place'.$i; ?> = {
            geometry: {
              location: {
                lat: <?php echo $marker['lat'] ?>,
                lng: <?php echo $marker['long'] ?>
              }
            },
            name: <?php echo '"'.$marker['property_name'].'"' ?>
        };
        
        createMarker(<?php echo 'place'.$i; ?>);
        
        <?php $i += 1; ?>     
    <?php endforeach; ?>
}
google.maps.event.addDomListener(window, "load", initMap);

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });
  markers.push(marker);

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent("<div>" + place.name +
    "<br><input type='submit' id='butSubmit' value='A Function'"+
    "onclick='BarFind()'><div id='bar'></div></div>"+
    '<i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>'
    );
    infowindow.open(map, this);
  });
}


function myFunction(x) {
  x.classList.toggle("fa-thumbs-down");
  //add code to call a controller function
  //--------------------------------------------
  // I can' get any PHP code that makes a reference to Controller to work here
}

function BarFind() {
  document.getElementById('bar').innerHTML = "called BarFind()";
  var myDiv = document.createElement('div');
  document.body.appendChild(myDiv);
  myDiv.innerHTML = <?php echo '"' ?>.$answer.<?php echo '"' ?>;

}
</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=THIS IS MY KEY&callback=initMap">
    </script>
Reply
#2

You can't call PHP code from JavaScript. You can generate JavaScript code with PHP, like you do in the code above. But you can't call $this->CI =& getInstance() or any other PHP function when the user click a button. JavaScript is executed in the browser on the user's computer. PHP is executed on the web server.

But you can achieve this by making an ajax request. The JS code call the web server with whatever it needs to do (example: http://website.com/some-controller/some-function/id), the PHP code make an update in MySQL and return success or error code, the JS code catch the code and call a function to update the web page dynamically.

There's a ton of tutorial to do this with jQuery or plain JavaScript. Let us know if you can get it to work!
CodeIgniter 4 tutorials (EN/FR) - https://includebeer.com
/*** NO support in private message - Use the forum! ***/
Reply




Theme © iAndrew 2016 - Forum software by © MyBB