I'm using cakephp 2.1 just fine; I want to use jquery to have my form divided by tabs.
Already used jquery outside cake and got the tabs demo working. http://jqueryui.com/demos/tabs/
I've also made jquery available to cakephp from webroot folder and
ProjectsController.php
public $helpers = array('Js' => array('Jquery'));
add.ctp (at the very last line)
echo $this->Js->writeBuffer(); // Write cached scripts
Where and how should I invoke jquery in my view? I know I shoud use something similar to the demo:
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
But don't know where in my view to do it and the sintax.
Can anyone help?
Thanks a lot !
This if my full add.ctp
<div class="projects form">
<?php echo $this->Form->create('Project');?>
<fieldset>
<legend><?php echo __('Add Project'); ?></legend>
<?php
$arr_pr_subject = Configure::read('AR_SUBJECT');
$arr_pr_status = Configure::read('AR_STATUS');
$arr_pr_payment = Configure::read('AR_PAYMENT');
$arr_pr_country = Configure::read('AR_COUNTRY');
echo $this->Form->input('name', array('label' => 'Name:'));
echo $this->Form->input('pr_subject', array('label' => 'Subject:', 'options' => $arr_pr_subject));
echo $this->Form->input('pr_country', array('label' => 'Country:', 'options' => $arr_pr_country));
echo $this->Form->input('pr_number', array('label' => 'ASC Project Number:'));
echo $this->Form->input('pr_status', array('label' => 'Status:', 'options' => $arr_pr_status));
echo $this->Form->input('client_id', array('label' => 'Client:', 'options' => $clients));
echo $this->Form->input('pr_client_number', array('label' => 'Client Project Number:'));
echo $this->Form->input('exec_id', array('label' => 'Sales Executive:', 'options' => $execs));
echo $this->Form->input('pr_start', array('label' => 'Est. Start Date:'));
echo $this->Form->input('pr_end', array('label' => 'Est. End Date:'));
echo $this->Form->input('pr_notes', array('label' => 'Notes:'));
echo $this->Form->input('pr_payment', array('label' => 'Payment options:', 'options' => $arr_pr_payment));
?>
</fieldset>
<?php echo $this->Form->end(__('Submit'));?>
</div>
<?php
echo $this->Js->writeBuffer(); // Write cached scripts
?>
In your <head>, include jquery and jqueryui:
<script src="/js/path/to/jquery.js" type="text/javascript"></script>
<script src="/js/path/to/jqueryui.js" type="text/javascript"></script>
Then right under that, include a separate js file to keep all your code in
<script src="/js/myscripts.js" type="text/javascript"></script>
In that file (myscripts.js) put in your jQuery code:
$(function() {
$( "#tabs" ).tabs();
});
Then structure your form input to match jQuery Tabs syntax
<form action="...">
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tab1">
<!-- Tab 1 inputs in here -->
</div>
<div id="tab2">
<!-- Tab 2 inputs here -->
</div>
</div>
</form>
Related
Brief explanation of what I'm trying to do. I am trying to implement an autocomplete in a create form. I know this seems strange but the table that is being added to is a list of "out of office" people. So my autocomplete looks up user names on the user table, my actionCreate, can use the Last, First to look up the user id and add them to the table. This all works fine. I can see the autocomplete. The issue is this:
When I type in a partial name the list of names pops up but i cannot select from them. Whenever I mouse over the drop down the list disapears, the same thing happens when I press "down".
Here is the code for the form. I have tried multiple different ways of implementing an autocomplete and so far this one works the best I am just unable to get the autocomplete to fill the field.
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'away-mentor-form',
'enableAjaxValidation'=>true,
)); ?>
<p class="note">Fields with <span class="required">*</span> are required.</p>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<?php echo "Last-Name, First-Name"; ?><br/>
<?php
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'name'=>'name_search',
'value'=>$model->name_search,
'source'=>Yii::app()->createUrl('/AwayMentor/FindUserName'),// <- path to controller which returns dynamic data
// additional javascript options for the autocomplete plugin
'options'=>array(
'minLength'=>'1', // min chars to start search
'select'=>'js:function(event, ui) { console.log(ui.item.id +":"+ui.item.value); }'
),
'htmlOptions'=>array(
'id'=>'name_search',
'rel'=>'val',
),
));
echo $form->error($model,'name_search'); ?>
</div>
<div class="row buttons">
<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
</div>
<?php $this->endWidget(); ?>
Try Something Like: -
<?php
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'name' => 'name_search',
'value' => $model->name_search,
'source' => Yii::app()->createUrl('/AwayMentor/FindUserName'), // <- path to controller which returns dynamic data
// additional javascript options for the autocomplete plugin
'options' => array(
'minLength' => '1', // min chars to start search
'select' => "js: function(event, data) {
$('#name_search').val(data.item.value);
$(this).data('id',data.item.id);
return false;
}",
'focus' => "js: function(event,data){
$(this).val(data.item.value);
return false;
}"
),
'htmlOptions' => array(
'id' => 'name_search',
'rel' => 'val',
),
));
echo $form->error($model, 'name_search');
Yii::app()->clientScript->registerScript('autocomplete', "
jQuery('#name_search').data('autocomplete')._renderItem = function( ul, item ) {
return $('<li></li>')
.data('item.autocomplete', item)
.append('<a>' + item.value + '<br><i>' + item.id + '</i></a>')
.appendTo(ul);
};",
CClientScript::POS_READY
);
?>
I have comment on my site, that have a reply button. When the reply button is hit a new text box pops up and allows the user to reply to the comment.
For some if there is more than one comment on a page, the reply link only works for the comment at the bottom of the other comments. Essentially the first comment in a list of more than one.
I'm pretty certain is has to do with my click function class.
Here is my html and php structure:
<a name='reply_form_<?php echo $airwave_comment_row['id']; ?>' style="clear:both"></a>
<div id='reply_to_<?php echo $airwave_comment_row['id']; ?>' class="respond_structure_future" <?php if(isset($_GET['reply_to']) && $_GET['reply_to'] == $airwave_comment_row['id']) { echo 'style="display:block;"';}else{ echo 'style="display:none;"';} ?>>
<div class="response_polaroid_future">
<a href="http://www.cysticlife.org/Profile.php?id=<?php// echo $auth->id; ?>">
<img src="/styles/images/prof_thumbnail_2.jpg" />
</a>
</div>
<?php
echo validation_errors();
echo form_open('community/insert_airwaves_comments_replies/'.$this->uri->segment(3));
?>
<div class="respond_body_future">
<div class="response_arrow_future"></div>
<div class="response_tail_future"></div>
<div class="respond_data_future">
<?php
$data = array('name' => 'airwaves_comments_replies', 'id' => 'reply_to'. $airwave_comment_row['id'].'_textarea', 'class' => 'respond');
echo form_textarea($data, set_value('airwaves_comments_replies'));
$data = array('type' => 'hidden', 'name' => 'comment', 'value' => $airwave_comment_row['id']);
echo form_input($data);
?>
<div class="respond_nevermind">
nevermind
</div>
<?php
echo form_submit('sub_comment_reply', 'Reply');
?>
</div>
</div>
</form>
</div>
jquery:
<script type="text/javascript">
$(document).ready( function() {
$('.scroll').localScroll({ offset:{top:-0,left:0} });
$("a.reply_link").click( function() {
$("#"+$(this).attr('name')).fadeIn('slow');
});
$(".respond_nevermind a").click( function(event) {
event.preventDefault();
var reply_box = document.getElementById($(this).attr('href'));
$(reply_box).css('display','none');
var reply_textarea = document.getElementById($(this).attr('href')+"_textarea");
$(reply_textarea).val('');
});
});
</script>
Thanks in advance.
The click event handler is bound to the initial existing elements but dynamically created elements are not bound.
Try using live() or on() to bind dynamically created elements.
I am a fresher in Yii, I need to make a gridView for employee details in Yii, for that I have followed the procedures mentioned in http://yii-booster.clevertech.biz/components.html#tables.
And I have created a gridView with some sample data, exactly like clevertech.biz has done, and i succeeded in that. But my actual requirement is to make a gridView with popup windows for viewing and editing employee details and a javascript confirmation before deleting entries. Here is my code, that created a grid and a popup window but the actions for each button is not separated, the popup works for the entire cell under a particular column, not for a button in that cell. Can anyone help me to resolve this issue?
$stu->id = 3;
$stu->name = 'Stu';
$stu->address = 'Dent';
$stu->position = 'SE';
$stu->joinDate = '2012-12-14';
$stu->age = 30;
$stu->phone = 1112226789;
$persons = array($mark, $jacob, $stu);
$gridDataProvider = new CArrayDataProvider($persons);
// $gridColumns
$gridColumns = array(
array('name'=>'id', 'header'=>'#', 'htmlOptions'=>array('style'=>'width: 60px')),
array('name'=>'name', 'header'=>'Name'),
array('name'=>'address', 'header'=>'Address'),
array('name'=>'position', 'header'=>'Position'),
array('name'=>'joinDate', 'header'=>'Join Date'),
array('name'=>'age', 'header'=>'Age'),
array('name'=>'phone', 'header'=>'Phone'),
array('header'=>'Options',
'htmlOptions' => array('data-toggle'=>'modal',
'data-target'=>'#myModal'),
'class'=>'bootstrap.widgets.TbButtonColumn',
'viewButtonUrl'=>null,
'updateButtonUrl'=>null,
'deleteButtonUrl'=>null,),
);
$this->widget('bootstrap.widgets.TbExtendedGridView', array(
'type'=>'bordered',
'dataProvider'=>$gridDataProvider,
'template'=>"{items}",
'columns'=>$gridColumns,
));
?>
<!-- View Popup -->
<?php
$this->beginWidget('bootstrap.widgets.TbModal', array('id'=>'myModal')); ?>
<!-- Popup Header -->
<div class="modal-header">
<h4>View Employee Details</h4>
</div>
<!-- Popup Content -->
<div class="modal-body">
<p>Employee Details</p>
</div>
<!-- Popup Footer -->
<div class="modal-footer">
<!-- save button -->
<?php $this->widget('bootstrap.widgets.TbButton', array(
'type'=>'primary',
'label'=>'Save',
'url'=>'#',
'htmlOptions'=>array('data-dismiss'=>'modal'),
)); ?>
<!-- save button end-->
<!-- close button -->
<?php $this->widget('bootstrap.widgets.TbButton', array(
'label'=>'Close',
'url'=>'#',
'htmlOptions'=>array('data-dismiss'=>'modal'),
)); ?>
<!-- close button ends-->
</div>
<?php $this->endWidget(); ?>
<!-- View Popup ends -->
My columns its a little bit different but i think you'll understand.
You'll have to change your TbButtonColumn this way:
$this->widget('bootstrap.widgets.TbExtendedGridView', array(
'type'=>'bordered',
'dataProvider'=>$model->search(),
'filter'=>$model,
'template'=>"{items}",
'columns'=>array(
'id',
'firstName',
'lastName',
'language',
'hours',
array(
'header'=>'Options',
'class'=>'bootstrap.widgets.TbButtonColumn',
'buttons'=>array(
'view'=>
array(
'url'=>'Yii::app()->createUrl("person/view", array("id"=>$data->id))',
'options'=>array(
'ajax'=>array(
'type'=>'POST',
'url'=>"js:$(this).attr('href')",
'success'=>'function(data) { $("#viewModal .modal-body p").html(data); $("#viewModal").modal(); }'
),
),
),
),
)
)));
?>
<!-- View Popup -->
<?php $this->beginWidget('bootstrap.widgets.TbModal', array('id'=>'viewModal')); ?>
<!-- Popup Header -->
<div class="modal-header">
<h4>View Employee Details</h4>
</div>
<!-- Popup Content -->
<div class="modal-body">
<p>Employee Details</p>
</div>
<!-- Popup Footer -->
<div class="modal-footer">
<!-- close button -->
<?php $this->widget('bootstrap.widgets.TbButton', array(
'label'=>'Close',
'url'=>'#',
'htmlOptions'=>array('data-dismiss'=>'modal'),
)); ?>
<!-- close button ends-->
</div>
<?php $this->endWidget(); ?>
<!-- View Popup ends -->
and your actionView from your personController this way:
public function actionView($id)
{
if( Yii::app()->request->isAjaxRequest )
{
$this->renderPartial('view',array(
'model'=>$this->loadModel($id),
), false, true);
}
else
{
$this->render('view',array(
'model'=>$this->loadModel($id),
));
}
}
and then, all you have to do it's do the same thing with your update.
If you can't understand anything, feel free to ask any question.
Refer: TbButtonColumn class file (TbButtonColumn.php)
#param array $button the button configuration which may contain 'label', 'url', 'imageUrl' and 'options' elements.
array(
'class'=>'bootstrap.widgets.TbButtonColumn',
'buttons'=>array(
'view'=>array(
'visible'=>'true/false',
'label'=>'Description',
'url'=>'link',
'imageUrl'=>'linkImage',
'options'=>array(
),
),
),
),
Ok I am looping through my news postings and each one you can comment on. So I built a dialog modal for each news posting (which I think is silly), but it's the only way I can keep the news_id looping through and passing it into the form action attribute.
Anyway, hopefully that's not such a huge deal, but whenever I click on a comment link (.comment), it opens up ALL of the repeating dialog modals since it's the same class. How do I make it only open up that dialog modal with the same news id as the comment link they are clicking on so I can insert their comment based on the news id?
This is the HTML for my news looping (using CodeIgniter)
<div id="news">
<?php foreach($news_array as $news) { ?>
<div class="news_box">
<h3 align="right">Peanut - December 18, 2012</h3>
<p align="right"><?php if($admin) { echo anchor('admin/news/edit/'.$news->id, 'Edit').' | '.anchor('admin/news/delete/'.$news->id, 'Delete', array('onClick' => "return confirm('Are you sure you want to delete this post?')")); } ?></p>
<h2><?php echo $news->title; ?></h2>
<p><?php echo nl2br($news->body); ?></p>
<p align="right"><?php echo anchor('news/comment/'.$news->id, 'Comment', array('class' => 'comment', 'onclick' => 'return false')); ?></p>
<div class="comment-form" title="Comment">
<?php echo form_open('news/comment/'.$news->id, array('class' => 'form')); ?>
<fieldset>
<legend>Please Leave A Comment</legend>
<div class="row clearfix">
<div class="full control-groups">
<div class="clearfix">
<div class="form-status"></div>
<?php echo form_label('Comment', 'comment'); ?>
</div>
<?php echo form_textarea(array('name' => 'comment', 'id' => $news->id, 'maxlength' => 200, 'placeholder' => 'Please enter 5 - 200 characters.', 'value' => set_value('comment'))); ?>
</div>
</div>
</fieldset>
<? echo form_close(); ?>
</div>
<hr color="orange" />
</div>
<?php } ?>
</div>
Then here is my Javascript (only showing the important stuff so it's not all jumbled together):
$('.comment-form').dialog({
autoOpen: false,
height: 380,
width: 900,
modal: true,
buttons: {
"Comment": function() {
form = $('.form');
$.ajax({
type: 'POST',
url: form.attr('action'),
data: form.serialize(),
type: (form.attr('method'))
});
},
Cancel: function() {
$(this).dialog('close');
}
}
});
$('.comment').click(function() {
$(this).closest('.comment').find('.comment-form').dialog('open');
});
Thank you for any help!
There's a few ways you can do it. I'd probably just do it like this. Give each comment form an id e.g. id="comment-form-0", id="comment-form-1" etc as you're looping through and creating them in PHP.
Also for each comment element you store an HTML5 data attribute on it e.g. data-comment-id="0", data-comment-id="1".
Then in the JavaScript you'd do something like:
$('.comment').click(function() {
var commentId = $(this).attr('data-comment-id');
$('#comment-form-' + commentId).dialog('open');
});
I'd search for the parent container, then grab the appropriate comment form:
$('.comment').click(function() {
$(this).closest('div.news_box').find('.comment-form').dialog('open');
});
Given that [.closest()][1]:
Begins with the current element
Travels up the DOM tree until it finds a match for the supplied selector
The returned jQuery object contains zero or one element for each element in the original set
You likely have some containing element above div.news_box that has a class of .comment. The above code (untested), should stop the .closest() match at div.news_box and then find the sole child element with class .comment-form, thus only opening a single dialog.
I have a page that is using jQuery tabs. Within one of my tabs I have a div that contains a form (initially hidden) that I want to use to add content to the tab. What I have works perfectly in Chrome, Firefox, and Safari. But, in IE 7 the tab will not refresh. The post works and the data gets added to the database, but it simply will not show the new content after submitting it.
I don't think it matters - but, just for information I am using the Codeigniter PHP framework as well.
Here is my javascript:
<script type="text/javascript">
$(document).ready(function(){
// initialize the addChild form as hidden until user requests it open
$('#addChild').hide();
// open the form
$('#openDialog').click( function(){
$('#addChild').slideToggle();
return false;
});
// close the form
$('#closeDialog').click( function(){
$('#addChild').slideToggle();
return false;
});
// submit the form
$('#frmAddChild').submit( function(){
$('#addChild').slideToggle();
$.ajax({
url: '/children/add',
type: 'POST',
data: $('#frmAddChild').serialize()
//cache: false
});
//reload the children tab
$('#tabs').tabs('load',3);
return false;
});
});
</script>
And, here is my PHP/HTML:
<?php
// initialize the elements of the form
$frmAddChild = array(
'name' => 'frmAddChild',
'id' => 'frmAddChild',
'method' => 'post'
);
$child_name = array(
'name' => 'child_name',
'id' => 'child_name',
);
$child_dob = array(
'name' => 'child_dob',
'id' => 'child_dob'
);
$btnOpenDialog = array(
'name' => 'openDialog',
'id' => 'openDialog',
'value' => 'true',
'content' => 'Add Child'
);
$btnCloseDialog = array(
'name' => 'closeDialog',
'id' => 'closeDialog',
'value' => 'true',
'content' => 'Cancel'
);
// button that shows the drop down to add
echo form_button($btnOpenDialog);
?>
<div id="addChild" title="Add Child">
<?php echo form_open('children/add/',$frmAddChild); ?>
<table>
<tr>
<td>
<?php echo form_label('Child\'s Name', 'child_name'); ?>:
</td>
<td>
<?php echo form_input($child_name); ?>
</td>
</tr>
<tr>
<td>
<?php echo form_label('Date of Birth','child_dob'); ?>:
</td>
<td>
<?php echo form_input($child_dob); ?>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<?php echo form_submit('submit', 'Add'); ?>
<?php echo form_button($btnCloseDialog); ?>
</td>
</tr>
</table>
<?php echo form_close(); ?>
</div>
Does anyone have any ideas how I can get this working correctly in IE? Also, if anyone has any comments about how I have things structured, please let me know. I'm new to Codeigniter and I am by no means a javascript or jQuery expert.
Thanks for your help!
I think you should expand on the .ajax and add a .success and .error state in the AJAX call. Refer to this:
http://api.jquery.com/category/ajax/
Add that as part of the ajax process, because right now it looks like hitting submit will hide the form and reload the tabs even if there was an error.
Try that out and remove the return false and see what happens.