Prompt for confirmation before executing cutsom CbuttonColumn action - javascript

I have a custom delete button, all i want is some sort of confirmation before delete action takes place..
I have tried multiple ways of doing so with no success so far.
here is my code, I am using CArrayDataProvider thus had to create a template for delete button.
array(
'class' => 'CButtonColumn',
'template' => '{delete}{reset}',
'deleteConfirmation'=>"js:'Are You Sure?'",
'afterDelete'=>'function(link,success,data){ if(success) alert("Delete completed successfully"); }',
'buttons' => array(
'delete' => array(
'label'=> 'Remove this device',
'imageUrl'=> Yii::app()->request->baseUrl.'/img/delete.png',
'url' => 'Yii::app()->controller->createUrl("controller/action", array("trace_id"=>$data["trace_id"], "mac"=>$data["mac"]))',
'click'=><<<EOD
function(){
confirm('Are you sure?')
}EOD
),

'status' => array(
'label'=>"<i class='fa fa-eye-slash'></i>", // text label of the button
'url'=>function ($data)
{
return $this->createUrl("counters/changeStatus",array('id'=>$data->counter_id, "status"=>$data->status ? 0 : 1 ));
}, // a PHP expression for generating the URL of the button
'imageUrl'=>false, // image URL of the button. If not set or fa lse, a text link is used
'options'=>array(
'class'=>'btn roundPoint4 btn-xs green btn-warning statusBtn',
'title'=>"Activate/Deactivate",
), // HTML options for the button tag
'click'=>'function(e){
e.preventDefault();
//open confirmation box write ur code here
}', // a JS function to be invoked when the button is clicked
'visible'=>function ()
{
return true;
}, // a PHP expression for determining whether the button is visible
),
NOW I SHOW YOU WHAT I DO IN MY CODE FOR THE THING YOU WANT TO DO
'status' => array(
'label'=>"<i class='fa fa-eye-slash'></i>", // text label of the button
'url'=>function ($data)
{
return $this->createUrl("counters/changeStatus",array('id'=>$data->counter_id, "status"=>$data->status ? 0 : 1 ));
}, // a PHP expression for generating the URL of the button
'imageUrl'=>false, // image URL of the button. If not set or fa lse, a text link is used
'options'=>array(
'class'=>'btn roundPoint4 btn-xs green btn-warning statusBtn',
'title'=>"Activate/Deactivate",
), // HTML options for the button tag
'click'=>'function(e){
e.preventDefault();
$(this).parents("table").find("tr.workingRowClass").removeClass("workingRowClass");
$("#secretForm").html("");
var parts = getMyIdNew($(this).attr("href"), "/status/", "/id/") ;
setAction($("#secretForm"), "POST", parts[2], 1)
moslakeFormInput( $("#secretForm") , "Counters[id]", "hidden", parts[1] , "id");
moslakeFormInput( $("#secretForm") , "Counters[status]", "hidden", parts[0], "status");
moslakeFormInput( $("#secretForm") , "operation", "hidden", "statusChange", "operation");
$("#promptAlert").find(".modal-body").html("<p>Are you sure you want to change status of the this Item ?</p>");
$("#promptAlert").modal("show"); $(this).parents("table").find("tr").removeClass("deleteMode");
$(this).parents("tr").addClass("workingRowClass");
}', // a JS function to be invoked when the button is clicked
'visible'=>function ()
{
return true;
}, // a PHP expression for determining whether the button is visible
),
I have copy paste code. so it will be extra. When some one clicks on "Status" button. It will open bootstrap modal. and ask for a confirmation. While executing this i have created a form with action and some fields. and in that modal i have proceed button. on proceed button click the form will be submitted. and on close the form will be made empty. the form will be display none form. and will have all the fields hidden.. I know it is more complex then urs... but I do it with post... BUT YOU CAN ASSIGN YOUR HREF TO POST BUTTON LINK IN THIS FUNCTION AND ON CLICK ON THAT IT WILL BE REDIRECTED

Related

