I have to show number of users in table in a table with pagination
And I have delete option for each user
Im using datatable pagination
It has to ask confirm before delete the user, So im using jquery .confirm
function (jquer.confirm.js)
This jquery confirm box not working in second page of pagination.
Here is my code:
$(".del_user").each(function(){
var user_id = this.id;
$("#"+user_id).confirm({
text: "Are you sure you want to delete this user?",
title: "Confirmation required",
confirm: function(button) {
<!---delete function()---->
return false;
},
cancel: function(button) {
// nothing to do
},
confirmButton: "Yes",
cancelButton: "No",
post: true,
confirmButtonClass: "btn-danger",
cancelButtonClass: "btn-default"
});
});
How to solve this?
Try this...
your jquery dom not loading for another tab so my experience is doing following like that
".paginate_button" is your tab button class name
$(".paginate_button").click(function(){
$(".del_user").each(function(){
var user_id = this.id;
$("#"+user_id).confirm({
text: "Are you sure you want to delete this user?",
title: "Confirmation required",
confirm: function(button) {
<!---delete function()---->
return false;
},
cancel: function(button) {
// nothing to do
},
confirmButton: "Yes",
cancelButton: "No",
post: true,
confirmButtonClass: "btn-danger",
cancelButtonClass: "btn-default"
});
});
});
You can do this...
add "fnDrawCallback" option in your datatable function:
$('#datable_id').dataTable({
"fnDrawCallback": function () {
createconfirmationbox();
},
});
And your jquery confirmation function look like this :
function createconfirmationbox(){
$('.someclass').confirmation({
onConfirm: function () {
*do something on confirmation*
}
});}
Related
Problem
JQuery Validate does not work. In the below plunker, Please click on "Please click here" button and then click on save. It will not validate form.
Sample code in Plunker
I have jQuery validation code which is working fine in case I open the add/update form in new page. I meant by redirecting the user to a new route.
$("form#" + createRoleForm).validate({
rules: {
},
messages: {
},
submitHandler: function(form) {
}
});
In case I open the add/update form on clicking the button in same page when I am inside List page...The above jQuery validate code does not work. I am assuming that I will need something like this...
$(document).ready(function() {
$(document).on("eventtype", "object", function() {
});
});
But, I am not sure how can I bind the validate event in this way....
Since your form is async, your element is not already on the dom when you are creating the validator.
What you should do is add the validate code on your ajax success function:
//...
success: function(result) {
$('#SaveRoleModal').html(result);
createValidator("form#" + createRoleForm)
return false;
},
//...
function createValidator(target) {
$(target).validate({
rules: {
Role: {
required: true
}
},
messages: {
Role: {
required: "Please enter Role"
}
},
submitHandler: function(form) {
console.log('ok :)')
}
});
}
I have the following in a table, repeated for each row:
<a <?php echo 'id="'.$id.'"'; ?> class="custom-dialog-btn btn btn-small">
<i class="icon-trash"></i>
</a>
where id is different for each line, because it is taken from a table in database where it is the primary key.
Then, I used th following jQuery code:
$(".custom-dialog-btn").bind("click", function (event) {
$("#mws-jui-dialog").dialog("option", {
modal: false
}).dialog("open");
event.preventDefault();
});
$("#mws-jui-dialog").dialog({
autoOpen: false,
title: "Alert",
modal: true,
width: "640",
buttons: [{
text: "NO",
id: "cancel_button",
click: function () {
$(this).dialog("close");
}
},
{
text: "OK",
id: "confirm_button",
click: function () {
myremovefuntion(id); // I need the id
}}
]
});
that refers to the dialog:
<div id="mws-jui-dialog">
<div class="mws-dialog-inner">
<h2>Are you sure you want to delete?</h2>
</div>
</div>
How can I pass the id to the modal?
You can append a data attribute to your dialog div as follows;
$('a').click(function (e) {
e.preventDefault();
$("#your_dialog").data('mycustomdata', $(this).prop('id')).dialog('open');
});
And retreive it like this
$("#your_dialog").dialog({
autoOpen: false,
resizable: false,
height:200,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog('close');
},
'Delete': function() {
$(this).dialog('close');
var mydata = $(this).data('mycustomdata'); // = gives you the id of anchor element
// some delete logic
}
}
});
While Emin's answer certainly works, I wonder if this fabuolus jQuery UI library perhaps has a dialogue flavour analogue to JavaScript's native confirm() method? Or perhaps a possibility to pass in callback functions? This would remove the need from the dialogue code containing business logic.
Use the following code to get the id:
var id = $(this).prop("id");
And you will get the id of that which element you have clicked.
Hey guys with this line of code I enable the jQuery validator to validate certain form fields.
<script>
$(function()
{
$( "#date").datepicker( {autoSize: true, dateFormat: 'yy/mm/dd', showAnim: 'show' } );
});
$(function()
{
$( "#starttime, #stoptime, #starttime2, #stoptime2, #starttime3, #stoptime3, #starttime4, #stoptime4" ).timepicker( {autoSize: false, showAnim: 'show' } );
});
</script>
<script>
$(function() {
$("#productionlogform").validate({
rules: {
date: {
required: true,
},
starttime: {
required: true,
},
stoptime: {
required: true,
}
}
});
});
</script>
As you see, date, starttime and stoptime are required, therefore the form can not be posted before it's set.
Now this is VERY annoying if I have a delete button in my form...
Any idea's how to allow that button to bypass the validation rules?
Also, don't forget to validate on the server side as well. Client-side validation should never, ever, EVER, be relied upon to prevent people entering bad/malicious data.
Sorry Bhavik Shah that I can not accept your answer, but anyway, the validationEventTrigger did the job. Rewrote my code and looks like this:
<script>
$(function() {
$("#deleteproductionlog").click(function () {
$("#productionlogform").validate().cancelSubmit = true;
});
$("#newproductionlog").click(function () {
$("#productionlogform").validate().cancelSubmit = true;
});
$("#productionlogform").validate({
rules: {
date: {
required: true,
},
starttime: {
required: true,
},
stoptime: {
required: true,
}
},
});
});
</script>
The button named "deleteproductionlog" and "newproductionlog" will skip the validation of the form, which is called "productionlogform".
I'm submitting a form using the AJAX JQuery validation plugin. The code looks something like this:
$(document).ready(function(){
$("#myform").validate({
debug: false,
rules: {
fname: {required: true},
sname: {required: true},
gender: {required: true},
},
messages: {
fname: {required: " *"},
sname: {required: " *"},
gender: {required: " *"},
},
submitHandler: function(form) {
$('input[type=submit]').attr('disabled', 'disabled');
$('#results').html('Loading...');
$.post('process_participant.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
Now so the problem is after I send this information to my PHP page to be prcoessed (process_participant.php) I want to respond with a confirmation box asking if the user wants to add another participant. The PHP code looks something like this:
if (everything processes okay){
echo '<script type="text/javascript">';
echo 'input_box=confirm("Saved successfully. Would you like to add another participant?");
if (input_box==true) {
window.location = "new_participant.php"
}
else {
window.location = "home.php"
}';
echo '</script>';
}
This all works fine but the default confirmation box isn't acceptable. I need to be able to style it and change it from OK and CANCEL to YES and NO. I decided to use this plugin: http://kailashnadh.name/code/jqdialog/ and use the following code on the PHP side:
echo '<script type="text/javascript">';
echo " function confirmBox() {
$.jqDialog.confirm(\"Are you sure want to click either of these buttons?\",
function() { window.location = \"new_participant.php\"; },
function() { window.location = \"home.php\"; }
);
});";
echo "confirmBox();";
However I can't seem to get it to work. Maybe I should avoid using a plugin? The whole AJAX thing is making things confusing. Anyone know the best way to implement a custom confirm box in this situation?
create the box from the start with display:none
and when the function from the post request returns
do the checks (based on the variable data)
and if everything is ok change the visibility using jquery's show()
try this
its easy to implement just define your own html for alert and conform-box
I am trying to integrate new functionality using jQuery UI's dialog.
I have a page with a link. When a link is clicked a modal dialog with a form in it opens. That part works OK.
$("#myForm").hide();
$("#myLink").click(function(){
$("#myForm").dialog({
modal: true,
draggable: false,
resizable: false,
width: 450,
buttons: {
"Submit": function() {
// ???
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
Open Dialog
<div id="myForm">
<form>
<textarea id="myValues" rows="10"></textarea>
</form>
</div>
Now, I need to submit the form from within my dialog and POST results to the same page. I am getting all confused with how to implement the rest. I did look at the jQuery .post() example which made me even more confused. The page is in PHP, so when the results are submitted I need to get the post value and do some server-site action.
if (isset($_POST["myValues"])) {
// do something
}
Stuck, need help.
In jQuery function for "Submit" button:
$('form#myFormId').submit();
And in HTML:
<form id="myFormId" method="POST" action="processingscript.php">
Then the php script will get all the values that have been POSTed and can process them.
Look into using the jQuery submit function
Reference: http://api.jquery.com/submit/
Use this method that updates dialog content:
$("#myformid").dialog({
modal: true,
draggable: false,
resizable: false,
width: 450,
buttons: {
"Submit": function (event) {
event.preventDefault();
var formvalues = $("#myformid").serialize();
$.post('/Home/Edit', formvalues, function (data) {
//use data
$('#myformid').html(data);
}, "html");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
In the Control,
[HttpPost]
public PartialViewResult Edit(ViewModel model) {
//use data
return PartialView("MyDialogView", model);
}