jquery ajax codeigniter

Question

Hi,

I wanted to ask, why does the response from a ajax request using the native ajax not post or get return my entire page? is there anything I should know? I have looked at the documentation on jquery.com and nothing is mentioned of something like that unless i'm looking else where. Can I get any help on why that keeps happening?

This is the function that handles the validation of the form in question.

joe

function showsupport()
{
    $this->form_validation->set_rules('supportername','Your Name','trim|required|max_length[20]|xss_clean');
    $this->form_validation->set_rules('supporteremail','Email Address','trim|required|valid_email|xss_clean');
    $this->form_validation->set_rules('pledgedate','Pledge Date','trim|required|xss_clean');
    $this->form_validation->set_rules('messagetxt','Your Message','trim|required|xss_clean');

    if($this->form_validation->run() == FALSE)
    {
        echo validation_errors();
    } else {

        $this->load->model('support_m');
        $name = $this->input->post('supportername');
        $email = $this->input->post('supporteremail');
        $date = $this->input->post('pledgedate');
        $msg = $this->input->post('messagetxt');

        $qry = $this->support_m->storepledge($name,$email,$date,$msg);

        if($qry){
         //$this->template->write_view('content','thanks');
         //$this->template->render();
         $datamsg['supportmsg'] = 'Message Added Successfully';
        }else{
            echo 'There was an error inserting into db';
        }
    }
}

This is the view with the form generated.

<?php
                                    $formdata = array('id'=>'suppform');
                                    echo form_open('homepage/showsupport',$formdata);

                                    $namedata = array('name'=>'supportname','id'=>'supportname','size'=>'30','max_length'=>'25','value'=>set_value('supportname'));
                                    echo '<label for="supportername">Your Name:'.form_input($namedata).'</label><br /><br />';
                                    $emaildata = array('name'=>'supporteremail','id'=>'supporteremail','size'=>'30','max_lenth'=>'25','value'=>set_value('suppoteremail'));
                                    echo '<label for="supporteremail">Email Address:'.form_input($emaildata).'</label><br /><br />';
                                    $pledgedata = array('name'=>'pledgedate','id'=>'pledgedate','size'=>'30','max_length'=>'20','value'=>set_value('pledgedate'));
                                    echo '<label for="pledgedate">Today\'s Date:'.form_input($pledgedata).'</label><br /><br />';
                                    $msgdata = array('name'=>'messagetxt','id'=>'messagetxt','col'=>'2','rows'=>'8');
                                    echo '<label for="messagetext">Your Pledge:'.form_textarea($msgdata).'</label><br />';
                                    $submitdata = array('name'=>'submitbtn','id'=>'submitbtn','value'=>'Send');
                                    echo '<label for="submitbutton">'.form_submit($submitdata).'</label><br />';

                                    echo form_close();
                                ?>
            </div>
        <div id="errorsechoed"><?php echo validation_errors();?></div>

The html of the retured page is dumped in the div #errorsechoed

$('#suppform').submit(function(eve){
        eve.preventDefault();
    $.ajax({
    type: 'POST',
            cache: false,
    url: 'homepage/showsupport',
    data: $('#suppform').serialize(),
    beforeSend: function(){
                $('#supportform').block({message:'<h4> Processing...</h4>'})
    },
    complete: function(){

    },
    success: function(html){
                $('#errorsechoed').text(html);
    }

            });
});

I have been trying to get this figured out and I think I have made some progress, here is what I have:

a) the template library from William Colin works where regions are specified and so only a particular region will be refreshed all the time and not the only page. As a result it sort of works differently from other standard setups for codeigniter. This is definitely getting in the way of jquery getting a response from the server. It gets the bits of template library (i.e. regions) and renders it out which ends up rebuilding the whole page again.

b) When you run the form_validation library, Template doesn’t allow you to just load a view the normal way in codeigniter, rather you do this by running:

$this->template->write_view('contentregion','viewname'); //writes the view

$this->template->render(); //renders the view on screen.

so if this is not done if validation fails, the error messages spat out by the formvalidation library just never seem to get to the view.

I have tried a lot of permutations of using functions that come with this library and still am just able to render out another page of my site. confused

CONCLUSION:

I think this template library is great but it needs some updating so these issues are met. I will have to look at other templating systems when I have to do a site with a lot of ajax required. Hope Mr. William can see this and help look into this.

Thanks community for an avenue to say what I have learned. Hope this is useful to someone.

Answer 1

It's because you are setting the datatype in the postback to be of type 'html':

"html": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.

if you just want to show that the request succeeded or failed you can have #errorsindicated populated like so:

success: function(){
            $('#errorsechoed').html('<h4> Request Successfull...</h4>');
}
error: function(){
            $('#errorsechoed').html('<h4> Request Failed...</h4>');
}

you can get more detailed information on the error if you want. See the error option section of the jQuery ajax documentation: http://api.jquery.com/jQuery.ajax/