jquery-confirm - submit clicked button in form with multiple buttons

I am using this very nice Jquery confirm plugin, problem is I am having issue with submit specific button in form with multiple buttons, my code works fine in php side without jquery-confirm plugin. It can get exact button submit value but I want to get confirmation before submit. Below is my scenario:
I have 2 delete submit buttons in single form and integrated with jquery-confirm. When I click on specific delete button (18), it submit the whole form, what I wanted is only the clicked button allowed to submit, below is my code:
<form action="" method="POST" id="messages">
<button type="submit" name="message_id" value="18" class="btn btn-danger confirmation" >Delete</button>
<button type="submit" name="message_id" value="17" class="btn btn-danger confirmation" >Delete</button>
</form>
Jquery code:
$('.confirmation').confirm({
content: 'Delete this message?',
title: 'Please confirm',
confirm: function(){
$('#messages :submit').submit();
}
});
So far, I have tried with this.$target.closest('#messages').submit();, with trigger('click') but they weren't working as expected.
If i add onclick="return confirm('Delete this message?');" inside button, it will trigger alert box and submit the selected button as expected, not the whole form submission. what I wanted is to get the value of the submitted button only, from PHP side when the button submitted. When I click on specific delete button ( value 18), I can catch the $_POST['message_id'] value = 18 without jquery-confirm plugin. But when I use jquery-confirm with submit(), from PHP side it could not catch any $_POST['message_id'] value .
See my jsfiddle for more details:
Try this approach.
$('button[type=submit]').on('click',function(e){
e.preventDefault(); // prevent submit button from firing and submit form
var $this = $(this);
$('.confirmation').confirm({
content: 'Delete this message?',
title: 'Please confirm',
confirm: function(){
$this.parent('form').submit(); // since user has confirmed action now submit form
}
});
});
OR
Create a small delete.php file where you can place the php code that handles the deletion of the message.
Use jQuery post() to submit your data after confirmation.
$('button[type=submit]').on('click',function(e){
e.preventDefault(); // prevent submit button from firing and submit form
var $this = $(this);
$('.confirmation').confirm({
content: 'Delete this message?',
title: 'Please confirm',
confirm: function(){
$.post( "delete.php", { message_id: $this.val() })
.done(function() {
alert( "second success" );
})
.fail(function() {
alert( "error" );
});
}
});
});
I found a workaround is to add hidden input with clicked message_id value, so everything is works fine for now, posted here in case of anyone else need this :
$('.confirmation').confirm({
content: 'Delete this message?',
title: 'Please confirm',
confirm: function(){
$('<input>').attr('type','hidden').attr('name', 'message_id').attr('value', this.$target.val()).appendTo('form');
$('#messages').submit();
}
});

Closing an HTML form in a jQuery modal with the submit button

I have inherited the following HTML form in a jQuery modal:
<div id = "openModal" class = "modalDialog">
<div>
X
<form id = "write_us_form" action="" method = "post">
<div class = "form_container">
<label class = "form_label">Name</label>
<input type = "text" class = "form_textfield" name = "f_name"><br>
<label class = "form_label">E-mail</label>
<input type = "text" class = "form_textfield" name = "f_email"><br>
<label class = "form_label">Subject</label>
<input type = "text" class = "form_textfield" name = "f_subject"><br>
<label class = "form_label">Message</label>
<textarea class = "form_textarea" name = "f_message" rows = "5"></textarea>
<input type = "submit" class = "form_submit_button" value = "Send message">
</div>
</form>
</div>
</div>
When I click the submit button, the following jQuery script runs, apparently to not refresh the page and run the send_form.php file to send an email:
$(function ()
{
$('#write_us_form').on('submit', function (e)
{
e.preventDefault (); // prevent page reload
$.ajax (
{
type : 'POST', // hide URL
url : 'send_form.php', // form validation file
data : $('#write_us_form').serialize (),
success : function (data)
{
$('#openModal').dialog('close');
alert ('Thank you for contacting us!');
}
});
});
});
The code does not do two things:
1. Close the modal. I already added the dialog('close') part, but it does not have any effect.
2. If I close the modal with the close button, and then click the proper button on the website that displays the modal, the form still has the previous contents in it.
The php part works, the proper email is sent, I'm just trying to find a way to close the modal and possibly refresh the form when it is opened again.
Thanks for any bit of help!
Edit:
Your dialog box might not be closing if your ajax call is not successful. If your 'Thank you for contacting us' alert is being executed and your modal is still not closing, it could be an issue with your syntax. It could be the case, that your modal is a bootstrap modal in which case the syntax would be different. You would want to hide the modal.
In the case of the form contents, you want to reset the form in the success block. See your modified code below:
$('#write_us_form').on('submit', function (e)
{
e.preventDefault (); // prevent page reload
$.ajax (
{
type : 'POST', // hide URL
url : 'send_form.php', // form validation file
data : $('#write_us_form').serialize (),
success : function (data)
{
$('#openModal').modal('hide');
$("#write_us_form").trigger("reset");
alert ('Thank you for contacting us!');
}
});
});
});

