I have an ajax uploader in my site that uploads the image but i have to refresh the page in order to view that uploaded image.
How i can avoid this refresh?
My js is
$(function(){
var ul = $('#editprofile-form ul');
$('#drop a').click(function(){
// Simulate a click on the file input button
// to show the file browser dialog
$(this).parent().find('input').click();
});
// Initialize the jQuery File Upload plugin
$('#editprofile-form').fileupload({
// This element will accept file drag/drop uploading
dropZone: $('#drop'),
// This function is called when a file is added to the queue;
// either via the browse button, or via drag/drop:
add: function (e, data) {
var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');
// Append the file name and file size
tpl.find('p').text(data.files[0].name)
.append('<i>' + formatFileSize(data.files[0].size) + '</i>');
// Add the HTML to the UL element
data.context = tpl.appendTo(ul);
// Initialize the knob plugin
tpl.find('input').knob();
// Listen for clicks on the cancel icon
tpl.find('span').click(function(){
if(tpl.hasClass('working')){
jqXHR.abort();
}
tpl.fadeOut(function(){
tpl.remove();
});
});
// Automatically upload the file once it is added to the queue
var jqXHR = data.submit();
var img = document.getElementById('image-placeholder').innerHTML ;
console.log(img);
},
progress: function(e, data){
// Calculate the completion percentage of the upload
var progress = parseInt(data.loaded / data.total * 100, 10);
// Update the hidden input field and trigger a change
// so that the jQuery knob plugin knows to update the dial
data.context.find('input').val(progress).change();
if(progress == 100){
data.context.removeClass('working');
}
},
fail:function(e, data){
// Something has gone wrong!
data.context.addClass('error');
}
});
// Prevent the default action when a file is dropped on the window
$(document).on('drop dragover', function (e) {
e.preventDefault();
});
// Helper function that formats the file sizes
function formatFileSize(bytes) {
if (typeof bytes !== 'number') {
return '';
}
if (bytes >= 1000000000) {
return (bytes / 1000000000).toFixed(2) + ' GB';
}
if (bytes >= 1000000) {
return (bytes / 1000000).toFixed(2) + ' MB';
}
return (bytes / 1000).toFixed(2) + ' KB';
}
});
and my form is
<div class="adminform_wrapp">
<?php
$form = $this->beginWidget('CActiveForm', array(
'id' => 'editprofile-form',
'enableAjaxValidation' => false,
'clientOptions' => array(
'validateOnSubmit' => true,
),
'enableClientValidation' => true,
'focus' => array($model, 'first_name'),
'htmlOptions' => array(
'enctype' => 'multipart/form-data'
)
));
//echo $form->errorSummary($model);
?>
<div class="adminform_row">
<?php echo $form->errorSummary($model); ?>
</div>
<div class="adminform_row errorSummary">
<?php echo $response_msg; ?>
</div>
<!--adminform_row-->
<div class="adminform_row">
<label class="fieldname required" for="Users_First_Name">First Name: <span class="required">*</span></label>
<?php echo $form->textField($model, 'first_name', array('value' => $data['first_name'])); ?>
<?php $form->error($model, 'first_name'); ?>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<label class="fieldname required" for="Users_Last_Name">Last Name: <span class="required">*</span></label>
<?php echo $form->textField($model, 'last_name', array('value' => $data['last_name'])); ?>
<?php $form->error($model, 'last_name'); ?>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<label class="fieldname required" for="Users_Email">Email: <span class="required">*</span></label>
<?php echo $form->textField($model, 'email', array('value' => $data['email'], 'readonly' => true)); ?>
<?php $form->error($model, 'email'); ?>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<label class="fieldname required" for="Users_Phone_No">Phone No: <span class="required">*</span></label>
<?php echo $form->textField($model, 'phone_no', array('value' => $data['phone_no'])); ?>
<?php $form->error($model, 'phone_no'); ?>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<label>Username:</label>
<span class="profile-username"><?php echo $data['username']; ?></span> </div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<label>Edit Profile picture:</label>
<span class="image-placeholder" id="image-placeholder">
<?php
if (file_exists(Yii::getPathOfAlias('webroot') . '/themes/karmora/images/users/' . $data['image']) && $data['image'] != null) {
$u_image_path = $this->theme_baseurl . '/images/users/' . $data['image'];
} else {
$u_image_path = $this->theme_baseurl . '/images/users/default-thumb.png';
}
?>
<img src="<?php echo $u_image_path; ?>" style="width:96px; height:96px;"/>
</span>
<div id='file_browse_wrapper'>
<?php
//echo $form->labelEx($model, 'image');
echo $form->fileField($model, 'upl', array('id' => 'file_browse'));
echo $form->error($model, 'upl');
?>
</div>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<?php echo $form->labelEx($model, 'Address', array('class' => 'fieldname')); ?>
<?php echo $form->textField($model, 'address', array('value' => $data['address'])); ?>
<?php $form->error($model, 'address'); ?>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<label class="fieldname required" for="Users_Country">Country: <span class="required">*</span></label>
<select class="error" onchange="print_state('Users_state', this.selectedIndex);" id="Users_country" name ="Users[country]"></select>
<?php $form->error($model, 'country'); ?>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<label class="fieldname required" for="Users_State">State: <span class="required">*</span></label>
<select name ="Users[state]" id ="Users_state"></select>
<script language="javascript">print_state("Users_state", '', "<?php echo $data['state'] ?>");</script>
<?php $form->error($model, 'state'); ?>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<label class="fieldname required" for="Users_City">City: <span class="required">*</span></label>
<?php echo $form->textField($model, 'city', array('value' => $data['city'])); ?>
<?php $form->error($model, 'city'); ?>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<label class="fieldname required" for="Users_Zipcode">Zipcode: <span class="required">*</span></label>
<?php echo $form->textField($model, 'zipcode', array('value' => $data['zipcode'])); ?>
<?php $form->error($model, 'zipcode'); ?>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<input type="submit" class="adminupdate_btn" value="Update">
<input type="reset" class="admincancel_btn" value="Cancel">
</div>
<!--adminform_row-->
<?php $this->endWidget(); ?>
</div>
Try adding a success event to your fileupload. If you register a success, then just replace the picture with the one already in your jqXHR object. Not sure what plugin you're using but that shouldn't be very hard to accomplish.
Related
I'm using a custom post-type and I am doing the filtering using categories.
Each category has a description and I would like to show the description of the category when the category is selected like here
I found a way to show the description of the taxonomy from here
Html used:
<div class="col-lg-9">
<div class="lista-portofoliu">
<div class="row">
<?php while ($pquery->have_posts()) : $pquery->the_post();
$term_obj_list = get_the_terms(get_the_id(), 'portfolio_category');
$term_classes_a = array();
$img_data = array();
$img_string = ""; ?>
<?php foreach ($term_obj_list as $term) {
$term_classes_a[] = $term->slug;
$meniu_triggers[] = $term->slug;
$meniu_labels[] = $term->name;
$img_key = 'imagine_' . $term->slug;
$img_src = wp_get_attachment_image_src(get_field($img_key, get_the_id()), 'thumbnail');
if ($img_src) {
$img_data[] = 'data-' . $img_key . '="' . $img_src[0] . '"';
} else {
$img_data[] = 'data-' . $img_key . '="' . wp_get_attachment_image_src(get_field($img_key, get_the_id()), 'full') . '"';
}
foreach ($img_data as $imagine) :
$img_string .= $imagine;
endforeach;;
} ?>
<?php $term_classes = implode(" ", $term_classes_a); ?>
<div class="col-lg-4 p-1 m-0 item toate <?php echo $term_classes; ?>">
<div class=" item-content" <?php echo $img_string; ?> data-imagine_toate="<?php echo get_the_post_thumbnail_url(get_the_id(), 'thumbnail', true); ?>" style="background-image:url('<?php echo get_the_post_thumbnail_url(get_the_id(), 'thumbnail', true); ?>')">
<a href="<?php the_permalink(); ?>" class=" item-overlay">
<span class="item-title">
<?php the_title(); ?>
<br>
<br>
</span>
</a>
</div>
</div>
<?php endwhile;
?>
<?php
wp_reset_postdata(); ?>
</div>
<button type="button" id="more_posts" class="btn btn-dark loadMore center-block btn-pachete">Mai mult</button>
</div>
</div>
Thank you!
If you want to order everything by portfolio category, then you should first loop over each term in the portfolio_category taxonomy.
With each term, create a new query where you use the tax_query to only get the posts related to the current term we're looping over.
The result will be that each loop contains the category data and the posts related to that category.
You can output the category description by echoing the $term->description value.
<?php
$terms = get_terms('portfolio_category');
if (!is_wp_error($terms)) :
foreach ($terms as $term) : ?>
<div class="row">
<?php
$args = [
'post_type' => 'YOUR_CUSTOM_POST_TYPE',
'post_status' => 'publish',
'posts_per_page' => -1,
'tax_query' => [
[
'taxonomy' => 'portfolio_category',
'field' => 'term_id',
'terms' => $term->term_id
]
]
];
$query = new WP_Query($args);
if ($query->have_posts()) : ?>
<div class="col-lg-4">
<?= $term->name; ?>
<?= $term->description; ?>
</div>
<?php
while ($query->have_posts()) :
$query->the_post(); ?>
<div class="col-lg-4">
<?php the_title(); ?>
</div>
<?php
endwhile
wp_reset_postdata();
endif; ?>
</div>
<?php
endforeach;
endif;
I have a multiselect dropdown, which allows me to select more than one user at a time. I want to be able to select more than one user and when I click on the "Send code" button, the application will snow send email to these users using the email addresses. Currently when I select and click "Send Code", the application will only send email to only one user leaving other once. Please I will like to know to be sending email to all selected users at a time. I'm using CodeIgniter and below is my code:
Below is the view section of my code, which enable user to select users and send code:
<head>
<meta charset="UTF-8">
<title>Member Invite</title>
</head>
<body>
<form class="form-horizontal" method="post" action="<?php echo site_url('root/administrator/sendinvite'); ?>">
<fieldset>
<div class="control-group">
<label class="control-label" for="select01">Select Set</label>
<div class="controls">
<select id="select01" class="chzn-select" name="set_code" title="Select the set this student(s) will belong to">
<option value="">Select set</option>
<?php foreach ($sets as $set) { ?>
<option <?php echo set_select('set_code', $set->group_id); ?> value="<?php echo $set->group_id; ?>"><?php echo $set->group_name; ?></option>
<?php } ?>
</select>
<font size="1" color='red'><?php echo form_error('set_code'); ?></font>
</div>
</div>
<div class="control-group">
<label class="control-label" for="multiSelect">Select student(s)</label>
<div class="controls">
<select multiple="multiple" id="multiSelect" name="student_email" class="chzn-select span4" title="Select student(s) for this set">
<option value="">Select Student</option>
<?php foreach ($students as $student) { ?>
<option <?php echo set_select('student_email', $student->uacc_email); ?> value="<?php echo $student->uacc_email; ?>"><?php echo $student->uacc_username; ?></option>
<?php } ?>
</select>
<p class="help-block">Start typing to activate auto complete!</p>
<font size="1" color='red'><?php echo form_error('student_email'); ?></font>
</div>
<input type="hidden" name="student_id" value="<?php echo $student->upro_uacc_fk; ?>" class="span6 m-wrap"/>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Send code</button>
<button type="reset" class="btn">Cancel</button>
</div>
</fieldset>
</form>
</body>
</html>
Below is my Controller, which accepts the selected users and used same to send email:
public function sendinvite() {
if ($this->input->post()) {
$this->form_validation->set_rules('student_email', 'Student name', 'required');
$this->form_validation->set_rules('set_code', 'Set name', 'required');
if ($this->form_validation->run() == FALSE) {
$this->data['students'] = $this->super_model->get_members_with_out_group();
$this->data['sets'] = $this->super_model->get_group_list_for_code_invite();
$this->data['content'] = 'root/invitestudent';
$this->load->view('layout/root/template', $this->data);
} else {
$config = Array(
'protocol' => 'smtp',
'smtp_host' => 'mail.mydomain.com',
'smtp_port' => 25,
'smtp_user' => 'root',
'smtp_pass' => '347y6Z45Rwlfub020',
'mailtype' => 'html',
'charset' => 'iso-8859-1',
'wordwrap' => TRUE
);
$this->load->library('email', $config);
$len = 8;
$type = 'HhJjKkMmNnPpQqRrSsTt';
$set = $this->input->post('set_code');
//$new_password = rand(34546, 89757);
$this->email->from('admin#passwordmanager.com', "Admin Manager");
$this->email->to($this->input->post('student_email'));
//$this->email->cc($this->input->post('student_email'));
$this->email->subject('BSN-Set Code');
//$this->flexi_auth->forgotten_password($identity);
$this->email->message("You are invited to join the group. Your set code is: $set");
$data['message'] = "Sorry Unable to send email...";
if ($this->email->send()) {
$data['message'] = "Mail sent...";
}
redirect('root/administrator/invitesuccess');
}
} else {
$this->data['students'] = $this->super_model->get_members_with_out_group();
$this->data['sets'] = $this->super_model->get_group_list_for_code_invite();
$this->data['content'] = 'root/invitestudent';
$this->load->view('layout/root/template', $this->data);
}
}
Image is here
you can use like this
// Array ( [0] => c#gmail.com [1] => a#gmail.com [2] => b#gamil.com )
$addresses = implode(',',$this->input->post('student_email');
// c#gmail.com,a#gmail.com,b#gamil.com
$this->email->to($addresses);
i make a custom wordpress widget, in the frontend i have a button that call a function into a script file (js/gecofidelitycustom.js). This function is under a separated file and it use Jquery. My problem is how i call from button this function. It seems that don't see function, but my script at load is correct execute. Thanks in advance
This is my code:
`<?php
add_action('widgets_init', 'gecofidelity_register_widget');
function gecofidelity_register_widget() {
register_widget('GecoFidelity_Widget');
}
add_action('init', 'register_script');
function register_script() {
//wp_register_script('jquery', "//code.jquery.com/jquery-1.11.0.min.js");
wp_register_script('custom_jquery', plugins_url('js/gecofidelitycustom.js', __FILE__), array('jquery'));
//wp_register_style('new_style', plugins_url('css/bootstrap.min.css', __FILE__), false, '1.0.0', 'all');
}
add_action('wp_enqueue_scripts', 'gecofidwidget_required_scripts');
function gecofidwidget_required_scripts() {
// wp_enqueue_script('jsCustom', GECOFIDWIDGET_FOLDER_URL . 'js/jquery.js');
//wp_enqueue_script('jquery');
//wp_enqueue_script('jsCustom', GECOFIDWIDGET_FOLDER_URL . 'js/bootstrap.min.js');
//wp_enqueue_script('jqueryJS', GECOFIDWIDGET_FOLDER_URL . 'js/gecofidelitycustom.js', array('jquery'),'2.1.1');
//wp_enqueue_script('jquery');
wp_enqueue_script('custom_jquery');
//wp_enqueue_style('bootstrapStyle', GECOFIDWIDGET_FOLDER_URL . 'css/bootstrap.min.css');
}
class GecoFidelity_Widget extends WP_Widget {
public function __construct() {
parent::WP_Widget('GecoFidelity_Widget', 'GecoFidelity Widget', array('description' => 'Grazie a questo widget é possibile visualizzare una lista degli ultimi post e dei più commentati'));
}
public function form($instance) {
$defaults = array(
'title' => 'GecoFidelity',
'operative_mode_ID' => NULL,
'operative_mode_type' => NULL
);
$instance = wp_parse_args((array) $instance, $defaults);
$opmodetype = isset($instance['operative_mode_type']) ? $instance['operative_mode_type'] : 'company';
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>">
<strong>Titolo:</strong>
</label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $instance['title']; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('operative_mode_ID'); ?>">
<strong>Operative Mode ID:</strong>
</label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id('operative_mode_ID'); ?>" name="<?php echo $this->get_field_name('operative_mode_ID'); ?>" value="<?php echo $instance['operative_mode_ID']; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('operative_mode_type'); ?>">
<strong>Operative Mode Type:</strong>
</label>
<!--input class="widefat" type="text" id="<?php //echo $this->get_field_id('operative_mode_type'); ?>" name="<?php //echo $this->get_field_name('operative_mode_type'); ?>" value="<?php //echo $instance['operative_mode_type']; ?>" /-->
<select id="<?php echo $this->get_field_id('operative_mode_type'); ?>" name="<?php echo $this->get_field_name('operative_mode_type'); ?>" value="<?php echo $instance['operative_mode_type']; ?>">
<option value="company" <?php echo $opmodetype == 'company' ? 'selected="selected"' : ''; ?>>company</option>
<option value="user" <?php echo $opmodetype == 'user' ? 'selected="selected"' : ''; ?>>user</option>
</select>
</p>
<?php
}
public function widget($args, $instance) {
extract($args);
$title = apply_filters('widget_title', $instance['title']);
echo $before_widget;
echo $before_title . $title . $after_title;
?>
<?php wp_enqueue_script('custom_jquery'); ?>
<div>
<p>
<label for="<?php echo $this->get_field_id('operative_mode_ID'); ?>">
<strong>N. Scheda:</strong>
</label>
<input class="" type="text" id="nscheda" />
<p id="msgPunti" class="hidden">Il tuo punteggio è di: </p>
</p>
<button id="btnControllaPunti" class="btn btn-default">Controlla</button>
</div>
<?php
echo $after_widget;
}
public function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['operative_mode_ID'] = strip_tags($new_instance['operative_mode_ID']);
//$instance['operative_mode_type'] = strip_tags($new_instance['operative_mode_type']);
$instance['operative_mode_type'] = strip_tags($new_instance['operative_mode_type']);
return $instance;
}
}
?>
js/gecofidelitycustom.js:
jQuery( document ).ready( function( $ ) {
// do_stuff();
console.log( "Eseguito Jquery 2!" ); //this is execute correctly at load of widget on frontend
jQuery("#btnControllaPunti").click(function(){
alert("ciao");
});
});
Im new to yii and ajax. I want to upload an image(profile pic) from a popup window. I used Ajax submit button.
But the file is not getting passed to the controller.
My code in the view is:
<?php
$form = $this->beginWidget('CActiveForm', array(
'id' => 'profile-update-form',
'enableAjaxValidation' => true,
'enableClientValidation' => true,
'action' => array('user/profileupdate'),
'htmlOptions'=> array('class' =>'form-horizontal')
));
?>
<?php
$model = User::model()->findByPk(Yii::app()->user->id);
$profile=UserProfile::model()->findByAttributes(array('user_id'=>$model->id));
if(!$profile)
$profile=new UserProfile;
?>
<div class="form-group">
<label for="inputEmail3" class="col-sm-4 control-label text10">About me</label>
<div class="col-sm-8">
<?php echo $form->textArea($profile, 'about_me', array('class' => 'form-control form02')); ?>
</div>
<div class="req"> <?php echo $form->error($profile, 'about_me'); ?> </div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-4 control-label text10">City</label>
<div class="col-sm-8">
<?php echo $form->textField($profile, 'city', array('class' => 'form-control form02', 'id' => 'inputCity')); ?>
</div>
<div class="req"> <?php echo $form->error($profile, 'city'); ?> </div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-4 control-label text10">Phone</label>
<div class="col-sm-8">
<?php echo $form->textField($profile, 'phone', array('class' => 'form-control form02', 'id' => 'inputPhone')); ?>
</div>
<div class="req"> <?php echo $form->error($profile, 'phone'); ?> </div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-4 control-label text10">Profile Picture</label>
<div class="col-sm-8">
<?php echo $form->fileField($profile,'profile_picture'); ?>
<?php
$this->widget('CMultiFileUpload', array(
'name' => 'images',
'accept' => 'jpeg|jpg|gif|png', // useful for verifying files
'duplicate' => 'Duplicate file!', // useful, i think
'denied' => 'Invalid file type', // useful, i think
));
?>
</div>
<div class="req"> <?php echo $form->error($profile, 'profile_picture'); ?> </div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-4 control-label text10"></label>
<div class="col-sm-8">
<span>
<?php
echo CHtml::ajaxSubmitButton('Save', CHtml::normalizeUrl(array('user/profileupdate?rand=' . time())), array(
'dataType'=>'json',
'type'=>'post',
'success'=>'function(data) {
$("#AjaxLoader1").hide();
if(data.status=="success"){
$("#formResult1").html("profile settings changed successfully.");
$("#profile-update-form")[0].reset();
} else {
$.each(data, function(key, val) {
$("#profile-update-form #"+key+"_em_").text(val);
$("#profile-update-form #"+key+"_em_").show();
});
}
}',
'beforeSend'=>'function(){
$("#AjaxLoader1").show();
}'
), array(
'id' => 'profile-update', 'live' => false, 'class' => 'btn btn-s-md btn-info')
);
?>
...
And the code in my Controller is:
public function actionprofileupdate() {
$profile = UserProfile::model()->findByAttributes(array('user_id' => Yii::app()->user->id));
if (!$profile) {
$profile = new UserProfile;
$profile->create_time = time();
$profile->update_time = time();
}
if (isset($_POST['UserProfile'])) {
$profile->attributes = $_POST['UserProfile'];
$profile->about_me = $_POST['UserProfile']['about_me'];
$images = CUploadedFile::getInstance($profile,'profile_picture');
// print_r($_POST);
// print_r($_FILES);
// print_r($images);
// exit();
if (isset($images)) {
if(!is_dir(Yii::getPathOfAlias('webroot').'/images/profilepic/'. 'quy')) {
mkdir(Yii::getPathOfAlias('webroot').'/images/profilepic/'. $profile->profile_picture);
// the default implementation makes it under 777 permission, which you could possibly change recursively before deployment, but here�s less of a headache in case you don�t
}
foreach ($images as $image => $pic) {
echo $pic->name;if ($pic->saveAs(Yii::getPathOfAlias('webroot').'/images/profilepic/'.$pic->name)) {
$profile->profile_picture = $pic->name;
}
}
$profile->user_id = Yii::app()->user->id;
$profile->update_time = time();
$valid = $profile->validate();
$error = CActiveForm::validate(array($profile));
if ($error == '[]') {
$profile->save(false);
echo CJSON::encode(array('status' => 'success'));
Yii::app()->end();
} else {
$error = CActiveForm::validate(array($profile));
if ($error != '[]')
echo $error;
Yii::app()->end();
exit();
}
}
}
}
Please somebody help me to solve this problem.
When I am using ordinary submit button, the file is tranfering to the controller but when using AjaxSubmitButton the field profilepic is send as blank.
please try it by specifying the enctype in the html options like
'htmlOptions'=>array('enctype'=>'multipart/form-data'),
As of now it is not possible to upload a file or image using AjaxSubmitButton.
From the link below, it has been an open issues that the developer has not solved since 2015.
https://github.com/demogorgorn/yii2-ajax-submit-button/issues
Update at bottom of post:
I have a page where when a button is pressed, a new window will popup with a form. Below is where I open the popup.
<a><span class="add-on"><i class="icon-plus" style="color: green;" onclick="window.open('<?php echo $this->Html->Url(array('controller' => 'customers', 'action' => 'add?popup')); ?>', 'Add Customer', 'height=630, width=430')"></i></span></a>
When the form is submitted, I need to close that window. The problem I am having now is that the window is closing before the form is fully getting submitted.
Popup Window Code:
<fieldset style="padding-left: 15px;">
<legend>Add Customer</legend>
<?php echo $this->Form->create('Customer', array('inputDefaults' => array('div' => false, 'label' => false))); ?>
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<?php echo $this->Form->input('first_name', array('placeholder' => 'First Name')); ?>
</div>
</div>
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<?php echo $this->Form->input('last_name', array('placeholder' => 'Last Name')); ?>
</div>
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-globe"></i></span>
<?php echo $this->Form->input('location', array('placeholder' => 'Location')); ?>
</div>
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><i class="icon-phone"></i></span>
<?php echo $this->Form->input('phone_number', array('class' => 'maskedPhone', 'placeholder' => 'Phone Number')); ?>
</div>
</div>
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<?php echo $this->Form->input('email', array('placeholder' => 'Email')); ?>
</div>
</div>
<!-- Close Form -->
<?php echo $this->Form->end(array(
'label' => 'Save Customer',
'id' => 'saveCust',
'class' => 'btn btn-primary',
'div' => false
)); ?>
<?php echo $this->Html->script('jquery.maskedinput.min', array('inline' => false));
echo $this->Html->script('maskedinput', array('inline' => false));
$this->start('script'); ?>
<script type="text/javascript">
$(document).ready(function () {
inputs.maskedInputs();
// Get queryString to close popup window
var queryString = window.location.search.substring(1);
if (queryString == "popup"){
$('#CustomerAddForm').submit(function() {
window.close();
});
}
});
</script>
<?php $this->end(); ?>
Trying to use Ajax call now with no luck:
$('#saveCust').click(function() {
alert("test");
$.ajax({
type: "POST",
url: "<?php echo $this->Html->Url(array('controller' => 'Customers', 'action' => 'add')); ?>",
data: $('#CustomerAddForm').serialize(),
success: function(data)
{
alert("Test");
window.close();
}
})
});
return false;
You have a race condition and the window.close will always win. You need to close when the form is DONE submitting.
Either convert it over to use an Ajax call or call the window.close() in the response of the form submission.