I have problem with AJAX in CakePHP. I have 2 different AJAX forms in one view. The first AJAX form works well, but the other one doesn't work properly. When I call the second AJAX, it doesn't set data from this form to $this->request->data, but the AJAX will run properly. After that, it will update <div id="about"></div>. Curious is fact, that after the div is updated and I try send data through this form again, it works and it will update my data in database. Also when I have only the second AJAX in the view, it will work properly and send the data first time I send the data through it.
Here's my code:
This is a view file:
<div id="price-list">
<?php echo $user['User']['price_list']; ?>
</div>
<?php
echo $this->Form->create('User');
echo $this->Form->input('User.price_list', array('label' => false));
echo $this->Js->submit('Save', array(
'url' => array('controller' => 'users', 'action' => 'ajax_edit_price_list'),
'update' => '#price-list',
'buffer' => false,
));
?>
<div id="about">
<?php echo $user['User']['about']; ?>
</div>
<?php
echo $this->Form->create('User');
echo $this->Form->input('User.about', array('label' => false));
echo $this->Js->submit('Save', array(
'url' => array('controller' => 'users', 'action' => 'ajax_edit_about'),
'update' => '#about',
'buffer' => false,
));
?>
I have also append <?php echo $this->Js->writeBuffer(); ?> in my default.ctp before </body>.
Do you have any idea, where can be a problem? Thanks
I wasn't able to reproduce your exact issue, but I think I know the problem. Your second form is being created inside of the first form. You need to add echo $this->Form->end(); to the end of both forms.
Also, the forms are getting created with the same ID. Although this isn't what's causing the problem, it's still not good. I suggest you take thaJeztah's advice and specify an ID manually inside $this->Form->create().
Related
here is a part of my view:
<?php
echo CHtml::dropDownList('al_ev_id', $model->al_ev_id,$listaDateAl,
array(
'ajax' => array(
'type'=>'POST',
'url'=>CController::createUrl('stat/ajaxStoricoSubDetails'),
'update'=>'#storicoSubDetails',
),
'class' => 'rowform',
));
...
?>
<div id="storicoSubdetails">
...
<?php
$this->Widget('ext.highcharts.HighchartsWidget', array(
'options'=>array(
'title' => array('text' => 'A title'),
'xAxis' => array(
'categories' => $model->streamLabel
),
'yAxis' => array(
'title' => array('text' => 'another title')
),
'series' => array(
array('name' => $model->labelGraph, 'data' => $model->streamData)
)
)
));
?>
...
</div>
the controller in the action 'ajaxStoricoSubDetails' reload the same $this->Widget('ext.highcharts.HighchartsWidget' etc, etc
the objective of this code is to update the starting x-value of the graph, modifying it with the dropdown
and here is my problem:
the first rendering of highcharts graph is ok; but, when I change the value in the DropDown, thus starting the ajax part, graph is not rendered
highcharts return an error 16 code, that means
Highcharts already defined in the page
in fact in the second rendering code (the ajax fired part) I find
<script src="http://code.highcharts.com/highcharts.js"></script>
that I think is the problem
is there any way to avoid this
Any other suggestions?
It's not the best long term solution, but...
If <script src="http://code.highcharts.com/highcharts.js"></script> is at the top of your page now, move it in <div id="storicoSubdetails"> instead.
That way the script reference should be overwritten when the ajax stuff reloads everything in the storicoSubdetails div, and you will only have 1 script reference on the page.
I'm trying to enable ajax validation in a form, I've added the right parameters to the form, but it's not working, here's my code:
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'user-form',
'enableAjaxValidation'=>true,
'htmlOptions' => array(
'enctype' => 'multipart/form-data',
'enableClientValidation'=>true
),
)); ?>
Please advice.
In the top of your action, add the following lines:
if(isset($_POST['ajax']) && $_POST['ajax']==='user-form'){
echo CActiveForm::validate($model);
Yii::app()->end();
}
I have more then one forms on one page and I am rendering one form using renderPartial, now if I want to validate it using ajax validation it don't work.
view code
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'bill-shipp-form',
'action'=>CController::createUrl('cart/index'),
'enableAjaxValidation'=>true,
'focus'=>array($billingShippingInfo,'first_name_b'),
//'enableClientValidation'=>true,
'clientOptions' => array(
'validateOnSubmit' => true,
'validateOnChange'=>false,
'afterValidate'=>'js:postBillShipp'
),
)); ?>
and in cart/index I have
if(isset($_POST['ajax']) && $_POST['ajax']==='bill-shipp-form')
{
echo CActiveForm::validate($billingShippingInfo);
Yii::app()->end();
}
Thanks in advance
You should use 4th parameter for render partial:
$this->render('view',$data,false,TRUE);
The 4th paramater is processOutput and you should set it to true
API
here is what i am trying to achieve...
i have a index view in which i have used the ajax helper not the cakephp one but an external one from http://www.cakephp.bee.pl/
i have succefully created an accordion using this helper.
now inside the accordion i have an addbutton which submits a form via ajax.
what i would like to do is when i submit the ajax form. i would also like to update the accordion.
now the accordion is also created by using the ajax helper.
Can this be done without a page refresh
ajax submit form code :
<div class="qnotesform">
<?php echo $this->Form->create('Qnote');?>
<ul class="qnotelist">
<li><?php echo $this->Form->input('Qnote.subject', array('label'=>'Title', 'rows' => '1')); ?></li>
<li> <?php echo $this->Form->input('Qnote.body', array('label'=>'Header', 'rows' => '1')); ?></li>
<?php echo $this->Form->hidden('Qnote.user_id', array('value'=>Authsome::get('id'))); ?>
<?php echo $this->Form->hidden('Step.0.user_id', array('value'=>Authsome::get('id'))); ?>
<li><?php echo $this->Form->input('Step.0.body', array('label'=>'Steps' ,'class' => 'step', 'rows' => '1')); ?></li>
</ul>
<?php echo $ajax->submit(
'Submit', array(
'url' => array(
'controller'=>'qnotes',
'action'=>'add')
));
how can i achieve this .
could someone please point me the right direction
another thing that i want to clear out is. If i want to be working one page . and all crud
action to be used without a page refresh.
does anybody have a working example for the above senarios .
or let me make it simple.
how to refresh a div without refreshing the page.
Solution:
code
<?php echo $ajax->submit('Submit', array(
'url'=> array(
'controller'=>'qnotes',
'action'=>'add'),
'update'=>'leftdiv',
'after'=>'$("#accordion").accordion({autoHeight: false, collapsible: true , header: "h3"});alert("after");',
));
however now I am facing another issue now,
I am updating the accordion, everything works fine but as soon as update the accordion.
the accordion loses its style class and stops working.
I only see links then. any idea how.
It seems that one of the options in the array of the submit method is 'complete' which should allow you to trigger a js function that will update your accordion:
<?php echo $ajax->submit(
'Submit', array(
'url' => array(
'controller'=>'qnotes',
'action'=>'add',
'complete' => 'updateAccordian(request.responseText)')
));
the reuqest.responseText will contain the reponse from your controller/action.
HTH
I'm trying to add ajax pagination into a view of my application.
I followed this tutorial: http://book.cakephp.org/view/1600/Ajax-Pagination
So, in this tutorial you always reload the whole content of the view by clicking the pagination links.
But what I want is, that it only reloads the part of the site which includes the paginated data.
I found a solution for myself:
I made a view which only contains the ajax pagination and included it via ajax request:
<?php $this->Html->scriptStart(array('inline' => false));?>
$(document).ready(function() {
<?php
echo $this->Js->request(array(
'controller' => 'topics',
'action' => 'index',
$location['Location']['id']
), array(
'async' => true,
'update' => '#ajax_topics',
));
?>
});
<?php $this->Html->scriptEnd();?>