I have a form and want to submit through ajax. It posts but it doesn't clear form onclick success. I've also tried .done(function). I've also tried alert data on success and error (thinking must be error) but it doesn't alert anything either.
<?php echo CHtml::ajaxSubmitButton(
'Comment',
'review/ajaxComment',
array(
'type'=>'POST',
'dataType'=>'json',
'success'=>'js:function(data){
if(data.result==="success"){
document.getElementById("review-form").reset();
alert("this worked");
}else{
console.log(error)
}
}'
)
)?>
form
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'review-form',
'enableAjaxValidation'=>true,
'clientOptions'=>array('validateOnSubmit'=>true),)); ?>
<?php echo $form->errorSummary($model); ?>
<div class="rating-row">
<?php $this->Widget('CStarRating', array(
'model'=>$model,
'attribute'=> 'star',
'minRating'=>.5 ,
'maxRating'=>5 ,
'starCount'=>5 ,
'ratingStepSize'=>.5
));?>
</div>
<div class="rating-row">
<label>Reviews</label>
<?php echo $form->textArea($model,'review'); ?>
<?php echo $form->error($model,'review'); ?>
</div>
Method 1:
Assign a class for all textbox, textarea, Dropdown. For example, frm_inp_ctrl
Then, do $(".frm_inp_ctrl").val(""); in ajax done()
Method 2:
Do reset with form id as below.
$("#review-form :input").val("");
Related
I asked a question to this topic before but since it seems like this requires just custom coding, I need help from the experts. I am not a coder, I design and build website in Webflow but want to learnt to convert them to a WordPress theme.
I have a Custom Post Type and want to display all of these posts on a page, however, above the displayed posts I want a filter, so that the user can click on a category and only see custom posts for that category (without page reload).
I registered a custom taxonomy and added categories for this. I see this on so many website, this seems to be a super common thing, and that's why I am so surprised that there is no plugin to achieve that. But anyway, here is an example of what I want to achieve: https://www.hauserlacour.de/en/work
I know that it has something to do with custom queries and AJAX. But I couldn't find a beginner friendly tutorial to achieve what I need.
Can anyone help me with the code below and what is needed to turn my custom taxonomy into a filter?
And here is the code I have as of now:
<?php get_header( 'page-posttest' ); ?>
<div class="projekte-wrapper-1">
<?php $terms = get_terms( array(
'taxonomy' => 'art',
'orderby' => 'name',
'order' => 'ASC',
'hide_empty' => false
) ) ?>
<?php if( !empty( $terms ) ) : ?>
<div class="taxonomy-wrapper">
<?php foreach( $terms as $term ) : ?>
<?php echo $term->name; ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php
$projekte_query_args = array(
'post_type' => 'projekte',
'nopaging' => true,
'order' => 'ASC',
'orderby' => 'date'
)
?>
<?php $projekte_query = new WP_Query( $projekte_query_args ); ?>
<?php if ( $projekte_query->have_posts() ) : ?>
<div class="posts-wrapper">
<?php while ( $projekte_query->have_posts() ) : $projekte_query->the_post(); ?>
<?php PG_Helper::rememberShownPost(); ?>
<?php $image_attributes = !empty( get_the_ID() ) ? wp_get_attachment_image_src( PG_Image::isPostImage() ? get_the_ID() : get_post_thumbnail_id( get_the_ID() ), 'full' ) : null; ?>
<h1 class="heading-14"><?php the_title(); ?></h1>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.', 'test' ); ?></p>
<?php endif; ?>
</div>
<?php get_footer( 'page-posttest' ); ?>
I was trying to create a newsletter module using Yii2 basic.
This is my scenario,
If a predefined template is available, I have to select that template.
If template is selected the subject and content should be loaded automatically.
For this I am using an Ajax.My Ajax is working perfectly and I appended the newsletter subject with Ajax success,Problem occurred when I tried to append the newsletter content.Hence I am using CKeditor.
My Form
<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;
use app\modules\admin\models\NewsletterTemplates;
/* #var $this yii\web\View */
/* #var $model app\modules\admin\models\Letter */
/* #var $form yii\widgets\ActiveForm */
?>
<div class="letter-form form_style " >
<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'letter_template_id')->dropDownList(
ArrayHelper::map(NewsletterTemplates::find()->all(),'newsletter_temp_id','newsletter_temp_subject'),
['prompt' => 'Select','class'=>'form-contol','onchange'=>'
$.post( "'.Yii::$app->urlManager->createUrl('admin/letter/temp?id=').'"+$(this).val(), function( data ) {
var message = data.split("::");
//alert(message[1]);
$( "#letter-letter_sub" ).val( message[0] );
$( "#letter-letter_content" ).val( message[1] );
});'
]);
?>
<?php //echo $form->field($model, 'letter_template_id')->textInput(['class'=>'form-contol']) ?>
<?= $form->field($model, 'letter_to')->textInput(['class'=>'form-contol']) ?>
<?= $form->field($model, 'letter_sub')->textInput(['class'=>'form-contol']) ?>
<?= $form->field($model, 'letter_content')->textarea(['class'=>'ckeditor']) ?>
<div class="form-group">
<?= Html::submitButton($model->isNewRecord ? 'Send' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>
Can anyone help with this......
Thanks in advance....
Hi Guys I found out the answer
I just replace the instances of the CKeditor.
<?= $form->field($model, 'letter_template_id')->dropDownList(
ArrayHelper::map(NewsletterTemplates::find()->all(),'newsletter_temp_id','newsletter_temp_subject'),
['prompt' => 'Select','class'=>'form-contol','onchange'=>'
$.post( "'.Yii::$app->urlManager->createUrl('admin/letter/temp?id=').'"+$(this).val(), function( data ) {
var message = data.split("::");
$( "#letter-letter_sub" ).val( message[0] );
CKEDITOR.instances["letter-letter_content"].destroy(true);
CKEDITOR.replace( "letter-letter_content" );
var editor = CKEDITOR.instances[ "letter-letter_content" ];
editor.setData(message[1]);
});'
]);
?>
Thank you for your supports
I am trying to add data in cakephp by ajax without using ajax helper.Here insertion is working fine but problem is after insert data I have failed to see the success massage.Here is my effort.
<script>
$(document).ready(function(){
$('#submit').click(function(){
x=$("#rform").serializeArray();
$.post($("#rform").attr("action"),
x,
function(data)
{
$("#success").html(data);
$("#success").fadeIn();
$("#success").fadeOut(2800);
$("input").val('');
});
$("#rform").submit(function(){
return false;
});
});
});
</script>
Here is the add.ctp code
<?php
echo $this->Form->create('Info',array(
'id' => 'rform'
)); ?>
<fieldset>
<legend><?php echo __('Add Info'); ?></legend>
<?php
echo $this->Form->input('name');
echo $this->Form->input('email');
?>
</fieldset>
<?php
$options = array
(
'label' => 'Add',
'value' => 'Add',
'id' => 'submit'
);
echo $this->Form->end($options);
?>
</div>
<div style="color:green;" id="success">
</div>
Here after add it is repeating insertion page again in bellow.Here I need to show only success massage.If I remove $("#success").html(data); nothing is happening but after insert button name making disappear.How can I add success massage in here ?
I have solved it by little bit change
$("#success").html(data);
to
$("#success").html("Insert Success");
and here I have changed input button tag, I have use direct button here
<button id="submit">Submit </button>
I am partially rendering a form in a view in which user can add subaccounts(profiles). The view in which the form is called is another form where all subaccounts are listed as radiolist.
Below is my view.
<div class="inputs">
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'selectUser-form',
'enableAjaxValidation' => false,
)); ?>
<?php echo CHtml::activeRadioButtonList($model,'id', $model->getSubAccounts(),array('prompt'=>'Please Select'));?>
<?php echo CHtml::submitButton($model->isNewRecord ? 'Book Now' : 'Save'); ?>
<?php echo CHtml::Button('Cancel',array('submit'=>array('cancel','id'=>$model->a_id)));?>
<?php $this->endWidget(); ?>
<div id="data"></div>
<?php echo CHtml::ajaxButton ("Add Users",
CController::createUrl('/user/user/addSubAccount'),
array('update' => '#data'));
?>
Below is my addSubAccount action.
public function actionAddSubAccount()
{
$profile=new YumProfile;
if (isset($_POST['YumProfile']))
{
$profile->attributes = $_POST['YumProfile'];
$profile->user_id=Yii::app()->user->id;
if($profile->save())
$this->redirect(array('/home/create'));}
if(!Yii::app()->request->isAjaxRequest){
$this->render('subaccount_form', array('profile'=>$profile));}
else{
$this->renderPartial('subaccount_form', array('profile'=>$profile));
}
}
Below is subaccount_form.
<?php $this->title = Yum::t('SubAccounts');?>
<div class="wide form">
<?php $activeform = $this->beginWidget('CActiveForm', array(
'id'=>'subaccount-form',
'enableAjaxValidation'=>true,
'enableClientValidation'=>true,
'clientOptions' => array(
'validateOnChange' => true,
'validateOnSubmit' => true,
),
));
?>
<div class="row"> <?php
echo $activeform->labelEx($profile,'Firstname');
echo $activeform->textField($profile,'firstname');
echo $activeform->error($profile,'firstname');
?> </div>
<div class="row"> <?php
echo $activeform->labelEx($profile,'Lastname');
echo $activeform->textField($profile,'lastname');
echo $activeform->error($profile,'lastname');
?> </div>
<div class="row"> <?php
echo $activeform->labelEx($profile,'Age');
echo $activeform->textField($profile,'age');
echo $activeform->error($profile,'age');
?> </div>
<div class="row submit">
<?php echo CHtml::submitButton(Yum::t('Add')); ?>
</div>
<?php $this->endWidget(); ?>
My form is rendering. But it's not getting submitted.What am i doing wrong?
After submitting,I need the view to be refreshed and to display the newly added user as an option in the radio list.
EDIT:
I tried like adding the following in the CActiveForm Widget array:
'action' => array( '/user/user/addsubAccount' ),
But still no result.Instead it is saving my data two times when i go through my direct way,meaning render method. :-(
It is because
'enableAjaxValidation'=>true,
Ajax validation is set to true in your form. Set its value to false
'enableAjaxValidation'=>FALSE, and then your form will submit :)
and if you want it to be true only then you should uncomment
$this->performAjaxValidation($model);
in your controller's action
Update 1
if(!Yii::app()->request->isAjaxRequest){
$this->render('subaccount_form', array('profile'=>$profile));}
else{
//change this line
$this->renderPartial('subaccount_form', array('profile'=>$profile),FALSE,TRUE);
}
This link might help you
on renderPartial the action attribute of the form is set to the current page instead of being set to the actual update or create url
My Solution
$form=$this->beginWidget('CActiveForm', array(
'id'=>'country-form',
'action' => Yii::app()->createUrl(is_null(Yii::app()->request->getParam('id'))?'/country/create':'/country/update/'.Yii::app()->request->getParam('id')),
I'm working on this site:
http://www.bajo.co.uk/2012/
...which shows a toy portfolio on the home page. The toys have different categories: Infant, Vehicles, educational etc. When the user clicks the sidebar menu 'Infant', thumbnails for all toys with the category 'Infant' will be listed on the right.
I currently have this set up by using a different page-template for each category with the following custom loop:
<!-- loop to show products list -->
<?php
$args = array(
'post_type' => 'products',
'orderby' => 'title',
'order' => 'DES',
'posts_per_page' => 8,
'paged' => get_query_var ('page'),
'post_parent' => $parent,
'category_name' => 'educational'
);
?>
<?php query_posts($args); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
<a href="<?php the_permalink() ?>" class="product_image">
<?php echo get_post_meta($post->ID, 'ProductImage', true);?>
<span class="overlay"></span>
</a>
<h3 class="product_tit"><?php the_title();?></h3>
</li>
<?php endwhile; ?>
<?php else :?>
<p>There are no products to display</p>
<?php endif; ?>
Although this works correctly, every time the user selects a category from the menu, the page is refreshed.
I would like to implement this with AJAX so that the page does not refresh and the products (which are a custom post type) are loaded in dynamically whilst maintaining the pagination.
Any pointers on where to start greatly appreciated.
I'm using:
Wordpress 3.5.1
Custom Post Type UI plugin
I still don't have the right to comment, so I put my comment here as an answer maybe it will be helpful.
My approach for such situation is to create a php file file.php which I will address via a parametrer like this file.php?p=infant (fo example)
<?php
$p=$_GET['p'];
require('../../../wp-load.php');
?>
<?php
$my_query = new WP_Query();
$my_query->query(array( 'post__in' => array($p)));
if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();
?>
<li>
<a href="<?php the_permalink() ?>" class="product_image">
<?php echo get_post_meta($post->ID, 'ProductImage', true);?>
<span class="overlay"></span>
</a>
<h3 class="product_tit"><?php the_title();?></h3>
</li>
<?php
endwhile;
endif;
?>
I will create in addition a javascript function which will manage the ajax call like this:
function f(str)
{
$.ajax({
cache: true,
type: "GET",
timeout: 5000,
url: 'url/to/file.php?p='+str,
success: function(msg)
{
$('#the_div_containing_li').html(msg);
},
error: function(msg)
{
alert("Your browser broke!");
return false;
}
});
}
Note that you should put your li (and the dynamically loaded content in a div , which I called the_div_containing_li). and onClick on your anchor, call the javascript function f(id of this anchor). you can of course assign to each anchor an id via the wordpress loop.