I'm having problems with CGridView and one custom Formatter that uses javascript. When CGridView triggers an ajax request of any kind, my Formatter that works with javascript stops working.
Let's try one trivial example:
The Formatter
class DFormatter extends CFormatter {
public function formatTest(){
$js = <<<EOD
console.log("test");
EOD;
$cs = Yii::app()->getClientScript();
$cs->registerScript("testjs", $js);
return false;
}
}
The view:
<?php $this->widget('zii.widgets.grid.CGridView',
array(
'id' => 'development-grid',
'dataProvider' => $model->search(),
'filter' => $model,
'columns' => array(
'id',
array(
'name' => 'testField',
'type' => 'test',
),
array(
'class' => 'CButtonColumn',
),
),
)); ?>
After the first Ajax Request, the javascript code used in the formatter stops working, How can I get my javascript code works after every ajax call made by CGridView Widget?
Thanks.
You should not put scripts in the formatter.
Remove:
$js = <<<EOD
console.log("test");
EOD;
$cs = Yii::app()->getClientScript();
$cs->registerScript("testjs", $js);
Configure your grid view:
<?php $this->widget('zii.widgets.grid.CGridView', array(
//.. other options
// ADD THIS
'afterAjaxUpdate' => 'function() { afterAjaxUpdate(); }',
Add to <head> of /layouts/main.php:
<script src="<?= Yii::app()->getBaseUrl(true); ?>/js/myCustomJS.js"></script>
Create new JS file at /js/myCustomJS.js:
function afterAjaxUpdate() {
// do your formatting here
}
Related
I have code to get some data (terms = page-a) built with Wordpress.
Currently, the data of page-a is acquired like'terms' =>'page-a' and displayed on the example.com/page-a page.
I would like to change this data acquisition code so that the data along the lower page url can be acquired (for example, the data on page-b at example.com/page-b).
I created a code to get the url with $_SERVER and convert it, but I can't get the url because I am using ajax. I want to get the url with javascript and pass it to php.
How should I make the changes?
functions.php
add_action('wp_ajax_get_case', 'dk_get_case');
add_action('wp_ajax_nopriv_get_case', 'dk_get_case');
function dk_get_case() {
$headers['Access-Control-Allow-Origin'] = '*';
$return = ['status' => false, 'data' => [], 'message' => ''];
$case_clinics = [1,2,3,4];
foreach($case_clinics as $key => $case_clinic){
// (1)Get the current URL
$http = is_ssl() ? 'https' : 'http' . '://';
$url = $http . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
// (2)Get a string such as'page-a' from the URL
$keys = parse_url($url);
$path = explode("/", $keys['path']);
$terms = $path[2];
$dk_posts = get_posts(
array(
'showposts' => -1,
'post_type' => 'case',
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'case_clinic',
'field' => 'term_id',
'terms' => $case_clinic
),
array(
'taxonomy' => 'case_category',
'field' => 'slug',
'terms' => 'page-a'
)
)
)
);
taxonomy-case_category-page-a.php
<div class="col case-right">
<h3 style="font-family:'Futura PT'; font-weight:600">Clinic</h3>
<h4 style="font-weight:600">Clinic</h4>
//data display position
<div class="case-img" data-slider-3></div>
<div class="popup"></div>
</div>
Tried
footer.php
<script>
jQuery(document).ready(function () {
var url = window.location.href;
$.ajax({
type: "GET",
url: "taxonomy-case_category-page-a.php",
data: {"url": url},
});
});
taxonomy-case_category-page-a.php
<?php var_dump($_GET['url']); ?>
error
GET: 404error
https://example.com/pagea/taxonomy-case_category-page-a.php?url=https%3A%2F%2Fcharme-beauty.jp%2Fstaging%2Fcase%2Fpagea%2F
After user clicks on submit form, I need to call Zend validation of that form without refreshing whole page. I also use zend_Layout in my website. I have seen a lot of tutorials here, but still cant make it working.
Index Controller:
class IndexController extends Zend_Controller_Action {
public function init() {
}
public function indexAction() {
$this->view->static_data = "eg. ABCDEFG";
$this->view->form = new Application_Form_Test();
}
public function ajaxAction() {
// probably some code to hande ajax
}
}
View for index/index:
...
<?php
echo date('m/d/Y h:i:s a', time());
echo $this->static_data;
?>
<hr />
<?php echo $this->form ?>
...
Form:
class Application_Form_Test extends Zend_Form
{
public function init()
{
$this->setMethod('post');
$this->setAttrib('class', 'form1');
$this->addElement('text', 'email', array(
'label' => 'Your email address:',
'required' => true,
'filters' => array('StringTrim'),
'validators' => array(
'EmailAddress',
)
));
$this->addElement('text', 'name', array(
'label' => 'Your name:',
'required' => true,
'validators' => array(
array('validator' => 'StringLength', 'options' => array(3, 20))
)
));
// Add the submit button
$this->addElement('submit', 'submit', array(
'ignore' => true,
'label' => 'Send',
));
// And finally add some CSRF protection
$this->addElement('hash', 'csrf', array(
'ignore' => true,
));
}
}
So how can i validate form without refreshing rest of that page and see Zend Error Messages in case that form is not valid.
You can post the form to your Ajax action where you will instantiate the form and inject data from the request.
$form = new Form();
if ($this->getRequest()->isPost()) {
if ($form->isValid($this->getRequest()->getPost())) {
//save data
....
}
}
$this->view->form = $form;
You have two options:
Render the form in the view and respond with HTML. Using JavaScript replace current form with HTML returned by the Ajax request.
Get error messages using Zend_Form::getMessages() and respond with JSON.
$this-view->messages = $form->getMessages();
I have created a view with tabs and each tab has a form with ajax submit and gridview. I am using renderpartial in tabs widget to render the form and gridview and after clicking submit it filters the gridview. Everything looks fine within the tab till I click the submit button. After clicking submit it filters the gridview as expected.. but it does not load the bootstrap javascript and css so the layout is totally messed up and the tabs and menu bar all appears as a list and the page keeps on loading.
Anyone know why is it not loading the required scripts and css which I have preload in main config. Do I have to specify something seperately when calling ajax function from a view.
EDIT: Code Added
Code for tabs widget(producers.php)
<?php $this->widget(
'bootstrap.widgets.TbTabs',
array(
'type' => 'tabs',
'tabs' => array(
array('label' => 'Monthly' ,'id' => 'tab1',
'content' => $this->renderPartial('_prod_monthly',array('dataProvider' => $dataProvider,'dataProvider2' => $dataProvider2 ,'dataProvider3' => $dataProvider3, 'opm' => $opm, 'month' => $month),true,true),
'active' => true),
array('label' => 'Weekly' ,'id' => 'tab2',
'content' => $this->renderPartial('_prod_weekly',array('dataProvider4' => $dataProvider4,'dataProvider5' => $dataProvider5 ,'dataProvider3' => $dataProvider3, 'opm' => $opm, 'week' => $week),true,true)),
array('label' => 'Daily', 'id' => 'tab3', 'content' => 'ABC' )),
)); ?>
Code for partial view (_prod_monthly.php):
$form = $this->beginWidget(
'bootstrap.widgets.TbActiveForm',array(
'id' => 'form_monthly',
'enableAjaxValidation'=>true,
'type' => 'inline',
'method' => 'get',
'htmlOptions' => array('class' => 'well','onsubmit'=>"return false;",/* Disable normal form submit */
'onkeypress'=>" if(event.keyCode == 13){ send2(); } " /* Do ajax call when user presses enter key */),)); ?>
Select Month:
<?php echo CHtml::dropDownList('month', $month,
$sel_month); ?>
Select Employee:
<?php echo CHtml::dropDownList('opm', $opm,
$sel_opm); ?>
<?php $this->widget('bootstrap.widgets.TbButton',
array(
'buttonType'=>'button',
'label'=>'Submit',
'type' =>'primary',
'htmlOptions'=> array('onclick' => 'send2()'),)
);
$this->endWidget();
$this->widget('bootstrap.widgets.TbExtendedGridView', array(
'sortableRows'=>true,
'afterSortableUpdate' => 'js:function(id, position){ console.log("id: "+id+", position:"+position);}',
'type'=>'striped bordered hover',
'dataProvider'=>$dataProvider,
'type'=>'striped bordered responsive',
'template' => "{summary}\n{items}\n{extendedSummary}\n{exportButtons}"));?>
<script type="text/javascript">
function send2()
{
var data=$("#form_monthly").serialize();
$.ajax({
type: 'GET',
url: '<?php echo Yii::app()->createAbsoluteUrl("op/producers"); ?>',
data:data,
success:function(data){
document.write(data);
},
error: function(data) { // if error occured
alert("Error occured.please try again");
alert(data);
},
dataType:'html'});
}
</script>
Thanks.
There is no Yii based solution for handling UI-Widgets with AJAX right now and will never come.
Probably, this will never happen again in Yii2. The main Problem is about your missing JS-Ressources and Binding (as you know already). Yii will generate those codes (which you are missing) within the layout process, which is not called on "AJAX"-Requests. Don't try to put in your JS-Ressources by yourself. Yii generated JS-Cods are realy tricky ... and not that easy to handle manualy. This will come up with a lot of problems.
My solution: I dont use any of the "UI"-Features included in Yii. They come along with a lot of problems (Ajax, Multiple announces, etc.). Its not hard to write that features yourself or using jQueryUI.
Take a look at the Tab feature and try write it yourself .. and be happy ! :)
Ok, So I am trying to implement sort of a livesearch using the cake's Js Helper. The user will select a criteria to search by, using a drop down, and then tyoe in his search in an input text field. So far, this is what I have.
echo $this->Form->create(false,array('type'=>'post','default'=>false));
echo $this->Form->input('criteria',array(
'label'=>'Search Criteria',
'options' => array(
'id'=> 'By ID',
'name' => 'By Name',
'blood' => 'By Blood Type',
'type' => 'By Donor Type',
'age' => 'By Age',
'gender' => 'By Gender'
)
));
?>
Here is the input:
<?php echo $this->Form->input('query', array('type' => 'text', 'id' => 'query', 'name' => 'query', 'label' => false, 'placeholder' => 'Search')); ?>
<div id="loading" style="display: none; ">
<?php echo $this->Html->image('ajax_clock.gif');?>
</div>
And this is my Js code generated using the helper!
<script type="text/javascript">
<?php
echo $this->Js->get('#query')->event('keyup',$this->Js->request(
array('controller' => 'donors', 'action' => 'search'),
array('update'=>'#results','async' => true,'dataExpression' => true,'method' => 'post','data'=>'$(\'#query,#criteria\').serializeArray()')
),false);
?>
</script>
The above Js should grab the values of the criteria drop down aswell as the value inside the input field , on the keyup event. That said, I thought it was better to encode the data, and found the serializeArray method in the doc, which should do just that (I think..)
Now, my problem is I do not know how to retrieve that serialized data from the action receiving the request. So far I have this
function search() {
if($this->request->is('post')){
$data = $this->request->input('json_decode');
}
}
So basically, I want to know how to access the data from the search action, as well as, I tried to echo the $data variable, and die($data), but I do not know where the debugging info is displayed. Any help regarding both my questions would be MUCH appreciated! thanks!
I'm trying to do 3 selects in cakePhp + jQuery first one with provinces, second - localities, third - schools in that place. Here is my cake code (so far):
echo $this->Form->input('proviences', array(
'type' => 'select',
'empty' => true,
'options' => $proviences,
'label' => 'Province',
'class' => 'proviences',
'before' => '<div style="float:left;width:180px"',
'after' => "</div>"
));
echo $this->Form->input('localities', array(
'type' => 'select',
'empty' => true,
'options' => $localities,
'label' => 'City',
'class' => 'localities',
'before' => '<div style="float:left;width:180px"',
'after' => "</div>"
));
$schoolList = array();
foreach($schools as $value) {
$schoolsList[]=$value['name'];
}
echo $this->Form->input('school_id', array(
'label' => 'Szkoła',
'options' => $schoolsList,
'empty' => true,
'before' => '<div style="float:left;width:240px"',
'after' => "</div>",
'onchange' => "submit();",
));
In $schools i have a list looking this way
array(
id1 => array(
'name' => 'some_name',
'province' => 'some_province',
'locality' => 'some_city'
)
)
and using this to get lists of provinces,localities and school names
I was trying to use this but couldn't get it working ;/
Filter three select boxes based on previous selections
Is there a way of doing it in jQuery without ajax?
you can do it without using ajax, but for that you would need the schools array on client side, and create/edit options based on that on the client side, too.
here is a working fiddle. (hastily thrown together, but you get the idea). You need to get the schools array into js, though. you could either use AJAX for that or, pass it as json on the page:
echo 'var schools = JSON.parse('.json_encode($schools).');
You have to think about where to place that, too, so that the variable doesn't leak into the global scope. you could put it in the jQuery closure, for example:
echo '(function($){';
echo 'var schools = JSON.parse('.json_encode($schools).');
// now the javascript from the fiddle...
echo '}(jQuery))';