I am new to PHP and CakePHP. I m trying to call Ajax on changing drop down item. I have done it for a link as below code
echo $this->Html->link('TestLink', array('controller'=>'Tutors','action'=>'getData',$iid), array('class'=>'js-ajax'));
but unable to apply on drop down. I have used the code for drop down as below
echo $this->Form->input('My City', array('empty'=>'Select City','options' => $cities));
here, where to put code to call ajax.
Please help.
You should bind an ajax event to js-ajax
$('.js-ajax').on('change', function(){
// do some ajax here.
});
`
If its just the selector you're looking to add to trigger the ajax, then do the following:
echo $this->Form->input('My City', array(
'empty'=>'Select City',
'options' => $cities,
'class' => 'js-ajax'
));
Then you can have your javascript onchange called with this selector
Why you don't use jquery to do this?
put in your webroot and call in your layout(app/view/layouts)
$(document).ready(function(){
//your code
$("#youFieldId").change(function(){
//Your logic
});
});
Related
I am trying to troubleshoot a PHP form within a Drupal 7 site. At the moment, the form can only be submitted if the user clicks the button. I would like to enable submission with "Enter" key. How can I do this?
Here is the relevant code:
$form['search']['search_button'] = array(
'#type' => 'button',
'#value' => 'Search',
'#ajax' => array(
'callback' => 'ajax_search_callback',
// 'wrapper' => 'search-results',
'wrapper' => 'search',
'method' => 'replace',
'effect' => 'fade',
'event' => 'click',
),
);
I suspect that I need to change 'event' field or add another field.
I implemented this by adding this piece of code on textfield on which i want to trigger submit event:
$form['field_name']['#attributes']['onkeypress'][] if (event.keyCode == 13) {jQuery('.submit-selector').mousedown();}
You need to add the keypress attribute to the ajax array and set it to TRUE.
It is explained in the form api documentation, here.
EDIT :
The first solution works only for one single input field. To add keypress event on the form, you must add an "onkeypress" attribute to the form by adding it in the attributes array:
$form['#attributes']['onkeypress'] = 'if(event.keyCode==13){this.form.submit();}';
Where 13 is the keyCode for Enter (or return for a mac).
I don't know if it's the cleanest solution, but it should work.
This worked for me:
$form[FORM_ITEM]['#attributes']['onkeypress'][]="jQuery('input').keydown(function(e) {if (e.keyCode == 13) {e.preventDefault(); jQuery('#edit-submit').mousedown();}});";
I'm not an expert in JS, but this is how i would have tackled the issue myself.
I didn't test it, but I suggest adding something like the following statement in your js file
$( document ).ready(function() {
$( "#target" ).keypress(function() {
if ( event.which == 13 ) {
$('my_form').submit();
}
});
});
Basically, you look for the keypress event 13, then you submit your form.
I hope your form doesn't have any textarea tags, because you might face some user issues.
EDIT: Where to add the Javascript?
I assume you are writing a custom module to generate your form, so you can add a path to the .info file of your module or use the function drupal_add_js("your_path_to_js_file"); which is probably a better solution here.
I hope it helps.
Cheers
I have dropdown list with code like this
<?= $form->field($model, 'kodeBeras')->dropDownList(
ArrayHelper::map(Beras::find()->all(), 'kodeBeras', 'namaBeras'),
['prompt'=>'Pilih Beras','style'=>'width:300px']
)
?>
And below that there is a paragrpah which will be the result of event from above.
For example
'<h3>'var result'</h3>'
I want to insert Javascript event when dropdown value is change run 'function ambilData' on javascript.
var result = (result from function).
I don't know where this onchange event should be placed within that dropdown.
or is there any other way to fix this problem ?
I have search on google and youtobe but I cannot get it.
for example ( event with php):
Behavior and before request event
Try below code to use onchange event in dropdown list
<?= $form->field($model, 'kodeBeras')->dropDownList(
ArrayHelper::map(Beras::find()->all(), 'kodeBeras', 'namaBeras'),
[
'prompt'=>'Pilih Beras','style'=>'width:300px',
'onchange'=>'Your code here'
]
); ?>
Via jQuery change event:
<?= $form->field($model, 'kodeBeras')->dropDownList(
ArrayHelper::map(Beras::find()->all(), 'kodeBeras', 'namaBeras'),
[
'prompt'=>'Pilih Beras',
'style'=>'width:300px'
],
['id' => 'select']
)
?>
<?php $this->registerJs("
$('#select').on('change', function(){
var val = $(this).val();
console.log(val);
});
");?>
I'm trying to disable this CakePHP combo:
echo $this->Form->input('backupid', array('options' => $users_backup, 'class'=>'autocompletar', 'empty' => true, "label"=>__('Backup'), 'id' => 'cmbBackup'));
When I click this Checkbox:
echo $this->Form->input('criticalresource');
I've tried to add the property 'disabled' and 'readonly' in every combo element
The following image contains part of my DOM where you can see the Checkbox and the Combobox :
¿Is there any way to DISABLE that combo? I'd rather prefer a JS procedure, but every answer is welcome!
Thank you guys!
I could find an alternative answer: I'll put a 'div' above and insert this class inside:
.disabledbutton {
pointer-events: none;
opacity: 0.4;
}
Replace your critical resource input with the following code
echo $this->Form->input('criticalresource',array('onclick'=>'disableCombo();'));
And in JavaScript
<script>
function disableCombo()
{
var cmbBackup = document.getElementById("cmbBackup");
cmbBackup.attr('disabled','disabled');
}
</script>
Say I am on a view on my Cake app. E.g. http://myapp.com/controller/action/argument
I am aware of generating a link with the HtmlHelper like so:
echo $this->HtmlHelper->link( 'Link title', array('controller' => 'mycontroller', 'action' => 'myaction', $parameter) );
Now, say I have a dropdown select box with a load of options in it. What's the best way to have the link use the value in the select box as the parameter for the action? Would I need to use jQuery to change the link upon dropdown change?
You should wrote the CakePHP link as more generic as you can, so using a jQuery function like that:
function displayVals() {
var src = $( "#sel" ).val();
$('#link').attr('href',src);
}
and a HTML part like that:
<form action="../">
<select id="sel" name="myDestination">
<option value="http://www.yahoo.com/">YAHOO</option>
<option value="http://www.google.com/">GOOGLE</option>
</select>
</form>
click
your result will be something similar to this this fiddle.
yes you can do this by using jquery
just use html script block for getting the script inside your html.
echo $this->Html->scriptBlock("
$('#yourSelectBoxId').change(function() {
var url = '". $this->Html->url(array(
'controller' => 'mycontroller',
'action' => 'myaction', $parameter
)) ."'; // just setting your url like this.
// you can proceed further with url
})
")
I have a little problem with a Controller method AJAX call in Yii. The thing is that I'm trying to filter the data of one dropDownList based in the value of a previous selected item.
In the view file, where I figured out is the source of the problem, I have this piece of code:
<?php echo $form->labelEx($model,'Estado'); ?>
<?php echo $form->dropDownList($model,'estado',CHtml::listData(Estado::model()->findAll(),'id','nombre'),array(
'ajax'=>array(
'type'=>'POST',
'url'=>CController::createAbsoluteUrl('buscar/select'),
'update'=>'#'.CHtml::activeId($model,'tbl_municipio_id'),
),
'class'=>'form-control'
));
?>
<?php echo $form->error($model,'Estado'); ?>
On the Controller side, I got this:
public function actionSelect(){
echo "Hello world";
$data = Municipio::model()->findAll('tbl_estado_id=:tbl_estado_id',
array(':tbl_estado_id'=>(int) $_POST['Consultorio_estado']));
$data = CHtml::listData($data,'id','name');
foreach($data as $value=>$name)
{
echo CHtml::tag('option',
array('value'=>$value),CHtml::encode($name),true);
}
The ajax call to the Select method isn't triggered when the dropDownList is clicked. I tracked the request using Firebug and no error nor fail message is dropped.
Anyone knows what can I do?.
Thanks in advance.
With my knowledge in Yii 1.1.13, there is no such option for ajax for form->dropDownList, just Chtml::dropDownList does.
Therefore you have option to manually custom event change of form->dropDownList or add more jQuery script to handle it by yourself, or simply switch to use Chtml::dropDownList like below example
<?php
echo CHtml::dropDownList('inst_province','',
array(1=>'A',2=>'B',3=>'C', 4=>'D'),
array(
'prompt'=>'Select City',
'ajax' => array(
'type'=>'POST',
'url'=>CController::createUrl('city/selectAll'),
'update'=>'#city_area',
'data'=>array('city_param'=>'js:this.value'),
)));
?>
http://www.yiiframework.com/wiki/429/an-easy-solution-for-dependent-dropdownlist-using-ajax/