Question

I’m here because I can’t load a piece oh html code (a form that contain the client’s data) in a JQuery tabs, using JQuery AJAX.
I tried to use JQuery .load(), .append() .html(), but I can’t load a simple html form in a JQuery tab.
I use codeigniter and in the controller there are some function:
one of this named findClient create a CI pagination, that had a table that contain a radio input.

class Management extends CI_Controller {

function __construct(){
    parent::__construct();  
    $this->load->library('myclients');
    session_start();
}


function index($clientsFound=0){
      ...
  ...       
}


public function findCliente(){
    // generate a pagination, in a table. each row have a radio, 
    // and hads a rispective id of that record
}

When I click on the submit button, in a tab-1….
I call a JQuery AJAX

$('#fm_submit_report').click(function(event){
            event.preventDefault();
            var form_data = {
                id_client: $('input:checked').val(),
                ci_csrf_token: $.cookie("ci_csrf_token")
            };
            var form = $(this);
            $.ajax({
                url: 'management/createReport',
                type: 'POST',
                async : false,
                data: form_data,
                dataType: 'html',
                success: function(dati, stato){
                    $('#tabs').tabs('select',4);
                    alert('Creation of a Report');
                    console.log('stato: '+stato+'   received data: '+dati);
                    $('#create_report').load(dati);
                    alert('end of load');
                },
                error: function(xhr) {

                var message = 'Errore nell\'invio del form: ';
                var status = xhr.status;
                var text = xhr.statusText;

                message += status + ': ' + text;

                $('<div class="error"/>').text(message).
                appendTo(form);

                }
            });
            return false;

This ajax, pass the cient id, to the method createReport(). As U can see, this method, get the client informations using myclients library, and after pass this information, in a “piece of html code” to create a form with the client data inside

public function createReport(){
    $client=$this->myclients->findClientById($this->input->post('id_cliente'));
    $data['client'] = $client;
 // this is a client information to pass in the view to generate the form, that will load in a tab

   $hthmlcode=$this->load->view('create_report', $data);
   // create_view is the html form 

 echo $htmlcode;
}

}/* End of function createReport */

The html code to load in a JQuery tab is this

<table>
<tr>
    <td>                                                         
        <table style="margin-top:0" cellpadding="0" cellspacing="0" border="0">
            <?php echo form_open('management/storeReport') ?>
            <tr>
                <td class="report_left"><h2>Visit Date</h2></td>
                <td class="report_dx"><?php echo form_input('data_visita', '', 'class="data", id="datepickervisita"'); ?></td>
            </tr>
            [ ...cut ...]
            </tr>
        </table>
        <?php echo form_input($btnInviaReport); ?>

        <?php echo form_close(); ?>
        <div class="error_report"></div>
    </td>  
</tr>    
</table>
</div>

But unfortunately the code in html was not loaded in the 5th tabs… and the post return the entire page (instead my html form) !!!

I noticed, in firebug console,that the path of controller/method that I set in the url of ajax, is wrong, in fatc i set

url: 'management/createReport'

but in the console i see that the post is send to this address:

http://_local_ip_/management/management/createReport

but, obviously, if I don’t set the controller (just set url:’createReport’), the return variable “dati” will be empty, because I call a method of an undefined controller

success: function(dati, stato)

I suspect, that my .htaccess file is the cause of this trouble (why the name of controller is repeated twice, when the ajax is called ???)

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    #Removes access to the system folder by users.
    #Additionally this will allow you to create a System.php controller,
    #previously this would not have been possible.
    #'system' can be replaced if you have renamed your system folder.
    RewriteCond %{REQUEST_URI} ^system.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    RewriteCond %{ENV:REDIRECT_STATUS} 200
    RewriteRule .* - [L]

    RewriteRule ^(system|application) - [F,L]

    #When your application folder isn't in the system folder
    #This snippet prevents user access to the application folder
    #Submitted by: Fabdrol
    #Rename 'application' to your applications folder name.
    RewriteCond %{REQUEST_URI} ^public.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    #Checks to see if the user is attempting to access a valid file,
    #such as an image or css document, if this isn't true it sends the
    #request to index.php
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>

<IfModule !mod_rewrite.c>
    # If we don't have mod_rewrite installed, all 404's
    # can be sent to index.php, and everything works as normal.

    ErrorDocument 404 /index.php
</IfModule> 

public is the folder of my project, and it’s outside of system directory …

Answer 1

I solved the problem.
The problem was the url entry in the JQuery AJAX function, infact instead of

 url: 'management/createReport',

I create a function in my library Myjavascript/getSubmitRadio(), that take a string passed to controller, and return the entire JQuery function. The JQuery function is a string that I pass to the header view

 // -=[ Get the javascript code to insert in the header, to esecute a JQuery Submit on a specified form ]=-    
   $submitReportForm = $this->myjavascript->getSubmitRadio('fm_submit_report', 'input:checked', site_url('management/createReport'));

after I have a full custom jquery script that load in the view, so as to have:

$('#fm_submit_report').click(function(event){
            event.preventDefault();
            var form_data = {
                id_cliente: $('input:checked').val(),
                ci_csrf_token: $.cookie("ci_csrf_token")
            };
            $.ajax({
                url: 'http://10.0.0.135/management/createReport.html ',
                type: 'POST',
                async : false,
                data: form_data,
                dataType: 'html',
                success: function(dati, stato){
                    $('#tabs').tabs('select',4);
                    alert('Creazione report per il cliente scelto');
                    console.log('stato: '+stato+'   dati ricevuti: '+dati);
                    $('#create_report').html(dati);
                    alert('Fine caricamento');
                },
                error: function(xhr) {

                var message = 'Errore nell\'invio del form: ';
                var status = xhr.status;
                var text = xhr.statusText;

                message += status + ': ' + text;

                $('<div class="error"/>').text(message).
                appendTo(form);

                }
            });
            return false;

    });