Jquery to disable previous radio buttons in Yii2

<?= $form->field($model, 'status')->radioList(array('1'=>'Approved','2'=>'Digital','3'=>'CDP','4'=>'Print','5'=>'Other Process','6'=>'Packing','7'=>'Dispatch',)); ?>
I'm trying to implement status update form. I want to know how can I disable previous radio buttons.
e.g-
If current status is CDP then Status "Approved" and "Digital" should be disable.
how to write java script for this, im implementing in Yii2 Framework.
Try to listen if someone choose a radio button.
Than '.disable' on every button with '.each' until you reached the key.
edit:
i hate to write it blind but try this:
$('#radioButtons').on('change', function(){
var val = this.value;
$.each(arrayname, function( index, value ){
if(index < val){
value.disable();
}else{
value.enable();
}
});
});
if the selected value is smaller, it will be disable, otherwise it will be anabled. but if you do it this way you canĀ“t change your choice to a button above ? is this really what you want ?
Since your option will already be set you can use Yii2 to do this. You will need to manually set the input property "item" to do this.
<?=$form->field($model, 'status')->radioList(['1' => 'Approved', '2' => 'Digital', '3' => 'CDP', '4' => 'Print', '5' => 'Other Process', '6' => 'Packing', '7' => 'Dispatch'], ['item' => function($index, $label, $name, $checked, $value) {$checked = $checked == 1 ? 'checked=""' : 'disabled=""';echo "<label><input tabindex='{$index}' type='radio' {$checked}'name='{$name}'value='{$value}'> {$label}</label>";}]);?>
The above will leave the selected one checked and disable the others using the HTML options "checked" and "disabled" respectively.

Submit form by buttons through CJuidialog

