AJAX validation not firing on tabular input fields - javascript

The validation works for the first model on my form, but doesn't work for the Items array of models that are looped through. - this is incorrect now as validation is occuring, but not firing when editing any of the BookingRoom input fields.
I have found that when I re-enter data into a Booking field that has just had data removed(displaying a green background in the input box after putting it back in) ajax validation is fired, but it isn't fired when I click on one of the BookingRoom input fields and edit one of those. I have debugged in Firebug the AJAX response for editing a Booking field and the error messages are sent for any of the BookingRoom fields which are invalid.
Here is my performAjaxValidation function:
protected function performAjaxValidation($model, $items)
{
if(isset($_POST['ajax']) && $_POST['ajax']==='booking-form')
{
//echo CActiveForm::validate($model);
$model = CJSON::decode(CActiveForm::validate($model));
$items = CJSON::decode(CActiveForm::validateTabular($items));
var_dump(CJSON::encode(CMap::mergeArray($model, $items)));
Yii::App()->end();
}
}
Update.php
<?php //Yii::app()->clientScript->registerCoreScript('jquery'); ?>
<?php
/* #var $this BookingController */
/* #var $model Booking */
/* #var $bookingRoom BookingRoom */
$this->breadcrumbs=array(
'Bookings'=>array('index'),
$model->id=>array('view','id'=>$model->id),
'Update'
);
$this->menu=array(
array('label'=>'List Booking', 'url'=>array('index')),
array('label'=>'Create Booking', 'url'=>array('create')),
array('label'=>'View Booking', 'url'=>array('view', 'id'=>$model->id)),
array('label'=>'Manage Booking', 'url'=>array('admin'))
);
?>
<h1>Update Booking <?php echo $model->id; ?></h1>
<?php //$this->renderPartial('_form', array('model'=>$model)); ?>
<div class="form">
<button id="btnAdd" type='btnAdd'>Add</button>
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'booking-form',
// Please note: When you enable ajax validation, make sure the corresponding
// controller action is handling ajax validation correctly.
// There is a call to performAjaxValidation() commented in generated controller code.
// See class documentation of CActiveForm for details on this.
'enableAjaxValidation'=>true, 'enableClientValidation' => true, 'errorMessageCssClass' => 'error'
)); ?>
<p class="note">Fields with <span class="required">*</span> are required.</p>
<?php echo $form->errorSummary(array($model)); ?>
<div class="row">
<?php echo $form->labelEx($model,'customerId'); ?>
<?php echo $form->textField($model,'customerId'); ?>
<?php echo $form->error($model,'customerId'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'date'); ?>
<?php echo $form->textField($model,'date'); ?>
<?php echo $form->error($model,'date'); ?>
</div>
<table id="tblData">
<tbody>
<?php foreach($items as $i=>$item): ?>
<tr>
<td>
<div>
<?php echo $form->labelEx($item,'Room No'); ?>
<?php echo $form->dropDownList($item, "[$i]roomId", CHtml::listData(
Room::model()->findAll(), 'id', 'id'), array('single'=>'single', 'size'=>1)
); ?>
</div>
</td><td>
<div>
<?php echo $form->labelEx($item,'startDate'); ?>
<?php echo $form->textField($item,"[$i]startDate"); ?>
<?php echo $form->error($item,'startDate'); ?>
</div>
</td><td>
<div>
<?php echo $form->labelEx($item,'endDate'); ?>
<?php echo $form->textField($item,"[$i]endDate"); ?>
<?php echo $form->error($item,'endDate'); ?>
</div>
</td><td>
<div>
<?php echo $form->labelEx($item,'adults'); ?>
<?php echo $form->dropDownList($item, "[$i]adults", array('1'=>'1',
'2'=>'2',
'3'=>'3',
'4'=>'4',
'5'=>'5'), array('single'=>'single', 'size'=>1)
); ?>
</div>
</td><td>
<div>
<?php echo $form->labelEx($item,'children'); ?>
<?php echo $form->dropDownList($item, "[$i]children", array('1'=>'1',
'2'=>'2',
'3'=>'3',
'4'=>'4',
'5'=>'5'), array('single'=>'single', 'size'=>1)
); ?>
</div>
</td>
<td>
<button type='button'>Delete</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div class="row buttons">
<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
</div>
<?php $this->endWidget(); ?>
</div><!-- form -->

In your Yii view form, declare beginWidget as mentioned below,
<?php
$form = $this->beginWidget('CActiveForm', array(
'id'=>'booking-form', //form-id
'enableAjaxValidation'=>true,
'clientOptions'=>array(
'validateOnSubmit'=>true,
),
));
?>
Make sure your model has at least one validation rule for that scenario
public function rules()
{
return array(
array('attribute, attribute1', 'required'),
);
}
For detail information visit below the link
http://knackforge.com/blog/vishnu/yii-how-enable-ajax-form-validation

Related

Lighbox only showing data of the current post in Wordpress

