CODEWITHSUNDEEP
javascriptajaxcakephp
Frank
Frank

Reputation: 67

How to save my data to Mysql without page refresh

code in my view is bellow:

    <?php echo $form->create( "ChatForm", array("id" => "chat_form", "type" => "post",'class'=>'form_chat',"url" => array( "controller" => "qasamples", "action" => "quick_request" ) ) );
    echo $form->hidden( 'ChatForm.pid', array('class'=>'chat_input_hidden') );
    echo $form->hidden( 'ChatForm.uid', array('class'=>'chat_input_hidden') ); 
    echo $form->textarea('ChatForm.text',array('id'=>'text_input','rows'=>'14','cols'=>'400','style'=>'resize:none;width:907px;border:0px;','onkeyup'=>"onTextChange()")); ?>
    <p style="text-align:center;margin-top:20px;"><button type=submit id="chat_send">Send</button></p>
    <?php $form->end(); ?>

here is the controller code:

    public function quick_request(){ 

        if(!empty($this->data))
        {
            $fields=array('QasampleAnswer.uid','QasampleAnswer.pid','QasampleAnswer.text');
            $data=array(
            'uid'=>$this->data['ChatForm']['uid'],
            'pid'=>$this->data['ChatForm']['pid'],
            'text'=>$this->data['ChatForm']['text']);
            if($this->QasampleAnswer->save($data))
            {

                $data_update=array(
                    'id'=>$this->data['ChatForm']['pid'],
                    'status'=>'0');
                if($this->Qasample->save($data_update))
                    $this->render('text2');
            }

        }
    }

Can I just send the message and without fresh my page? I heard that CakePHP and AJAX can make it work, but I'm a new learner of CakePHP and Javascript also. I hope you guys can help me with it. Thank you very much. The page text2 is to turn the page back to where I was,but it not working well.So I hope I could send my message and just stay this page without refreshing.

Upvotes: 0

Views: 743

Answers (2)

Soulan
Soulan

Reputation: 391

Post your data with Ajax, jquery gives you a lot of options to do that... you can also implement a JavaScript and make it call when the for. is submitted (this can be achieved when you add in the array at $form->create array('onsubmit'=>'return yourFunction()') then you have to red your form data in this function, post it via ajax and very important return false in this function (it will prevent the form submitting) you can also make a button instead of the submit button that calls this function but then you have to implement in the text-field that when the user presses enter it should send the data... it is more comfortable with the onsubmit thing.

If you need an example I can also provide a practical code for this...

I will use a cake-less example of the JavaScript

<?php echo $form->create( "ChatForm", array("id" => "chat_form", "type" => "post",'class'=>'form_chat',"url" => array( "controller" => "qasamples", "action" => "quick_request", "onsubmit"=>"return performPostRequest(this)") ) );

this is the part you use to create the form

<script type="text/javascript">
function performPostRequest(form) {
parameters="";
for(var i=0;i<form.elements.length;i++) {
    if(parameters!="")
        parameters+="&";
    if(form.elements[i].checked==true || !(form.elements[i].type=="radio" || form.elements[i].type=="checkbox"))
        parameters+=form.elements[i].name+"="+encodeURIComponent(form.elements[i].value);
}

$.ajax({
    url: form.action,
    data: parameters,
    type : 'POST',
});

return false;
};
</script>

and this is the JavaScript function, I use it myself so it should work without a Problem :) It simulates your post request, but uses Ajax and therefore your page will not reload...

Upvotes: 2

FMQB
FMQB

Reputation: 673

You need a simple Ajax Call like the following and modify the form create so that it does not post automatically.

$ajax->form(array('type' => 'post',
  'options' => array(
      'model'=>ChatForm,
      //'update'=>'UserInfoDiv',
      'url' => array(
          'controller' => 'chatforms',
          'action' => 'quick_request'
      )
  )
));

Upvotes: 1

Related Questions