I am trying to manipulate my buttons in CJuidialog. I want to have a submit button inside my dialog. I have a checkbox "default" where if it is checked, check data from the database. I have a list of employees, where I input their data. Whenever the employee already have a schedule it will display a popup that says. You already have a schedule. do you wish to continue? Then, in my cjuidialog. I have an "OK" button and "CANCEL". If the user clicks ok. It will submit the form and find the same employee and change its default "1" to "0".
So that the new form will be the default and the previous one will be just a regular schedule.
For example:
there is a fk_user = 1 , default = 1 , from= 07/07/13 , to = 07/10/13 , schedule = 5 data in the database. Then I create another form which is fk_user = 1 , default = 1, from = 10/10/13 , to = 12/12/13 , schedule = 6,There is already a default for fk_user 1. It will display a popup where it says "You already have a schedule. do you wish to continue? ". If the user clicks "OK" the new data will be fk_user = 1 , default = 1, from = 10/10/13 , to = 12/12/13 , schedule = 6 and the previous will be fk_user = 1 , default = 0 , from= 07/07/13 , to = 07/10/13 , schedule = 5 the previous data becomes 0.
I have been trying this for the past days, and it is the only problem for my system to be completed. can anyone help me with these?
I dont know if I will still use the ajax submit button here, I had research over the net, but I cant find documentation about this.
I started with this.
public function actionCreate()
{
$model=new EmpSched;
// Uncomment the following line if AJAX validation is needed
// $this->performAjaxValidation($model);
if(isset($_POST['EmpSched']))
//$fk_user= $model->fk_user;
$model->attributes=$_POST['EmpSched'];
if($model->default==1){
$record = EmpSched::model()->findAllByAttributes(array('fk_user' => $model->fk_user,'default'=>array('1')));
var_dump($record);
if($record==false){
($model->save());
$this->redirect(array('view','id'=>$model->id_empsched));
}else{
$this->renderPartial('popup');
}
}else{
($model->save());
$this->redirect(array('view','id'=>$model->id_empsched));
}
}
$this->render('create',array(
'model'=>$model,
'emp'=> new CActiveDataProvider('schedule'),
));
}
popup.php
<?php $form=$this->beginWidget('bootstrap.widgets.TbActiveForm',array(
'id'=>'popup-form',
'enableAjaxValidation'=>true,
)); ?>
<?php
$this->beginWidget('zii.widgets.jui.CJuiDialog',array(
'id'=>'mydialog',
// additional javascript options for the dialog plugin
'options'=>array(
'title'=>'Michael',
'autoOpen'=>true,
'modal'=>true,
'width'=>300,
'height'=>300,
'buttons' => array(
'OK'=>'js:function(){
//$(this).dialog("close")
}',
'CANCEL'=>'js:function(){$(this).dialog("close")}'),
),
));
echo 'Another default schedule is already using. Do you want to set current schedule as default? ';
$this->endWidget('zii.widgets.jui.CJuiDialog');
?>
<?php $this->endWidget();?>
Why do you need to make this change before save?
I would do this on save and use the modal only for advertisement.
Like this:
public function actionCreate()
{
$model=new EmpSched;
// Uncomment the following line if AJAX validation is needed
// $this->performAjaxValidation($model);
if(isset($_POST['EmpSched']))
//$fk_user= $model->fk_user;
$model->attributes=$_POST['EmpSched'];
if($model->validate()){
if($model->default==1){
EmpSched::model()->updateAll(array('default'=>0),'fk_user=:fk_user',array(':fk_user' => $model->fk_user);
}
if($model->save(false)){
$this->redirect(array('view','id'=>$model->id_empsched));
}
}
}
$this->render('create',array(
'model'=>$model,
'emp'=> new CActiveDataProvider('schedule'),
));
}

Confirmation message in webgrid

I am using Webgrid in MVC.And I was added in default column in the webgrid with link button(anchor tag). Now I want when the button click shown a confirmation message . But I tried in below code
gridColumns.Add(grid.Column(
format:
#<text>
#if (item.complianceStatusId == (int)SchoolBreifcase.Models.Status.Tobeverified)
{
#Html.ActionLink("Complete", "CompleteComplianceTask", new { complianceId = item.ComplianceId, statusId = item.complianceStatusId },
new { onclick = "return confirm('Are you sure you wish to complete this compliance ?');" }, new { #class = "gridButton" })
}
</text>
Its showing error like : The best overloaded method match for 'System.Web.Helpers.WebGrid.Column(string, string, System.Func<dynamic,object>, string, bool)' has some invalid arguments
I removed the css class or confirmation ,then Its working fine .But I want to confirmation message ,and assign CSS class in the same field . How to do i solve this ??
I think i want for set css style like as webgrid,a {Styles } then we can remove the #class field in the anchor tag . But I try this .the css style not assigned in gridview button .
Edit:
Now i got the answer .I just changed for like below code
#Html.ActionLink("Complete", "CompleteComplianceTask", new { complianceId = item.ComplianceId, statusId = item.complianceStatusId },
**new { #class = "gridButton", onclick = "return confirm('Are you sure you wish to complete this task ?');"** })
I am assigned the css class and confirmation messge in same object ,then it working perfect .

Categories

Resources