I wanted to show some lightbox funtionality with the use of shortcodes. The code is working fine except for the data shown in the ligthbox. It only shows the data from the latest post in the loop. How can i manage to get lightbox showing the data belonging to the post?
<?php
// Posts are found
if ( $posts->have_posts() ) {
while ( $posts->have_posts() ) :
$posts->the_post();
global $post;
?>
<center>
<div id="su-post-<?php the_ID(); ?>" class="su-post">
<?php if ( has_post_thumbnail() ) : ?>
<a class="su-post-thumbnail" href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<?php endif; ?>
<div class="su-post-excerpt">
<!-- Shows the button and the hidden lightbox -->
<?php echo do_shortcode ('[su_lightbox type="inline" src="#showInfo"][su_button] Info[/su_button][/su_lightbox]'); ?>
<!-- Shows the lightbox if button is clicked with the data -->
<?php echo do_shortcode ('[su_lightbox_content id="showInfo"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]'); ?>
<?php echo do_shortcode ('[su_lightbox type="inline" src="#showVideo"][su_button] Video[/su_button][/su_lightbox]'); ?>
<?php echo do_shortcode ('[su_lightbox_content id="showVideo"][su_video url="{su_meta key=video}"][/su_lightbox_content]'); ?>
<?php echo do_shortcode ('[su_lightbox type="inline" src="#showFoto"][su_button] Foto[/su_button][/su_lightbox]'); ?>
<?php echo do_shortcode ('[su_lightbox_content id="showFoto"][su_meta key="fotos" default="Geen fotos"][/su_lightbox_content]'); ?>
</div>
</div>
</center>
<?php
endwhile; echo do_shortcode ('[su_lightbox_content id="showInfo"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]');
}
// Posts not found
else {
echo '<h4>' . __( 'Posts not found', 'shortcodes-ultimate' ) . '</h4>';
}
?>
By adding a counter in the while loop and using the variable in the shortcode SRC and ID fields. I needed unique ID's for each post.
$n = 0; /* Outside While Loop */
echo do_shortcode( '[su_lightbox type="inline" src="#showInfo'.$n.'"][su_button] Info[/su_button][/su_lightbox] ');
echo do_shortcode( '[su_lightbox_content id="showInfo'.$n.'"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]' );
$n++; /* Inside While Loop */

How to auto refresh div contents contain php variables?

I created a page named queries.php
<?php
require("connection.inc.php");
$query = "SELECT SUM(john), SUM(robert), COUNT(school) FROM election";
$result = mysql_db_query($db, $query, $connection) or
die("query error!");
$data = mysql_fetch_array($result);
$john = number_format($data[0], 0,',','.');
$robert = number_format($data[1], 0,',','.');
$school = $data[2];
$total = $john + $robert;
$remaining_school = 524 - $school;
$percentage_john = round(($john*100/$total),2);
$percentage_robert = round(($robert*100/$total),2);
?>
Then I display the data in display.php
The data displayed well and nothing error, I tried a couple of tricks to auto refresh the container using jquery but failed.
Here is my display.php page:
<?php
include("queries.php");
?>
<div id="totaljohn"> // <--- the div id taken from css layout
<h9>John: <?php echo $john; ?> <br> (<?php echo $percentage_john; ?> %)</h9>
</div>
<div id="totalrobert">
<h9>Robert: <?php echo $robert; ?><br> (<?php echo $percentage_robert; ?> %)</h9>
</div>
<div id="totalboth">
<h4>Total : <?php echo $total; ?> Suara</h4>
</div>
<div id="totalschool">
<h4>Total School attending : <?php echo $school; ?> Schools</h4>
</div>
<div id="remaining_schools">
<h4>Remaining Schools: <?php echo $remaining_school; ?> of 524 schools</h4>
</div>
Everything looks good. Is your database connected? Is your SQL correct? Are there records in the database returned for your query?

clearing and changing content of div

