How to send database data to view using ajax with codeigniter 3

Question

Hello! I’m having a question. I’m developing a system for a furniture store. I want to get the owner to edit the furniture he registered in the system. I can recover the data, but I cannot place it in the fields of a modal window

The editing window will be this:

I can recover the data from the database via ajax and via segments of codeigniter. But the problem is to put them in these fields.

$("#editarProduto").click(function(){
		var id = $("table#tabelaEstoque tbody .colorir td:first").text();
		if(id) {
			$.ajax({
				url: "HomeSistema/editarProduto/"+ id,
				data: {id:id},
				type: "post",
				dataType: "text",
				beforeSend: function() {
					$(".loadWateEditProduto").show();
				}
			}).done(function(dataProduto){
				window.alert(dataProduto);
				$("#editarProdutoEstoque").show();
				$(".loadWateEditProduto").hide();
			}).fail(function(){
				$("section#erroInternoEstoque").show();
				$(".loadWateEditProduto").hide();
			});
		}
		else
			$("#selectProduto").show();
	});

Php code

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

class HomeSistema extends CI_Controller {
    public function __construct() {
        parent::__construct();
        $this->load->helper("url");
        $this->load->helper("form");
        $this->load->helper("date");
    }

    public function index()
    {
        if($this->session->has_userdata("nome")) {
            #listar usuários
            $this->load->model("recuperarUsuariosModel");
            $dados['usuarios'] = $this->recuperarUsuariosModel->recuperaUsuarios();

            # lista produtos
            $this->load->model("recuperaProdutosModel");
            $dados['produtos'] = $this->recuperaProdutosModel->recuperaProdutos();

            # listar Clientes
            $this->load->model("recuperaClientesModel");
            $dados['clientes'] = $this->recuperaClientesModel->recuperaClientes();

            $this->load->view("sistema/homeSistema-v",$dados);
        } else {
            redirect("login", "location");
        }
    }

    public function editarProduto() {
        $idProduto = $this->uri->segment(3);
        $this->load->model("RecuperaProdutosModel");
        $produtos['produto'] = $this->RecuperaProdutosModel->recuperaProdutosEdicao($idProduto);
        $this->load->view("sistema/homeSistema-v",$produtos);
    }

How do I edit the data brought from the database? I’ve tried with segments and via post.

Answer 1

As I would:

on my button would put the product id with the attribute 'date-' like this:

<button id="editarProduto" data-produto-id="<?php echo $produto['id']; ?>">
</button>

In js I would use $.post which is simpler, so:

$("#editarProduto").click(function() {

    event.preventDefault();

    var produtoId = $(this).data('produto-id');

    $.post("HomeSistema/editarProduto", {
        produtoId: produtoId
    }, function(retorno) {
        $(".loadWateEditProduto").html(retorno);
        $(".loadWateEditProduto").show();
    });
});

in the builder would do so:

public function editarProduto()
{
    $post = $this->request->getPost();
    $this->load->model("RecuperaProdutosModel");
    $produtos['produto'] = $this->RecuperaProdutosModel->recuperaProdutosEdicao($post['produtoId']);
    $this->load->view("sistema/editar-produto-modal",$produtos);
}

*you would need to have a view just for the modal

Answer 2

First your logic this confused, let’s go in pieces:

1. Create a function that returns a JSON with product data, only data.
2. Use the function .on('click') to load the values inside the inputs: $('#nomeProduto').val(respostaProduto.nomeProduto);
3. After this done with all the data, you must re-capture this data as soon as the client click save, one must send this data to a new function to perform the update in the database and return the successful or error response.
4. Through Ajax update the product table with the new values.

Ready hehe.

Note: I like to use the $.post(UrlFunção,dados,function(data){'sucesso'},tipodeDado);