Is there any way I can make a dropdown submit a form without clicking a button to to submit it. I want to be able to change languages on the fly in my site. I have the languages all set up. Here's my dropdown:
<?php echo form_open('languages');
$language = array(
'select' => 'Select Language',
'english' => 'English',
'spanish' => 'Español',
'german' => 'Deutsch',
'french' => 'Français'
);
echo form_dropdown('language', $language);
echo form_hidden('current_page', uri_string());
echo form_submit('submit', $this->lang->line('header6'));
echo form_close();
?>
How do I get the form to work without the submit button?
The easiest way would be to use jQuery. Your form and dropdown should have IDs to make referencing them easier.
$attributes = array('id' => 'form1');
echo form_open('languages', $attributes);
...
echo form_dropdown('language', $language, null, 'mydropdown');
Also include the following javascript (you'll need to load jQuery on the page for this to work). I've included Google's hosted version but you could install it locally if you prefer.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#mydropdown").live("change keyup", function () {
$("#form1").submit();
});
});
</script>
You don't strictly need to bind to keyup, you could just bind to the change event (in which case you could replace live("change") with simply change() but keyup covers keyboard changes to the dropdown.
I use onchange with any live select menu... makes it very very easy to fire off other methods.
<select id="myID" onchange="alert('Fired!')"><option value="gold">Beer</option>
Related
I was wondering if it is possible to repopulate a dynamic dropdown(specifically the option of a select) after form validation fails which is generated by another dropdown at on change event.
My jQuery is working good on populating dynamic option of a select as well as at server-side when fetching the data, my only problem is when the form is submitted and validation fails, so basically the dynamic select option/s will reset.
Can somebody help me with this issue?
You have 2 options here:
1) You manually set the 2x select fields with CI and repopulate/set them. You would construct these based on the POST values that were incorrect.
Assuming that list A populates list B which populates list C you may not want to do that. In which case you could define some hidden variables such as this:
var field1 = '<?php $_POST['field1']; ?>';
var field2 = '<?php $_POST['field2']; ?>';
var field3 = '<?php $_POST['field3']; ?>';
$(document).ready(function(){
$('#field1').val(field1).trigger('change'); // or whatever on() query event you use
$('#field2').val(field1).trigger('change'); // or whatever on() query event you use
$('#field3').val(field1).trigger('change'); // or whatever on() query event you use
})
Might help? You would do the trigger to then load whichever lists/ajax calls populate each select box.
Yes it is possible,
this example works with Codeigniter 4 but I'm quite sure it works also with Codeigniter 3. Here I wanted to do a multiple dropdown field with Select2
<div class="form-group">
<label>Categories</label>
<?php
$parameters = array('class' => 'form-control select2_cat', "multiple" => "multiple");
$options = array();
foreach ($categories as $cat) {
$options[$cat['name']] = $cat['name'];
}
echo form_dropdown(
'categories[]',
$options,
set_value('categories[]') != "" ? set_value('categories[]') : 0,
$parameters
);
?>
</div>
You see from the code, I'm using set_value() . I'm checking also if set_value is empty string.
You could find more info here: https://www.py4u.net/discuss/37330
I have a Yii form which calls a render partial from another model (team has_many team_members). I want to call via ajax a partial view to add members in team/_form. All works (call, show, save) except for ajax validations (server and client side). If i submit form, member's model isn't validating, even in client side, it's not validating the required fields.
Any clue?
//_form
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'team-form',
'enableAjaxValidation'=>true,
'enableClientValidation'=>true,
'clientOptions'=>array(
'validateOnSubmit'=>true,
'validateOnChange'=>true
),
'htmlOptions' => array('enctype' => 'multipart/form-data'),
)); ?>
//Controller
public function actionMember($index)
{
$model = new TeamMember();
$this->renderPartial('_member',array(
'model'=> $model, 'index'=> $index
)
,false,true
);
}
public function actionCreate()
{
$model=new Team;
$members = array();
if(isset($_POST['Team']))
{
$model->attributes=$_POST['Team'];
if(!empty($_POST['TeamMember'])){
foreach($_POST['TeamMember'] as $team_member)
{
$mem = new TeamMember();
$mem->setAttribute($team_member);
if($mem->validate(array('name'))) $members[]=$mem;
}
}
$this->redirect(array('team/create','id'=>$model->id,'#'=>'submit-message'));
}
$members[]=new TeamMember;
$this->performAjaxMemberValidation($members);
$this->render('create',array(
'model'=>$model,'members'=>$members
));
}
//_member
<div class="row-member<?php echo $index; ?>">
<h3>Member <?php echo $index+1; ?></h3>
<div class="row">
<?php echo CHtml::activeLabel($model, "[$index]name",array('class'=>'member')); ?>
<?php echo CHtml::activeTextField($model, "[$index]name",array('class'=>'member')); ?>
<?php echo CHtml::error($model, "[$index]name");?>
</div>
</div>
ProcessOutput was set to true. No dice.
Switch renderPartial() to render(). No dice.
If you will look at the CActiveForm::run:
$cs->registerCoreScript('yiiactiveform');
//...
$cs->registerScript(__CLASS__.'#'.$id,"jQuery('#$id').yiiactiveform($options);");
Then you will understand that you validation will not work, because you render partial and not the whole page. And these scripts show up at the bottom of the page. So you should solve this by execute these scripts.
After you partial is rendered, try to get activeform script which should be stored at the scipts array:
$this->renderPartial('_member',array('model'=> $model, 'index'=> $index));
$script = Yii::app()->clientScript->scripts[CClientScript::POS_READY]['CActiveForm#team-form'];
after, send it with rendered html to page:
echo "<script type='text/javascript'>$script</script>"
Also remember before you will append recieved html on the page you should include jquery.yiiactiveform.js, if you not already did it(by render another form, or registerCoreScript('yiiactiveform')), on the page from calling ajax request. Otherwise javascript error will raised.
Hope this will help.
Edit:
Sorry I'm not understood that you are render part of form and not the whole. But you validation will not work exactly with the same issue. Because jQuery('#$id').yiiactiveform($options); script was not created for the field.
The actual problem is that the ActiveForm saves its attributes to be validated in the "settings" data attribute. I see you are already using indexes so what you need to add the new elements to this settings object in order for the validation to work. After the ajax response this is what must be done:
//Get the settings object from the form
var settings = $("#form").data('settings');
//Get all the newly inserted elements via jquery
$("[name^='YourModel']", data).each(function(k, v) {
//base attribute skeleton
var base = {
model : 'YourModel',
enableAjaxValidation : true,
errorCssClass : 'error',
status : 1,
hideErrorMessage : false,
};
var newRow = $.extend({
id : $(v).attr('id'),
inputID : $(v).attr('id'),
errorID : $(v).attr('id') + '_em_',
name : $(v).attr('name'),
}, base);
//push it to the settings.attribute object
settings.attributes.push(newRow);
});
//update the form
$("#form").data('settings', settings);
```
This way the ActiveForm will be aware of the new fields and will validate them.
Well, setting processOutput to true in renderPartial (in order to make client validation works on newly added fields) will not help in this case since it will only work for CActiveForm form and you don't have any form in your _member view (only input fields).
A simple way to deal with this kind of problem could be to use only ajax validation, and use CActiveForm::validateTabular() in your controller to validate your team members.
I've got a form with two submit buttons which I want to test using Selenium.
View:
<?php
$form = $this->beginWidget('CActiveForm', array(
'id' => 'profile-form',
'enableAjaxValidation' => true,
'action' => '',
'clientOptions' => array(
'validateOnSubmit' => true,
'validateOnChange' => true,
'validateOnType' => false,
),
));
?>
<input name="cancel" type="submit" value="Cancel" />
<input name="submit" type="submit" value="Save changes" />
<?php $this->endWidget(); ?>
Controller is nothing special, you can assume it just prints "Your profile has been saved" or "Your profile was not saved" depending on what $_POST['cancel'] it gets
Test code:
<?php
$this->open('/profile_form_url');
$submit_button_selector = 'css=#profile-form input[name="submit"]';
$cancel_button_selector = 'css=#profile-form input[name="cancel"]';
$this->clickAndWait($cancel_button_selector);
$this->assertTextPresent('Your profile was not saved');
$this->open('/profile_form_url');
$this->clickAndWait($submit_button_selector);
$this->assertTextPresent('Your profile has been saved');
The problem is that code works great in browser but not when running tests in Selenium/Firefox. When running tests, it "sees" the first button only (Cancel), clicking "Save changes" has the same effect. If you place Save changes button first, it will not "see" Cancel button.
If you turn enableAjaxValidation off, it works both in browser and Selenium, but I'd like to have a more elegant solution of course. Like for example turning off the AJAX validation on clicking on Cancel.
No, the problem doesn't depend on which locator you use for buttons (xpath, css, id).
clickAndWait() calls waitForPageToLoad() - ajax form validation will generally not trigger this event (unless a page loads), so your test will never complete; this is probably why if you turn ajax validation off it works.
You might want to look at the other options selenium provides (this is an old link to the free phpunit pocket guide that describes some other options - it's based on phpunit 3.1 though) such as using click() and then using waitForCondition() with some javascript to run and return true if the new text is displayed.
I followed tutorial from cakephp site but pagination with ajax works only once - the content is updated and its ok. But for the second time I click some page-link the whole page is reloaded - I think that click() event handlers are not binded again when content is refreshed by ajax - I don't know why... I am using this:
$this->Paginator->options(array(
'update' => '#content',
'evalScripts' => true
));
When I load page in the source code there is:
« Previous
$(document).ready(function (){
$("#link-925538478").bind("click", function (event) {
$.ajax({dataType:"html", success:function (data, textStatus){
$("#content").html(data);}, url:"\/final\/books\/index\/page:10\/sort:id\/direction:desc"});
return false;});
...
When I click for example next page (for the first time), everything is refreshed (the link hrefs also so it works) but the scripts are not reloaded so no click events are binded I think and clicking next page again just uses the link.
This is strange because I added this just after the pagination links:
<script>
$(document).ready(function (){
alert('yes');
});
</script>
And the alert is shown after first ajax refresh...
And I set up this thing ofc. <?php echo $this->Js->writeBuffer(); ?> at the end...
-------------------edit
I recognised that its not the paginator - for the following 2 links:
<?php echo $this->Js->link('link1', array('author' => 'abc'), array('update' => '#content')); ?>
<?php echo $this->Js->link('link2', array('author' => '123'), array('update' => '#content')); ?>
Its the same - when I click link1 its ajax, then when I click link2 there is normal reload - so it's somthing with script evaluation after ajax refresh... What that might be?
I am setting up JSHelper like this:
var $helpers = array('Js' => array('Jquery'));
I figured it out!!!
It's because ajax request sets the layout to app/View/Layouts/ajax.ctp and ajax.ctp is:
<?php echo $this->fetch('content'); ?>
I had to add this line
<?php echo $this->Js->writeBuffer(); ?>
To ajax.ctp to write java scripts (so the ajax links work after ajax request).
And now pagination works perfect!!!
Cake php Ajax Paginator not seems to be working fine. I had similar issues also.
I would recommend you to use the cakephp plugin Cakephp-DataTable
This plugin has implemented the pagination and it has most of the features by default. They have also provided documentation and if you find any difficulty in implementing please go throught the issues section
Also the developer is very responsive and can get clarifications for that plugin if you have any.
I'm trying to make a stackoverflow like tags system.
I followed this tutorial (in French): http://www.formation-cakephp.com/34/autocomplete-en-ajax which uses Prototype and Scriptaculous. Of course, I adapted it to my project
I get the following error:
this.element.setAttribute is not a function : controls.js Line 86
which corresponds to
this.element.setAttribute('autocomplete','off');
in the control.js file
I'm really new to Ajax, so I don't have a clue on what I'm doing (wrong)...
If you need some code from any file, let me know!
view.ctp:
<div class="input">
<label>Tags :</label>
<?php e($ajax->autoComplete(
'Tag.tag',
'/tags/autocomplete',
array(
'minChars' => 3,
'indicator' => 'ajaxloader'
)
)); ?>
<div id="ajaxloader" style="display:none;">
Chargement...
</div>
Controller:
function autocomplete()
{
$recherche = utf8_decode($this->data['Tag']['tag']);
$tags = $this->Tag->find(
'all',
array(
'fields' => 'DISTINCT tag',
'conditions' => "tag LIKE '$recherche%'",
'order' => 'tag',
'limit' => 10
)
);
$this->set(compact('tag', 'recherche'));
}
jQuery, scriptaculous, & prototype don't play well together but you can resolve this issue by putting jQuery in no-conflict mode.
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
Now instead of using the $ to for jQuery use $j so for example:
$j(document).ready(function() {
$j( "div" ).hide();
});
For more information on avoiding jQuery conflicts refer to the following: https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
It appears that scriptaculous doesn't play well with j-query. When I removed the j-query link I stopped getting an error. This definitely isn't an ideal solution, but I thought I'd share my discovery.