I'm trying to replace the content of comments div with the new comments by loading it again and replacing the old comments. When i change the content of the div, it replaces the first comment only and repeat the whole comment:
here is the comments div :
<?php
$comment_qry = mysqli_query($conn, "SELECT * FROM comments WHERE post_id='$post_row[id]' ORDER BY id DESC");
while($comment_row = mysqli_fetch_array($comment_qry)){
?>
<div id="comments_div">
<div style="background:#aaaaaa; margin:5px;">
<p onclick="report_var(<?php echo $post_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">report</p>
<p>user: <?php echo $comment_row['user_id']; ?></p>
<p>date: <?php echo date("Y-m-d", $comment_row['date']); ?></p>
<p>content: <?php echo $comment_row['content']; ?></p>
<?php if($post_row['user_id'] == $my_id or $comment_row['user_id'] == $my_id or $admin == 1){ ?>
<p><span onclick="comment_remove(<?php echo $comment_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">delete</span></p>
<?php } ?>
</div>
</div>
<?php } ?>
ajax code :
/////////////////////////comment function
function comment(post_id, poster_id)
{
loadXMLDoc("php/comment.php?post_id="+post_id+" content="+document.getElementById("content").value+"&poster_id="+poster_id,function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("comments_div").innerHTML = xmlhttp.responseText;
}
});
}
comment.php :
<?php
$comment_qry = mysqli_query($conn, "SELECT * FROM comments WHERE post_id='$_GET[post_id]' ORDER BY id DESC");
while($comment_row = mysqli_fetch_array($comment_qry)){
?>
<div style="background:#aaaaaa; margin:5px;" class="comment">
<p onclick="report_var(<?php echo $post_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">report</p>
<p>user: <?php echo $comment_row['user_id']; ?></p>
<p>date: <?php echo date("Y-m-d", $comment_row['date']); ?></p>
<p>content: <?php echo $comment_row['content']; ?></p>
<?php if($_GET['poster_id'] == $my_id or $comment_row['user_id'] == $my_id or $admin == 1){ ?>
<p><span onclick="comment_remove(<?php echo $comment_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">delete</span></p>
<?php } ?>
</div>
<?php } ?>
Your first code snippet is creating a separate comments_div for each comment. Then your JavaScript code snippet is just replacing the content of the first one.
You can fix it by putting the comments_div outside the the PHP while loop, and then using the same HTML output code inside that loop as you are in your third example (a div.comment per comment).
So, something like this in place of that first code snippet:
<div id="comments_div">
<?php
$comment_qry = mysqli_query($conn, "SELECT * FROM comments WHERE post_id='$post_row[id]' ORDER BY id DESC");
while($comment_row = mysqli_fetch_array($comment_qry)){
?>
<div style="background:#aaaaaa; margin:5px;" class="comment">
<p onclick="report_var(<?php echo $post_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">report</p>
<p>user: <?php echo $comment_row['user_id']; ?></p>
<p>date: <?php echo date("Y-m-d", $comment_row['date']); ?></p>
<p>content: <?php echo $comment_row['content']; ?></p>
<?php if($_GET['poster_id'] == $my_id or $comment_row['user_id'] == $my_id or $admin == 1){ ?>
<p><span onclick="comment_remove(<?php echo $comment_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">delete</span></p>
<?php } ?>
</div>
<?php } ?>
</div>

Validation with JavaScript on Yii

I want to add some JavaScript validation to my form of password creation.
I have the following as javascript
function Validation(){
var password = document.getElementById('password').value;
var error = document.getElementById('error');
if((/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]+$/).test(password) == false){
error.html('error');
}
}
I have the following code in my _form.php for the user creation
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'users-form',
'htmlOptions'=>array('onsubmit'=>'return Validation()'),
// Please note: When you enable ajax validation, make sure the corresponding
// controller action is handling ajax validation correctly.
// There is a call to performAjaxValidation() commented in generated controller code.
// See class documentation of CActiveForm for details on this.
'enableAjaxValidation'=>false,
)); ?>
<p class="note">Fields with <span class="required">*</span> are required.</p>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<?php echo $form->labelEx($model,'username'); ?>
<?php echo $form->textField($model,'username',array('size'=>20,'maxlength'=>20)); ?>
<?php echo $form->error($model,'username'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'password'); ?>
<?php echo $form->passwordField($model,'password',array('size'=>60,'maxlength'=>255)); ?>
<?php echo $form->error($model,'password'); ?>
</div>
<div class="row buttons">
<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
</div>
<div id="error">
</div>
<?php $this->endWidget(); ?>
Now i do have my script imported and even when i put a simple alert('hello') it doesnt work when i press create.
Also i know the validation wont work properly since i am hashing the password. How i can validate it before it becomes hash.
You can do it two way
1) With form htmlOptions
<?php Yii::app()->clientScript->registerScript('someScript', "
validate = function(){
alert("Your Validation Function");
return false;
}
");
?>
<?php $form=$this->beginWidget('CActiveForm', array(
'id' => 'user-form',
'enableAjaxValidation' => false,
'htmlOptions' => array(
'onsubmit'=>"return validate();",
),
)); ?>
2) With Jquery submit method
<?php Yii::app()->clientScript->registerScript('someScript', "
$('#user-form').submit(function() {
alert("Your validation");
});
");
?>
<?php $form=$this->beginWidget('CActiveForm', array(
'id' => 'user-form',
'enableAjaxValidation' => false,
)); ?>

Laravel Form run JS function onsubmit

I have a function that I want called on submission of my Laravel Form for Ajax purposes. How can I go about this where the page does not submit and reload?
This works: (but the Enter btn does not execute)
<?php echo Form::open(); ?>
<?php echo Form::button('Search', array('id'=>'searchbtn', 'class'=>'button radius right', 'onclick'=>'myFunction(this.form)')); ?>
<?php echo Form::close(); ?>
This does not:
<?php echo Form::open(array('onsubmit' => 'myFunction(this)')); ?>
<?php echo Form::submit('Search', null, array('id'=>'searchbtn', 'class'=>'button radius right')); ?>
<?php echo Form::close(); ?>
<?php echo Form::open(array(null, null, 'onsubmit' => 'myFunction(this); return false;')); ?>
<?php echo Form::submit('Search', null, array('id'=>'searchbtn', 'class'=>'button radius right')); ?>
<?php echo Form::close(); ?>
Yayy. Now I could use my Enter button!

Categories