I need to change yii gridview filter to auto search(not autocomplete). for example I have an item name :StackOverflow. for this I need to type stack then press tab/enter to get the results. if I enter Sta the items will display which items start with letters sta(without press tab/enter keys).help me.Thank you
Hi please use below widget
<input type="hidden" name="formula_formula" id="formula_formula" value="">
<?php
$this->widget('zii.widgets.jui.CJuiAutoComplete',
array(
'name'=>'tff',
'source'=>'js: function(request, response) {
$.ajax({
url: "'.$this->createUrl('youraction').'",
dataType: "json",
data: {
term: request.term,
name: "treatment_formula_formula",
pk : "tff_id"
},
success: function (data) {
response(data);
}
})
}',
'htmlOptions'=> array('placeholder'=>'Formula List', 'class' => 'form-control auto_comp_search'),
'options' => array(
'autoFocus' => true,
'showAnim' => 'fold',
'minLength' => '0',
'select'=>'js:function( event, ui ) {
$(ui).hide();
$("#formula_formula").val(ui.item.id);
}'
),
));
?>
Related
I am using Yii framework on a project and i am using an extension which uses select2 jquery. I am unable to grasp how the implementation for ajax works with this extension or the select2.
My ajax call returns the following json.
[
{"id":"1", "text" : "Option one"},
{"id":"1", "text" : "Option one"},
{"id":"1", "text" : "Option one"}
]
The yii extension enfolds the select2 extension as below
$this->widget('ext.select2.ESelect2', array(
'name' => 'selectInput',
'ajax' => array(
'url'=>Yii::app()->createUrl('controller/ajaxAction'),
'dataType' => 'json',
'type' => 'GET',
'results' => 'js:function(data,page) {
var more = (page * 10) < data.total; return {results: data, more:more };
}',
'formatResult' => 'js:function(data){
return data.name;
}',
'formatSelection' => 'js: function(data) {
return data.name;
}',
),
));
I found a related question from this Question! The link to the extension am using is YII select2 Extention!
So a week later i merged with the answer to this question.
First let me highlight how the select2 ajax or in my case the Yii ESelect Extension.
The ajax options for jquery are the same as for the Eselect Extention i.e. url,type and datatype altho there is a slight difference on the format returned after successfully querying.
As for the result set for Eselect/select2 expects two parameters to be returned. that is
id : data.myOptionsValue;
text : data.myOptionText;
Reference :: https://select2.github.io/options.html#ajax
if we want to customize the format for the result set that is retured we can go a head and extend the plugin by using
'formatResult' => 'js:function(data){
return data.name;
}',
'formatSelection' => 'js: function(data) {
return data.name;
}',
I also had an issue getting my head around how the extention was quering. A look around and i realised that we have two datatype jsonp and json these two datatypes will handle data differently.
Jsonp (json padding) allows sending query parameters when querying. As for my case i am not passing any other parameters e.g an authkey e.t.c. In my case i changed the datatype to json and returning a json with id and text as results. See below my working snippet.
echo CHtml::textField('myElementName', '', array('class' => 'form-control col-lg-12'));
$this->widget('ext.select2.ESelect2', array(
'selector' => '#myElementName',
'options' => array(
'placeholder' => 'Search ..',
'ajax' => array(
'url' => Yii::app()->createUrl('controller/ajaxAction'),
'dataType' => 'json',
'delay' => 250,
'data' => 'js: function(term) {
return {
q: term,
};
}',
'results' => 'js: function(data){
return {results: data }
}',
),
),
));
I have a form with tags which have dependencies with a category field
Category 1
tag a
tag b
tag c
Category 2
tag d
tag e
tag f
...
When loading the page, I have "Category 1" and "the list of his tags"
Then when I change the category to "Category 2", I replace the list of tags via ajax.
When I submit the form, I get "This value is not valid". I guess that it's because the fact that the form expect values from the initial list.
So, I don't know how to proceed to get my tags to be validated.
Here is the code which generate the form
->add('category', null, array(
'choices' => $this->cat_tree,
'label' => 'Category',
'required' => true,
'empty_value' => '',
))
->add('tags', 'entity', array(
'class' => 'MyappServicesBundle:Category',
'query_builder' => function(EntityRepository $er) use ($parent_id) {
return $er->createQueryBuilder('c')
->where('c.parent = :parent_id')
->setParameter('parent_id', $parent_id)
->orderBy('c.title', 'ASC');
},
'required' => false,
'multiple' => true,
'expanded' => true,
'label' => 'Tags',
))
And here is the ajax code which replace the tags list
$('#myapp_servicesbundle_category').change(function() {
$.post(
"/tag/ajax/search",
{ parent_id: $(this).val() },
function( data ) {
var newtags = '';
jQuery.each( data, function( i, val ) {
newtags += ' <input type="checkbox" value="'+val.id+'" name="myapp_servicesbundle[tags][]" id="myapp_servicesbundle_tags_'+val.id+'">';
newtags += ' <label for="myapp_servicesbundle_tags_'+val.id+'">'+val.label+'</label>';
});
$('#myapp_servicesbundle_tags').html(newtags);
}, "json"
);
});
Thanks in advance for your help
from my experience you have to use an eventListener in Symfony. There is a quite clear example in the doc (more detailed in english than in french, be careful).
http://symfony.com/doc/current/cookbook/form/dynamic_form_modification.html#cookbook-form-events-submitted-data
I'm having issues converting the following jQuery/AJAX call to CakePHP's JS Helper.
Here is what currently works:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$("#DatabaseServerId").bind("change", function (event) {
var server_id = $("#DatabaseServerId").val();
$.ajax({
async:true,
dataType:"html",
evalScripts:true,
success:function (data, textStatus) {
$("#DatabaseEnvironmentId").html(data);
},
url:"\/apsportal\/servers\/get_environments/"+server_id
}
);
return false;
});
});
//]]>
</script>
Here is what I have thus far:
$data = $this->Js->get('#DatabaseServerId')->serializeForm(array('isForm' => true, 'inline' => true));
$this->Js->get('#DatabaseServerId')->event('change',
$this->Js->request(
array('controller' => 'servers', 'action' => 'get_environments'),
array(
'update' => '#DatabaseEnvironmentId',
'async' => true,
'type' => 'html',
'dataExpression' => true,
'evalScripts' => true,
'data' => $data,
)
)
);
The issue is that the parameter passed has an array key specified and narrows the usage of this action.
http://my.domain.com/servers/get_environments?data%5BDatabase%5D%5Bserver_id%5D=36
Since server_id is being used in other models, I would rather have this as generic as possible.
Note: I figure if I standardize to the JS Helper, if something changes in the future, I'll only have to change things once.
Per the comments, I used raw jQuery instead of CakePHP's methods.
I am having a very strange issue creating a piechart in Flot with data from PHP.
It seems to be drawing incorrectly, and I can't figure out why.
My PHP code (for testing) is:
echo json_encode(
'[{ label: "Series1", data: 10},
{ label: "Series2", data: 3},
{ label: "Series3", data: 9},
{ label: "Series4", data: 7},
{ label: "Series5", data: 8},
{ label: "Series6", data: 17}]'
);
My JS file is:
$.ajax({
type:'GET',
dataType:"json",
url:'../phpfile.php',
success: function(data) {
console.log(data);
$.plot($("#piechart"),data,{
series: {
pie: {
show: true
}
}
});
}
});
The consol log shows:
[{ label: "Series1", data: 10},
{ label: "Series2", data: 3},
{ label: "Series3", data: 9},
{ label: "Series4", data: 7},
{ label: "Series5", data: 8},
{ label: "Series6", data: 17}]
Which I thought was the correct format for flot...
But it graphs like this:
Does anyone have any ideas?
I believe your JSON currently is invalid, at the moment, you're trying to parse an JSON String, into a JSON String (If you get what I mean!) Currently, when I echo out from the PHP end with your echo'ed json_encode(), I'm provided with:
"[{ label: \"Series1\", data: 10},\r\n{ label: \"Series2\"]"
Furthermore, I would use PHP Arrays to encode JSON, like below:
<?php
$arr = array(
array(
"label" => "Series1",
"data" => 10
),
array(
"label" => "Series2",
"data" => 3
),
array(
"label" => "Series3",
"data" => 9
),
array(
"label" => "Series4",
"data" => 7
),
array(
"label" => "Series5",
"data" => 8
),
array(
"label" => "Series7",
"data" => 17
)
);
echo json_encode( $arr );
?>
PHP json_encode() does accept mixed variable types, but it's most popularly used with PHP arrays.
With the above, I'm able to construct the PIE chart successfully:
I am trying to give a validation rules for my form.. Foe every field it is working fine but for select box it is not coming fine,,
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('form#EnrollmentAccountHolderInformationForm').validate({
// ignore: function(){
// return $('form#EnrollmentAccountHolderInformationForm input:hidden, form#EnrollmentAccountHolderInformationForm select');
// },
debug: false,
rules: {
"data[Enrollment][personalinfo_source]": {
required:true
},
"data[Enrollment][person_last_name]": {
required:true
}
}
});
this is my select box name ;- data[Enrollment][personalinfo_source]
Here is code for select box:--
<h4 style="line-height:17px;">How did you hear <br/>about us?*</h4>
<?php $options = array(
'Event Sponsorship' => 'Event Sponsorship',
'Internet'=>'Internet',
'Newspaper' => 'Newspaper',
'Outdoor Advertising' =>'Outdoor Advertising',
'Radio' => 'Radio',
'Telemarketing' => 'Telemarketing',
'Television' => 'Television',
'Social Media' =>'Social Media',
'Other'=>'Other');
echo $this->Form->input('personalinfo_source',array('label'=>false,'id'=>'select','class' => "selectbox",'div'=>false,'options'=>$options, 'tabindex' => '16', 'empty' => 'Select','style' => "width:215px;"));
?>
<div style="clear:both"> </div>
Help me out.
Did you check your HTML code? as per your php code ('id'=>'select'). select box id is "select" not "EnrollmentAccountHolderInformationForm", i am not sure...