I have two dependent select box in my form for selecting country and state.
i have a multi select checkbox dropdown for selecting country,
and i want to fetch state of selected country
but i cannot understand how to pass multiple checked id in my function from javascript.
below is my html select list box code
<?php
echo $this->Form->input('UserLogDetail.service_area_category_id', array(
'id' => 'shipping_type',
'required' => false,
'multiple' =>'multiple',
'type' => 'select',
'class' => 'form-control drop-arrow',
'label' => false,
'options' => $serviceCategory,
'empty' => '--Select--'
));
?>
<?php
echo $this->Form->input('UserLogDetail.skills', array(
'class' => 'form-control',
'required' => false,
'id' => 'skill',
'label' => false,
'options' => '$states',
'empty' => '--Select--'
));
?>
javascript function
<script type="text/javascript">
$(document).ready(function() {
$("#shipping_type").on('change', function() {
var id = $(this).val();
if (id) {
var dataString = 'id=' + id;
$.ajax({
type: "POST",
url: '<?php echo Router::url(array("controller" => "Profiles", "action" => "loadSkills"),true); ?>',
data: dataString,
dataType: 'JSON',
cache: false,
success: function(html) {
$("#skill").html("");
$.each(html, function(key, value) {
$('<option>').val('').text('select');
$('<option>').val(key).text(value).appendTo($("#skill"));
});
$('#skill').selectpicker('refresh');
}
});
}
});
});
</script>
controlller function
public function loadSkills() {
$this->loadModel('Skill');
$states = array();
if (isset($this->request['data']['id'])) {
$states = $this->Skill->find('list', array('fields' => array('Skill.id','Skill.skill_name'),'conditions' => array(
'Skill.service_area_category_id IN' => explode(",",$this->request['data']['id']))));
}
echo json_encode($states);
exit();
}
try to call ajax below way
javascript :
$("#shipping_type").change(function() {
$.ajax({
type: "POST",
url: '<?php echo Router::url(array("controller" => "Profiles", "action" => "loadSkills"),true); ?>',
//passing data to php
data: { id:$(this).val() },
dataType: 'JSON',
cache: false,
success: function(html) {
$("#skill").html("");
$.each(html, function(key, value) {
$('<option>').val('').text('select');
$('<option>').val(key).text(value).appendTo($("#skill"));
});
$('#skill').selectpicker('refresh');
}
});
});
php
public function loadSkills() {
$this->loadModel('Skill');
$states = array();
//Getting post id
if (isset($this->request['id'])) {
$states = $this->Skill->find('list', array('fields' => array('Skill.id','Skill.skill_name'),'conditions' => array(
'Skill.service_area_category_id IN' => explode(",",$this->request['data']['id']))));
}
echo json_encode($states);
exit();
}
public function loadSkills() {
$this->getServiceArea();
$this->loadModel('Skill');
$skills = array();
if (isset($this->request['data']['id'])) {
$ids = explode(",",$this->request['data']['id']);
if(count($ids)>1){
$skills = $this->Skill->find('list', array('fields' => array('Skill.id','Skill.skill_name'),'conditions' => array(
'Skill.service_area_category_id IN' => $ids)));
} else {
$skills = $this->Skill->find('list', array('fields' => array('Skill.id','Skill.skill_name'),'conditions' => array(
'Skill.service_area_category_id' => $ids)));
}
}
echo json_encode($skills);
exit();
}
Related
I am working on Yii2. I have a gridview with checkbox and on a button click I am redirecting it to an action controller using ajax.
<?= Html::a('Disconnect', ['dco'], ['class' => 'btn btn-success', 'id'=>'dco']) ?>
<?php Pjax::begin(); ?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\CheckboxColumn', 'checkboxOptions' => function($d) {
return ['value' => $d['msn']];
}],
'ref_no',
'dept_code:ntext',
'dept_name:ntext',
'allowed_units',
'msn',
'units_consumed',
[
'label' => 'Disconnected',
'attribute' => 'disconnected',
'format'=>'raw',
'contentOptions' => ['style'=>'text-align:center'],
'value' => function($model){
return $model->disconnected == 1 ? '<span class="glyphicon glyphicon-ok text-success"></span>' : '<span class="glyphicon glyphicon-remove text-danger"></span>';
},
'filter' => Html::activeDropDownList($searchModel, 'disconnected', [''=>'All','1'=>'Yes','0'=>'No'], ['class' => 'form-control']),
],
'diconnected_at',
'reconnected_at',
'active_energy_total_m',
['class' => 'yii\grid\ActionColumn'],
],
]); ?>
<?php Pjax::end(); ?>
JS
<?php
$DCOurl = Url::toRoute(['/hecolog/dco']);
$script = <<< JS
$(document).ready(function () {
//DCO
$('#dco').on('click',function(e) {
e.preventDefault();
var strValue = "";
$('input[name="selection[]"]:checked').each(function() {
if(strValue!=="")
{
strValue = strValue + " , " + this.value;
}
else
strValue = this.value;
});
$.ajax({
url: '$DCOurl',
type: 'POST',
dataType: 'json',
data: {data:strValue},
success: function(data) {
alert(data);
}
});
});
});
JS;
$this->registerJs($script, static::POS_END);
?>
But when I click on the disconnect button it doesn't redirect to my controller. In console it gives me Not Found (#404): Page not found.
Update 1
I have updated the ajax call like below
$.ajax({
url: $DCOurl, // removed the inverted commas ''
type: 'POST',
dataType: 'json',
data: {data:strValue},
success: function(data) {
alert(data);
}
});
Controller
public function actionDco()
{
if(Yii::$app->request->isAjax && Yii::$app->request->post())
{
$data = explode(',',$_POST['data']);
var_dump($data);
die();
}
else{
$this->redirect('index');
}
}
After updating the code as suggested I am able to go into my controller but still not able to get the data
In console I am getting error Uncaught SyntaxError: Invalid regular expression flags
Update 2
Below is the code for my view
<?php
use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Pjax;
use yii\helpers\Url;
use yii\web\JqueryAsset;
/* #var $this yii\web\View */
/* #var $searchModel common\models\HescologSearch */
/* #var $dataProvider yii\data\ActiveDataProvider */
$this->title = 'DCO / RCO';
$this->params['breadcrumbs'][] = $this->title;
?>
<section class="content-header">
<h1>DCO / RCO List</h1>
</section>
<section class="content">
<div class="box">
<div class="box-body">
<p>
<?= Html::a('Disconnect', ['dco'], ['class' => 'btn btn-success', 'id'=>'dco']) ?>
<?= Html::a('Re-Disconnect', ['rco'], ['class' => 'btn btn-info','id'=>'rco']) ?>
</p>
<?php Pjax::begin(); ?>
<div class="pre-scrollable">
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\CheckboxColumn', 'checkboxOptions' => function($d) {
return ['value' => $d['msn']];
}],
'ref_no',
'dept_code:ntext',
'dept_name:ntext',
'allowed_units',
'msn',
'units_consumed',
[
'label' => 'Disconnected',
'attribute' => 'disconnected',
'format'=>'raw',
'contentOptions' => ['style'=>'text-align:center'],
'value' => function($model){
return $model->disconnected == 1 ? '<span class="glyphicon glyphicon-ok text-success"></span>' : '<span class="glyphicon glyphicon-remove text-danger"></span>';
},
'filter' => Html::activeDropDownList($searchModel, 'disconnected', [''=>'All','1'=>'Yes','0'=>'No'], ['class' => 'form-control']),
],
'diconnected_at',
'reconnected_at',
'active_energy_total_m',
['class' => 'yii\grid\ActionColumn'],
],
]); ?>
</div>
<?php Pjax::end(); ?>
</div>
</div>
</section>
<?php
$DCOurl = Url::toRoute(['/hescolog/dco']);
$RCOurl = Url::toRoute(['/hescolog/rco']);
$script = <<< JS
$(document).ready(function () {
//DCO
$('#dco').on('click',function(e) {
e.preventDefault();
var strValue = "";
$('input[name="selection[]"]:checked').each(function() {
if(strValue!=="")
{
strValue = strValue + " , " + this.value;
}
else
strValue = this.value;
});
$.ajax({
url: $DCOurl,
type: 'POST',
dataType: 'json',
data: {data:strValue},
success: function(data) {
alert(data);
}
});
});
$('#rco').on('click',function(e) {
e.preventDefault();
var strValue = "";
$('input[name="selection[]"]:checked').each(function() {
if(strValue!=="")
{
strValue = strValue + " , " + this.value;
}
else
strValue = this.value;
});
$.ajax({
url: '$RCOurl',
type: 'POST',
dataType: 'json',
data: {data:strValue},
success: function(data) {
alert(data);
}
});
});
});
JS;
$this->registerJs($script, static::POS_END);
?>
I must be doing something wrong which I am not understanding
Any help would be highly appreciated.
first of all url:'$DCOurl' is correct and url must be in single or
double quotation. so you have a not found problem:
is your project in htdocs or www followed by /inventory-web/backend/ or there are some more directories? you use relative url so the url would be for ex: localhost/inventory-web/backend/web/ ...
ajax type 'POST' should match with behaviors['verbs']['actions'] if you have set it
check controller file name, class name and namespace
First, if you're serving an Ajax request you cannot do a redirect:
public function actionDco()
{
Yii::$app->response->format = Response::FORMAT_JSON;
$rv=[];
if(Yii::$app->request->isAjax && Yii::$app->request->post())
{
$data = explode(',',$_POST['data']);
$rv["infos"]=$data;
$rv["status"]='gotData';
}
else{
$rv["url"]=Url::to('index');
$rv["status"]='redirect';
}
return $rv;
}
About the JS error, instead of:
$.ajax({
url: $DCOurl,
type: 'POST',
dataType: 'json',
data: {data:strValue},
success: function(data) {
alert(data);
}
});
Add the quotes aroun the $DCOurl and to manage the return value from the ajax call
$.ajax({
url: "$DCOurl",
type: 'POST',
dataType: 'json',
data: {data:strValue},
success: function(data) {
if(data.status=='gotData'){
alert(data.infos);
}
if(data.status=='redirect'){
window.location.href=data.url;
}
}
});
On me web I use ajax to submit data and pjax to reloade list view. On first time when I submit form it work good, save and reloade list view, on the second time, it save data but don't reload list view, it show response from action {"success":true,"id":68} . Can someone look on this?
action
public function actionReply()
{
$model = new ReplyForm();
$response = [];
if ($model->load(Yii::$app->request->post()) && $model->validate()) {
if ($model->save()) {
$response['success'] = true;
$response['id'] = $model->id;
}
} else {
$response['success'] = false;
}
Yii::$app->response->format = Response::FORMAT_JSON;
return $response;
}
script in view file
$(document).ready(function () {
var $form = $('form#reply-form');
$form.on('beforeSubmit', function (event) {
var data = $form.serialize();
$.ajax({
type: 'POST',
url: $form.attr('action'),
data: data,
dataType: 'json',
success: function (d) {
if(d.success === true){
//$.pjax.reload({container: '#comments', async: false});
$.pjax.reload('#comments', {timeout: false});
$form.trigger('reset');
}else {
alert('error');
}
}
});
return false;
});
});
and view form file
<div class="page-form">
<?php $form = ActiveForm::begin([
'id' => 'reply-form',
'action' => ['comment/reply'],
'options' => ['data-pjax' => true],
]); ?>
<?= $form->field($model, 'content')->textarea(['maxlength' => true, 'class' => 'form-control', 'rows' => 3]) ?>
<?= $form->field($model, 'item_id')->hiddenInput()->label(false) ?>
<?= $form->field($model, 'parent_id')->hiddenInput()->label(false) ?>
<div class="form-group">
<?= Html::submitButton('WyĆlij', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
view comments file
<?php Pjax::begin(['id' => 'comments']) ?>
<?= ListView::widget([
'dataProvider' => $commentDataProvider,
'summary' => false,
'itemView' => '_comment',
'options' => [
'tag' => 'div',
'class' => 'block-post-comments',
],
'pager' => [
'class' => LinkPager::class
]
]); ?>
<?php Pjax::end() ?>
i have two dependent select box in my form for selecting country and state.
when i select country India then it should populate its dependent state.upto this my code working fine...
bit i want to make this multiselect listbox.
Ex - if i select two countries from county dropdown then it populates states from two countries....not of single selected country.
below is my code...
HTML Select list box code
<?php
echo $this->Form->input('service_area_category_id', array(
'id' => 'shipping_type',
'required' => false,
'multiple' => 'multiple',
'type' => 'select',
'class' => 'form-control drop-arrow',
'label' => false,
'options' => $serviceCategory,
'empty' => '--Select--'
));
?>
<?php
echo $this->Form->input('ship_category', array(
'class' => 'form-control drop-arrow',
'required' => false,
'id' => 'state',
'label' => false,
'options' => '$states',
'empty' => '--Select--'
));
?>
Controller function
public function getServiceArea(){
$this->loadModel('ServiceAreaCategory');
$serviceCategory = $this->ServiceAreaCategory->find('list', array(
'conditions' => array(
'is_active' => 1
),
'fields' => array(
'ServiceAreaCategory.id',
'ServiceAreaCategory.name'
),
'order' => 'name ASC'
));
$this->set('serviceCategory', $serviceCategory);
}
public function loadSkills() {
$this->loadModel('Skill');
$states = array();
if (isset($this->request['data']['id'])) {
$states = $this->Skill->find('list', array(
'fields' => array(
'Skill.id',
'Skill.skill_name'
),
'conditions' => array(
'Skill.service_area_category_id' => $this->request['data']['id']
)
));
}
echo json_encode($states);
exit();
}
Ajax Script
<script type="text/javascript">
$(document).ready(function() {
$("#shipping_type").on('change', function() {
var id = $(this).val();
if (id) {
var dataString = 'id=' + id;
$.ajax({
type: "POST",
url: '<?php echo Router::url(array("controller" => "Profiles", "action" => "loadSkills")); ?>',
data: dataString,
dataType: 'JSON',
cache: false,
beforeSend: function() {
$('.spinicon').show();
},
complete: function() {
$('.spinicon').hide();
},
success: function(html) {
$("#loding1").hide();
$.each(html, function(key, value) {
$('<option>').val('').text('select');
$('<option>').val(key).text(value).appendTo($("#state"));
});
$('#state').selectpicker('refresh');
}
});
}
});
});
</script>
in your cakephp side function should be
public function loadSkills() {
$exploded_ids=explode(",",$this->request['data']['country_ids']);
$ids= "IN ('".implode(",",$exploded_ids).")";
$this->loadModel('Skill');
$states = array();
if (isset($this->request['data']['id'])) {
$states = $this->Skill->find('list', array('fields' => array('Skill.id','Skill.skill_name'),'conditions' => array(
'Skill.service_area_category_id '.$ids )));
}
echo json_encode($states);
exit();
}
And your Javascript and AJAX code Should be
<script type="text/javascript">
$(document).ready(function() {
$("#shipping_type").on('change', function() {
var ids = $(this).val();
if (id) {
$.ajax({
type: "POST",
url: '<?php echo Router::url(array("controller" => "Profiles", "action" => "loadSkills"),true); ?>',
data: {country_ids: ids}
dataType: 'JSON',
cache: false,
beforeSend: function() {
$('.spinicon').show();
},
complete: function() {
$('.spinicon').hide();
},
success: function(html) {
$("#loding1").hide();
$("#state").html("");
$.each(html, function(key, value) {
$('<option>').val('').text('select');
$('<option>').val(key).text(value).appendTo($("#state"));
});
$('#state').selectpicker('refresh');
}
});
}
});
});
</script>
I am about to submit my form Using Ajax,i have successfully submit my form using POST but don't know how to use Ajax with Symfony
builform
$builder->add('name', 'text', array('constraints' => array(new NotBlank()), 'attr' => array('placeholder' => 'Name')))
->add('gender', 'choice', array('empty_value' => 'Select Gender', 'constraints' => array(new NotBlank()), 'choices' => \AppBundle\Entity\Records::$gender_list, "required" => true))
->add('dateOfBirth', 'birthday', array('label' => 'Date Of Birth','required'=>true))
->add('image_path', 'file', array('label' => ' ','required'=>false, 'data_class' => null, 'constraints'=>array(new Assert\File( array('mimeTypes'=>$mime_types, 'maxSize'=>'2048k' )))))
->add('country_of_birth', 'entity', array('empty_value' => 'Country of Birth',
'class' => 'AppBundle\Entity\Location',
'property' => 'country',
'label' => 'Country of Birth'
))
->add('religion', 'entity', array('empty_value' => 'Select Religion',
'class' => 'AppBundle\Entity\Religion',
'property' => 'name',
'label' => 'Religion'
));
Action
$success = false;
$record_rep = new \AppBundle\Entity\Records();
$form = $this->createForm(new \AppBundle\Form\AddPersonType(), $record_rep);
if ($this->getRequest()->getMethod() == 'POST') {
$form->submit($request);
if ($form->isValid()) {
$data = $form->getData();
$file = $data->getImagePath();
$image = $file->getClientOriginalName();
$new_image_name = $this->hanldeUpload($image, $file);
$this->savetoDB($data, $record_rep, $new_image_name);
$success = true;
}
}
return $this->render('AppBundle:Homepage:add_person_form.html.twig', array('form' => $form->createView(), 'success'=>$success ));
}
With jQuery, use serialize() the form and post it to your route.
$('#form').submit(function(e) {
e.preventDefault();
var url = "{{ path('YOUR_PATH') }}";
var formSerialize = $(this).serialize();
$.post(url, formSerialize, function(response) {
//your callback here
alert(response);
}, 'JSON');
});
In your action
if ($form->isSubmitted() && $form->isValid()) {
....
// or return new JsonResponse($anyData);
return new Response(json_encode(['status'=>'success']));
}
it must be ok like this. but you can add some parameters like the format, methods etc... in your routing.
For the Ajax:
$("#person").submit(function(e){
var formURL = "{{ path('form') }}";
var formData = new FormData(this);
$.ajax({
url: formURL,
type: 'POST',
data: formData,
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
success: function(data, textStatus, jqXHR)
{
},
error: function(jqXHR, textStatus, errorThrown)
{
}
});
e.preventDefault(); //Prevent Default action.
e.unbind();
});
$("#person").submit();
And for Action
if ($request->isXmlHttpRequest()) {
....
return new Response(json_encode(array('status'=>'success')));
}
I have one form with activated clientValidation, but the JS code to validate the form has not been registered by Yii.
My form code is here:
$form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
'id' => 'login-form',
'enableClientValidation' => true,
'clientOptions' => array(
'validateOnSubmit' => true,
'afterValidate' => 'js:function(form, data, hasError) {
if (!hasError){
str = $("#login-form").serialize() + "&ajax=login-form";
$.ajax({
type: "POST",
url: "' . Yii::app()->createUrl('/') . '",
data: str,
dataType: "json",
beforeSend : function() {
$("#login").attr("disabled",true);
},
success: function(data, status) {
if (data.authenticated) {
window.location = data.redirectUrl;
} else {
$.each(data, function(key, value) {
var div = "#"+key+"_em_";
$(div).text(value);
$(div).show();
});
$("#login").attr("disabled",false);
}
},
});
return false;
}
}',
),
));
echo $form->textField($model, 'username');
echo $form->passwordField($model, 'password');
echo TbHtml::submitButton('Login', ['id' => 'login']);
$this->endWidget();
The registered JS code is only this:
<script type="text/javascript">
/*<![CDATA[*/
jQuery('body').popover({'selector':'a[rel=popover]'});
jQuery('body').tooltip({'selector':'a[rel=tooltip]'});
/*]]>*/
</script>
I don't see, why its not working. Please help me to find the bug.
The code is from this blog post: http://tahiryasin.wordpress.com/2013/05/23/ajax-based-yii-login-form/