I am looking to make a simple Pop-Up window using TbModal (as requested by my superiors). However, I have no clue how to do this. I have never written a modal before and I am not certain if I am doing it completely wrong.
All I need to do, is to create a Pop-up window once a button is clicked. In this window I need to simply add a name, a description and something that is called carousel. However, whenever I try to make it work I get the following error:
Alias "bootstrap.widgets.TbModal" is invalid. Make sure it points to an existing directory or file.
Below is what the button in my view looks like (using a TbButtonColumn):
'buttons'=>array(
'update'=>array(
),
'delete'=>array(
),
'clone'=>array(
'id'=>'clone-dashboard-button',
'label'=>'Clone',
'title'=>'Clone',
'url'=>'Yii::app()->createUrl("path/to/actionClone", array("id"=>$data->id))',
'option'=>array(
'rel'=>'tooltip',
'data-toggle'=>'tooltip',
'title'=>'Clone'
),
),
),
As well as the modal:
<?php $this->beginWidget('bootstrap.widgets.TbModal', array(
'id'=>'clone-form',
// 'focus'=>'#Dashboard_clone_title',
'htmlOptions'=>array(
'tabindex'=>'-1',
))); ?>
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4>Test</h4>
</div>
<div class="model-body">
<div class="row">
<div class ="col-md-2">
<?php echo $form->labelEx($model,'title'); ?>
<?php echo $form->textArea($model,'title', array('rows'=>1, 'cols'=>20,'class'=>'resize-non form-control')); // Title input?>
</div>
<div class ="col-md-2">
<?php echo $form->labelEx($model,'description'); ?>
<?php echo $form->textArea($model,'description', array('rows'=>1, 'cols'=>30,'class'=>'resize-non form-control')); //Description ?>
</div>
<div class ="col-md-2">
<?php echo $form->labelEx($model,'carousel'); ?>
<?php echo $form->checkbox($model,'carousel'); ?>
</div>
</div>
</div>
<div class="modal-footer">
<!--Buttons-->
<div class="pull-right">
<?php $this->widget('booster.widgets.TbButton', array(
'buttonType'=>'Clone',
'url'=>'Yii::app()->createUrl("path/to/actionClone", array("id"=>$data->id))',
'htmlOptions'=>array(
'onClick'=>"
$(this).attr(\"disabled\", \"disabled\");"
),
)); ?>
<?php $this->widget('booster.widgets.TbButton', array(
'buttonType'=>'button',
'label'=>'Cancel',
'htmlOptions'=>array(
'data-dismiss'=>'modal',
),
)); ?>
</div>
</div>
<?php $this->endWidget(); ?>
Related
I've configure blackboot (i.e. bootstrap) on yii and I've been using it for the past couple of weeks to develop my website. However, at this point I'm running into a slight problem. Generally, the pages that are generated have a top menu, a side menu (on the left side that says something like "Create XXXX" "Manage XXXXX"_ and the content displayed in the center. I'd like to be able to delete the current menu and instead use that space to display my own form/field. The current code in the index view is
<?php
/* #var $this RecipientController */
/* #var $dataProvider CActiveDataProvider */
$this->breadcrumbs=array(
'Recipients',
);
$this->menu=array(
array('label'=>'List Recipient', 'url'=>array('index')),
array('label'=>'Create Recipient', 'url'=>Yii::app()->createUrl('recipient/create', array('id'=>$id))),
);
?>
<h1> Recipients </h1>
<div class="row">
<div class="span8 offset6">
<a class="btn btn-primary" href=
"<?php echo Yii::app()->createUrl('recipient/processpayment', array('id'=>$id)); ?>"> Pay All </a>
<a class="btn btn-inverse" href="<?php echo Yii::app()->createUrl('recipient/create', array('id'=>$id)); ?>" >Add User</a>
<div class ="span4">
</div>
</div>
</div>
<?php $this->widget('zii.widgets.grid.CGridView', array(
'id'=>'recipient-grid',
'dataProvider'=>$dataProvider,
'filter'=>$model,
'columns'=>array(
'name',
'position',
'msisdn',
'balance',
/*
* this is to implement the checklist
array(
'id'=>'autoId',
'class'=>'CCheckBoxColumn',
'selectableRows' => '50',
),
*/
),
)); ?>
<?
/*
php $this->widget('zii.widgets.CListView', array(
'dataProvider'=>$dataProvider,
'itemView'=>'_view',
));
*/
?>
In which $this->menu() defines the area that I would like to be using. In its place I would like to put this html.
<div class="row">
<div class="span3">
<table class="table table-bordered">
<form action="<?php echo Yii::app()->createUrl('recipient/processpayment', array('id'=>$id)) ?>" method="post" >
<tr class="primary"><td> List Summary</td></tr>
<tr ><td>
<?php echo $numpeople; ?> Recipients
</td></tr>
<tr ><td>
Total Due: <?php echo $totaldue ?> rwf
</td></tr>
<tr> <td>
<?php
$accounts= CHtml::listData(Account::model()->findAll(array("condition"=>"user_id = $user_id")),'id', 'name');
echo CHtml::dropDownList("listF",'id', $accounts);
?>
</td> </tr>
<tr> <td>
<button class="btn btn-block btn-primary " type="submit">Pay Now</button> </td> </tr>
</td></tr>
</form>
</table>
</div>
<div class="span9"></div>
</div>
But, whenever I try to place this small box inside of my web page - I am forced to place it inside of the main blank page in the center. How can I override this menu/html so that I can place my own form on the left side of the page?
I need to update a modal window and show it when I click in the edit button.
CONTROLLER:
public function actionUpdateAjax($id)
{
$contratos = ZfContratos::model()->findByPk($id);
$this->renderPartial('//ZfContratos/_form_update', array('model'=>$contratos), false, true);
}
INDEX:
<?php $this->beginWidget(
'bootstrap.widgets.TbModal',
array('id' => 'actualizar_contrato')
); ?>
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4>Actualizar contrato</h4>
</div>
<div class="modal-body">
<?php $this->renderPartial('//ZfContratos/_form_update', array('model'=>$contrato));?>
</div>
<div class="modal-footer">
<?php $this->widget(
'bootstrap.widgets.TbButton',
array(
'label' => 'CANCELAR',
'url' => '#',
'htmlOptions' => array('data-dismiss' => 'modal'),
)
); ?>
</div>
<?php $this->endWidget(); ?>
AND VIEW _contratos
At this moment I have this:
<?php echo CHtml::link('EDITAR', array('//ZfInmuebles/UpdateAjax', 'id'=>$data->zf_contrato_id), array('class'=>'btn', 'id'=>'vermas')); ?>
But I need that to be an ajaxbutton or ajaxlink, that refresh the div "actualizar_contrato" and show it.
This is just a reference implementation to give you an idea of how to do this, do modify as per your requirements
// your view
// Button to trigger modal
<?php echo CHtml::ajaxLink('EDITAR',array('//ZfInmuebles/UpdateAjax', 'id'=>$data-> zf_contrato_id), array(
'type'=>'POST',
"success"=>'js:function(html){
$("#actualizar_contrato >.modal-body").html(html);
$("#actualizar_contrato").modal("show");
}
'));?
.....
// modal
<?php $this->beginWidget(
'bootstrap.widgets.TbModal',
array('id' => 'actualizar_contrato')
); ?>
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4>Actualizar contrato</h4>
</div>
<div class="modal-body">
<?php
$contrato = new ZfContratos;
$this->renderPartial('//ZfContratos/_form_update', array('model'=>$contrato));
?>
</div>
<div class="modal-footer">
<?php echo CHtml::ajaxLink('Save', // Link Text
array('//ZfContratos/update', 'id'=>$data->zf_contrato_id), //url
array(// ajaxOptions
'data'=> 'js:$("#id_of_the_form").serialize()' ,
'type'=>'POST',
'success'=>'js:function(html){$("#actualizar_contrato >.modal-body").html(html) }'
)
)
);?>
<?php $this->widget(
'bootstrap.widgets.TbButton',
array(
'label' => 'CANCELAR',
'url' => '#',
'htmlOptions' => array('data-dismiss' => 'modal'),
)
); ?>
</div>
<?php $this->endWidget(); ?>
.....
And now in your controller modify as like below
//ZfContratos Controller
public function actionUpdate(){
// Your regular logic for saving
if(Yii::app()->request->isAjaxRequest){
if($model->save()){
$this->renderPartial("_mvsavedView",array('model'=>$model)) //OR echo "Saved Successfully";
} else {
print_r($model->getErrors());
}
Yii::app()->end();
}
}
I have been developing an application in Yii framework. At this point, I fall in an issue that is, I have an Order form where I select a registrant (all registrants come from database) from a dropdown, an item (all product items come from database) from dropdown and a input textbox where I type the quantity. There is a "ajaxSubmitButton" button to send all these values to the controller "actionCart" using Ajax. After receiving all values in the controller, I want to put all values in session variable. When I add another new item, the session values are being replaced what I want to hold all newly added items into the session variable. In this circumstance, what should I do. Please help me. I am giving my code snippets below:
in form:
<div class="form">
<?php
$form=$this->beginWidget('CActiveForm', array(
'id'=>'order-form',
'enableAjaxValidation'=>false,
'htmlOptions'=>array('class'=>'form-horizontal' , 'enctype'=>'multipart/form-data', ),
)); ?>
<div class="alert alert-info" xmlns="http://www.w3.org/1999/html">
<p class="note">Fields with <strong><span class="required">*</span></strong> are required.</p>
</div>
<?php echo $form->errorSummary($model); ?>
<div class="form-group">
<?php echo $form->labelEx($model,'registration_id', array('class' => 'control-label col-lg-4')); ?>
<div class="col-lg-8">
<?php
$data = CHtml::listData(Registration::model()->findAll(),'id', 'name');
echo $form->dropDownList($model,'registration_id',$data,array('class' => 'form-control chzn-select','prompt'=>'Select a Registrant'));
?>
</div>
<?php echo $form->error($model,'registration_id'); ?>
</div>
<div class="form-group">
<?php echo $form->labelEx($model,'item', array('class' => 'control-label col-lg-4')); ?>
<div class="col-lg-8">
<?php
$data = CHtml::listData(Products::model()->findAll(),'id', 'name');
echo $form->dropDownList($model,'item',$data, array('class'=>'form-control chzn-select' , 'id'=>'item', 'prompt'=>'Select an Item')); ?>
<?php
?>
</div>
<?php echo $form->error($model,'item'); ?>
</div>
<div class="form-group">
<?php echo $form->labelEx($model,'quantity', array('class' => 'control-label col-lg-4')); ?>
<div class="col-lg-2">
<?php
echo $form->textField($model,'quantity',array('class' => 'form-control','size'=>60,'maxlength'=>11));
?>
</div>
<?php echo $form->error($model,'quantity'); ?>
</div>
<div class="form-group">
<div class="col-lg-8 pull-right">
<?php
echo CHtml::ajaxSubmitButton('Add to Cart',Yii::app()->createUrl('admin/order/cart'),
array(
'type'=>'POST',
'update'=>'#cartResult',
),
array('class'=>'btn btn-primary btn-sm',));
?>
</div>
</div>
<div class="form-group">
<div id="cartResult" class="col-lg-12">
</div>
</div>
<?php $this->endWidget(); ?>
</div>
In controller:
public function actionCart()
{
if(isset($_POST["Order"])){
$item = $_POST["Order"];
$registration_id = $item["registration_id"];
$productId = $item["item"];
$quantity = $item["quantity"];
$quantity = $item["quantity"]=='' ? 1 : $item["quantity"];
$productInfo = Products::model()->findByPk(array('id'=>$productId));
$totalPrice = $productInfo->price * $quantity;
$session = Yii::app()->session;
$session['cart'] = array("product_id" => "$productId" , "product_name" => "$productInfo->name", "quantity" => "$quantity","price" => "$productInfo->price");
}
}
I'm trying to generate a layout with php and jQuery which lists certain profiles and organizes them in a certain way.
Specifically, I have an array of program titles and I'd like to list all of the program titles on the page as headers with two program titles per row. Then, I have an array of names which each contain an array of program names. I'd like to list all of the users that have a certain program in their array underneath the relevant program title. Additionally, the names start off hidden and each program title has a button underneath it which hides and shows tutors. I've created this layout using Bootstrap here:
<?php
include ('objects.php');
function tutorCreator($tutorName, $boxNum, $spanClass){
include ('objects.php');
echo "<div class='" . $spanClass . " tutorBox" . $boxNum . "'>";
}
?>
<div class="row-fluid">
<span class="programHeader span5">DreamWeaver</span>
<span class="programHeader offset1 span5">GIMP</span>
</div>
<div class="row-fluid">
<span class="span2 showTutors">Show tutors</span>
<span class="span2 offset4 showTutors">Show tutors</span>
</div>
<div class="row-fluid">
<?php
tutorCreator('Kevin Marks', '1', "span4");
tutorCreator('Kevin Marks','2', "span4 offset2");
?>
</div>
<div class="row-fluid">
<?php
tutorCreator('Helen Larson', "1", "span4");
tutorCreator('Helen Larson','2', "span4 offset2");
?>
</div>
<div class="row-fluid">
<span class="programHeader span5">Google Analytics</span>
<span class="programHeader offset1 span5">HootSuite</span>
</div>
<div class="row-fluid">
<span class="span2 showTutors">Show tutors</span>
<span class="span2 offset4 showTutors">Show tutors</span>
</div>
<div class="row-fluid">
<?php
tutorCreator('Ken Gato', '3', "span4");
tutorCreator('Julien Mans', '4', "span4 offset2");
?>
</div>
<div class="row-fluid">
<?php
tutorCreator('Ommed Kosh', '3', "span4");
?>
</div>
The classes added to the tutor names are for the purpose of being shown when the appropriate "show tutors" button is listed and to help with the layout.
The objects.php file contains the arrays with the list of tutors and the list of programs. This layout works fine. However, I'm trying to change the php code so that this layout is automatically updated each time I add a program or a tutor to the arrays in objects.php. I've been trying to figure it out for a few days and I just can't get an automatically updated layout which works well. I realize this is probably too broad a question but I've hit a road block so any help would really be appreciated. You can see a fuller version of the current layout here: http://www.tutorgrams.com/tutors. Thanks for any help.
Here is the objects.php file (with some tutors and programs removed for brevity):
<?php
$programs = array();
$programs['DreamWeaver'] = array(
'name' => 'DreamWeaver');
$programs['GIMP'] = array(
'name' => 'GIMP');
$programs['Google Analytics'] = array(
'name' => 'Google Analytics');
$programs['HootSuite'] = array(
'name' => 'HootSuite');
$tutors['Helen Larson'] = array(
'name' => 'Helen Larson',
'programs' => array('DreamWeaver', 'GIMP')
);
$tutors['Kevin Marks'] = array(
'name' => 'Kevin Marks',
'programs' => array('DreamWeaver', 'GIMP')
);
$tutors['Ommed Kosh'] = array(
'name' => 'Ommed Kosh',
'programs' => array('Google Analytics')
);
$tutors['Julien Mans'] = array(
'name' => 'Julien Mans',
'programs' => array('HootSuite')
);
$tutors['Ken Gato'] = array(
'name' => 'Ken Gato',
'programs' => array('Google Analytics')
);
?>
How does this look?
<?php
$numProgs = count($programs);
$progs = array_keys($programs);
$i = 0; ?>
<?php while($i < $numProgs): ?>
<div class="row-fluid">
<span class="programHeader span5"><?php echo $progs[$i]; ?></span>
<span class="programHeader offset1 span5"><?php echo $progs[$i + 1]; ?></span>
</div>
<div class="row-fluid">
<span class="span2 showTutors">Show tutors</span>
<span class="span2 offset4 showTutors">Show tutors</span>
</div>
<div class="row-fluid">
<?php foreach($tutors as $name => $data) {
$tutProgs = $data['programs'];
if(in_array($progs[$i], $tutProgs)) {
tutorCreator($name, $i, "span4");
}
} ?>
</div>
<div class="row-fluid">
<?php
foreach($tutors as $name => $data) {
$tutProgs = $data['programs'];
if(in_array($progs[$i + 1], $tutProgs)) {
tutorCreator($name, $i + 1, "span4 offset2");
}
}
?>
</div>
<?php $i += 2; ?>
<?php endwhile; ?>
It could probably be optimised a little but it seems to do the trick for me. The only thing is I don't have your themes so It might not look right yet.
I'm trying to do something, which I feel really dumb for, and I'm sure is very simple. However, I'm having such a difficult time trying to find any clear examples on the web. I've tried modifying divs and css, but to no avail.
Can anyone give me a clear example of how to have, for instance 2 or more form fields on the same line in Cactive form for creating a new model, as opposed to the default one on each line.
Any help would be greatly appreciated!!
I've attempted form = 'wide form'
but I get strange formatting that ends up like in the example here:
http://imgur.com/E5VVs
Suppose this is your form (taken from Yii documentation)
<?php $form = $this->beginWidget('CActiveForm', array(
'id'=>'user-form',
'enableAjaxValidation'=>true,
'enableClientValidation'=>true,
'focus'=>array($model,'firstName'),
)); ?>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<?php echo $form->labelEx($model,'firstName'); ?>
<?php echo $form->textField($model,'firstName'); ?>
<?php echo $form->error($model,'firstName'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'lastName'); ?>
<?php echo $form->textField($model,'lastName'); ?>
<?php echo $form->error($model,'lastName'); ?>
</div>
<?php $this->endWidget(); ?>
You could use blueprint default built depending on the width of your page to split it into 2 columns like
<?php $form = $this->beginWidget('CActiveForm', array(
'id'=>'user-form',
'enableAjaxValidation'=>true,
'enableClientValidation'=>true,
'focus'=>array($model,'firstName'),
)); ?>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<div class="span-8">
<?php echo $form->labelEx($model,'firstName'); ?>
<?php echo $form->textField($model,'firstName'); ?>
<?php echo $form->error($model,'firstName'); ?>
</div>
<div class="span-8 last">
<?php echo $form->labelEx($model,'lastName'); ?>
<?php echo $form->textField($model,'lastName'); ?>
<?php echo $form->error($model,'lastName'); ?>
</div>
</div>
<?php $this->endWidget(); ?>
you can get your self familiar with blueprint css or general css rules in tons of places on the web. sorry I cant help more without seeing your code. if there is already a built in magical solution for this perhaps someone else knows it?
For the below example:
<div class="row">
<?php echo $form->labelEx($model,'firstName'); ?>
<?php echo $form->textField($model,'firstName'); ?>
<?php echo $form->error($model,'firstName'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'lastName'); ?>
<?php echo $form->textField($model,'lastName'); ?>
<?php echo $form->error($model,'lastName'); ?>
</div>
All you need to do is set change a little css
.row {
width:200px; /* or whatever you prefer */
float:left;
}
Remember to clear:left after your finished floating elements or other elements may wrap oddly.
You can also use:
.row {
width:200px; /* or whatever you prefer */
display:inline-block;
}
This does something different but may be a better option for you. Your rows will stay in the dom structure unline when floating, but it may have unintended results. Try both and see what you come up with.
Just change the CSS class to "column" instead of "row" of the div prior to ones you wish to put on the same row.
Example:
To change the following four row divs ...
<div class="row"> ... </div>
<div class="row"> ... </div>
<div class="row"> ... </div>
<div class="row"> ... </div>
into three divs that sits side-by-side, and the last div on a new row, just do the following:
<div class="column"> ... </div>
<div class="column"> ... </div>
<div class="row"> ... </div>
<div class="row"> ... </div>
Or am I completely misunderstanding the question...