Read database without reload

[eluser]hermesfelipe[/eluser]
Hi all.
I need to get a field from a database table (so far, nothing new). But I need to get this field by clicking on a link (or a button), and update a form input field in the same page without reloading the page.
If any of you guys could give me some directions, or show me an example, I would highly appreciate.

please do not just say 'use ajax' or something like that - I've searched the whole internet for this and an example of how to do it is nowhere to be found...

thanks a lot!

[eluser]CroNiX[/eluser]
You can't do it without loading the page, which is why you can't find an example and also why people use ajax for this. It's really the only option to do what you are asking.

Think about what you are asking. "I want to click on a link (which sends a request to the server and loads the page) without it reloading the page."

[eluser]hermesfelipe[/eluser]
thanks for your reply. I believe I did not make myself clear enough though: I did not say I don't wanna use ajax. I know that's the way to go - I'm only looking for an example.

I already came up with a work around (the link calls a popup window, which then reads the database and using javascript the popup window populates the form field in the first window). Wanted a more elegant solution though...

thanks!

[eluser]CroNiX[/eluser]
Say you had this link, and you made an id of "id-50" and let's say the "50" part is your actual ID you want to get (classes and IDs can't start with numbers, so I added the "id-". It also has a class of "get-the-id", which we will use to trigger the ajax call. The div with the id of "result_will_go_here" is where we will put the results retrieved.

Code:

<a href="#" id="id-50" class="get-the-id">Click this link</a>
<div id="result_will_go_here"></div>

Then, with javascript/jquery, you would do something like this:

Code:

$(document).ready(function(){  //when the document is done loading

  //if an anchor with the class of "get-the-id" is clicked...
  $('.get-the-id').click(function(e){
    //prevent the default click action
    e.preventDefault();

    //grab the id of the clicked anchor and remove the "id-" from it so we are left with the raw id
    var id = $(this).attr('id').replace('id-', '');

    //now send the id in a POST request to a controller on the server
    $.ajax({
      url: 'http://yoursite.com/some_controller/some_method',  //url to send request to
      data: {id: id}, //send the id as $_POST['id']
      type: 'POST',   //We are using POST method to send this request
      dataType: 'html', //we will be returning html from CI
      success: function(data){  //this is what gets returned from the server, if successful
        //put our returned content into the div with id of 'result_will_go_here'
        if (data == '') data = 'No Results!!';  //check to see if anything was returned
        $('#result_will_go_here').html(data);
      }
    });
  });
});

Then in CI:

Code:

class Some_controller extends CI_Controller {
  public function some_method()
  {
    //we will use this to store and return our html
    $string = '';

    //get the id and run it through xss_clean
    $id = $this->input->post('id', TRUE);
  
    //if there was a post with "ID"
    if ($id !== FALSE)
    {
      //load the model and get the data
      $this->load->model('some_model');
      $data = $this->some_model->get_data($id);

      //format the data into html...
      $string = '<div>' . $data['title'] . '</div>';          
    }
    //echo (not return) the string back to the success event of the jquery ajax call
    echo $string;
  }
}

I know that's a lot to take in and I'm sure you will have some questions. This is kind of an elaborate example to type off the top of my head so I don't guarantee it works 100%, but should be pretty close. Check the jquery docs first before asking question and try to get it working yourself. I'll try to answer questions, but I want you to try to solve it on your own first. That's how you learn, or at least I do.

[eluser]hermesfelipe[/eluser]
like you said, that's a lot to take but this is exactly what I need to get started. Thanks!
one more question: does this require any library, framework, to be loaded in the server or it's just javascript and CI doing the magic?

[eluser]InsiteFX[/eluser]
Most of us use jQuery but I also use xajax in CodeIgniter.

So those need to be loaded in your html head sections.