I'm trying to allow users to delete multiple records, they click a link "delete" and a dialog shows saying are you sure? On clicking OK it should delete.
It works for the first time I do it, but for any other delete buttons I click it doesn't work. I'm setting a hidden field to store some information then getting that information in the dialog.
I have identified the problem see comment in code, but not sure why its a problem.
This is for the delete buttons:
$(".delete-item").click(function () {
$(this).css('font-weight', 'bold');
var delId = $(this).attr("id");
$("#hidden-itemid").val(delId);
$("#dialog-delete-sure").dialog("open");
});
heres the dialog:
$("#dialog-delete-sure").dialog({
autoOpen: false,
resizable: false,
height: 140,
modal: true,
buttons: {
Ok: function () {
var hiddenId = $("#hidden-itemid").val();//*** This comes back undefined the second time***//
var itemId = $("#hidden-itemid").val().split('-')[1];
var iType = $("#hidden-itemid").val().split('-')[0];
$.post('/User/Delete/', { id: itemId, itemType: iType }, function (json) {
if (json.success) {
$("#" + iType + "-row-" + itemId).hide('slow', function () { $("#hidden-itemid").remove(); });
$("#dialog-success-delete").dialog("open");
} else {
if (json.error == "unknown") {
$("#dialog-unknown-error").dialog("open");
}
if (json.error == "unauthenticated") {
$("#dialog-unauthenticated").dialog("open");
}
}
});
$("#hidden-itemid").css('font-weight', 'normal');
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
a typical delete button looks like this:
<a id="event-63" class="delete-item">Delete</a>
any ideas?
You are running
$("#hidden-itemid").remove();
on json.success so you remove the element from the DOM .. next time it does not exists and thus you get an error..
Related
I have a "parent" jQuery dialog that could span one to many jQuery dialogs when the OK button is pressed. It also might not create any child dialogs.
I also want to take the user to a confirmation page when the OK button is pressed in the parent.
I have used the stack option in the child to get "stacked" dialogs to work. My problem is when the OK button is pressed on the "parent", code continues to execute and the browser is taken to the confirmation page before the user has a chance to answer the "child" dialog.
Is there any way for the parent to wait till the child dialogs are answered before the code continues to take the user to the confirmation page from the parent's OK event?
My only other thought was to actually have the "child" OK button take the user to the confirmation page put that could complicate the code a bit since I would need code for letting the child know it is the last child so i can take the user to the confirmation page.
function getDeclineReason(appName) {
$("#dvDeclineReason")
.dialog({
modal: true,
stack: true,
title: 'Decline Reason',
open: function() {
$('.ui-widget-content').css('background', 'white');
$('.ui-widget-header').css('background', '#0072C6');
$('.ui-widget-header').css('border', '1px solid #0072C6');
},
buttons: {
OK: function() {
$(this).dialog("close");
return;
},
Cancel: function() {
$(this).dialog("close");
return;
}
},
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
draggable: false,
});
}
function reviewRequest() {
getDeclineReason("Test");
$("#dvReview")
.dialog({
modal: true,
title: 'Review Request',
open: function() {
$('.ui-widget-content').css('background', 'white');
$('.ui-widget-header').css('background', '#0072C6');
$('.ui-widget-header').css('border', '1px solid #0072C6');
},
buttons: {
OK: function() {
var numChecked = 0;
$('input[name="apps"]').each(function() {
if (NWF$(this).is(':checked'))
numChecked++;
});
if (numChecked == 0) {
if (!confirm("You have not approved any applications. If this was you intent then press OK to confirm the deny of all applications. Otherwise press cancel to try again."))
return;
}
var totalApps = $('input[name="apps"]').length;
var countApps = 0;
$('input[name="apps"]').each(function() {
var decision;
if (NWF$(this).is(':checked'))
decision = "Approved";
else {
decision = "Declined";
getDeclineReason($(this).text());
}
switch (status) {
case "Pend Mgr Review":
updateFields["Title"] = "Manager Decision";
break;
case "Pend App Owner Review":
updateFields["Title"] = "App Owner Decision";
break;
}
countApps++;
/*
updateFields["RequestNumber"] = requestNum;
updateFields["Application"] = $(this).text(); // Get value from current check box item
updateFields["AppStatusID"] = $(this).val();
updateFields["Decision"] = decision;
if (countApps == totalApps)
updateFields["LastDecision"] = "Y";
else
updateFields["LastDecision"] = "N";
addListItem("Decision",updateFields);
*/
});
$(this).dialog("close");
//window.location.href = "/apps/TAI/SitePages/Decisioned.aspx";
return;
},
Cancel: function() {
$(this).dialog("close");
return;
}
},
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
draggable: false,
});
}
You could keep track of all the open dialogs and everytime the user clicks "OK" to close one of then substract one to the count and check if there are no more dialogs remaining. Then you can redirect the user to the other site.
I am using JQueryUI Dialog box to show a link. I have 20 buttons with 20 different links. I wan't to pass that link so the Dialog box knows which link to open.
Here is the code:
$(function () {
$(document).ready(function () {
$('#dialog').dialog(
{
autoOpen: false,
modal: true,
open: function (event, ui) {
var id = $(this).data('aid'); // It does not work here
$(this).load("Link?id=" + id);
},
hide:
{
effect: "explode",
duration: 500
}
});
});
$('input[type=submit]').click(function () {
var id = $(this).data('aid'); // Works here. I wan't to pass this.
$("#dialog").dialog("open")
});
});
MVC/Razor:
<input type="submit" value="Show" class="button" data-aid="#Model.item.id" />
Does anyone have any suggestions on how I can accomplish this?
Prior to opening the dialog, set a data property to #dialog - which is inturn accessible as this inside the open() callback:
$("#dialog").data('aid', $(this).data('aid')).dialog("open");
Now this should work:
...
open: function (event, ui) {
var id = $(this).data('aid'); // Now it will work here
$(this).load("Link?id=" + id);
},
...
I have zozo tabs script and i want make ajax request at change tabs.
Here is my preview
Animation doesn't work here- i don't now why, but you can see javascript code:
$(document).ready(function () {
checkOrientation("vertical");
var onSelect = function(event, item) {
console.log("Selected tab text: " + item.tab.text()); alert('dsadsa');
};
var tabbedNav = $("#tabbed-nav").zozoTabs({
orientation: "vertical",
animation: { duration: 200 },
defaultTab: "tab1",
effects: "slideD",
easing: "easeOutQuad",
select: onSelect
});
$("#ddl-orientation").bind("change", function (e) {
var orientation = $(this).val();
checkOrientation(orientation);
tabbedNav.data('zozoTabs').setOptions({ "orientation": orientation });
});
$("#ddl-position").bind("change", function (e) {
tabbedNav.data('zozoTabs').setOptions({ "position": $(this).val() });
});
function checkOrientation(orientation) {
jQuery('#ddl-position').children('option[data-orientation="h"]').attr('disabled', !(orientation === "horizontal"));
}
});
Apparently this animation is easy to use in ajax.
here is documentation
I don't know well javascript and i don't have idea what i must do.
Could you show me where i must put code to active ajax ? simple alert message will by ok : ) I will be grateful too, if you tell me how return ajax request to content tab.
function onSelect(event,item)
{
if(item.tab.text() == 'some tab name')
{
alert("i can rollerblade");
}
}
I have used 'select' attribute of zozo tabs but it never worked for me.
But I have found an alternative for it
Put a class or id in li.
$("li#123").live("click", function(e){
if($(this).text() == 'some tab name')
{
alert("i can rollerblade");
$.ajax({
..........
});
}
}
I have a page that call from ajax a form with a specific target. this form has a delete entry and for that a warning with a jQuery dialog is used. everything works great.
BUT :
After doing the change or even not doing it, when I open another form (different form by ajax call) and I call the same code below described. When It is submit the dialog the #var_blabla as a value of 1 (the value of the first dialog opened/loaded) and for that moment should be '2'.
I try to figure it out.. So my problem I guess is not for the dialog it self, since I try to load a second page without the constructor and the dialog didn't open (what should be expected).
The problem is on the button 'Submit Delete' that has an event function and it stays active over another that is created.
The site have a lot of forms and many dialogs for each form, is there a wait to unbind, or destroy completely the dialog and the buttons? Ideas please?
Thanks
simplified 1st dialog call code:
$("#dialog-confirm-elimina").dialog({
autoOpen: false,
resizable: false,
height:220,
modal: true,
buttons: {
'Submit Delete': function() { $('#var_blabla').val('1');
$('#form_submit').submit();
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
simplified 2nd dialog call code:
$("#dialog-confirm-elimina").dialog({
autoOpen: false,
resizable: false,
height:220,
modal: true,
buttons: {
'Submit Delete': function() { $('#var_blabla').val('2');
$('#form_submit').submit();
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
UPDATE:
<script type="text/javascript">
submited=false;
var toggleOpened = true;
$("#admin_retractil_1").click(function () {
if(!toggleOpened){
$('#admin_retractil_1').toggleClass('toggleGESBHeadown');
toggleOpened=true;
}
else{
$('#admin_retractil_1').toggleClass('toggleGESBHeadown');
toggleOpened=false;
}
var objecto = $(this).attr("id");
$('#' + objecto+"_div").slideToggle("slow");
});
var toggleOpened2 = false;
$("#admin_retractil_2").click(function () {
if(!toggleOpened2){
$('#admin_retractil_2').toggleClass('toggleGESAHeadown');
toggleOpened2=true;
}
else{
$('#admin_retractil_2').toggleClass('toggleGESAHeadown');
toggleOpened2=false;
}
var objecto = $(this).attr("id");
$('#' + objecto+"_div").slideToggle("slow");
});
$(document).ready(function() {
//$( "button").button();
var locked = true;
$( "#EditDataForm").button({ icons: { primary: "ui-icon-locked" }});
$( "#EditDataForm" ).click(function() {
if(locked){
locked = false;
$( "#EditDataForm").button({ icons: { primary: "ui-icon-unlocked" }});
$('#edit_data_admin').slideToggle("slow");
$('#view_data_admin').slideToggle("slow");
}else{
locked = true;
$( "#EditDataForm").button({ icons: { primary: "ui-icon-locked" }});
$('#edit_data_admin').slideToggle("slow");
$('#view_data_admin').slideToggle("slow");
}
return false; });
$( "#DelDataForm").button({ icons: { primary: "ui-icon-scissors" }});
$( "#DelDataForm" ).click(function() {
$('#dialog-confirm-del').dialog('open');
return false; });
/*abre popup de alerta de eliminar */
arrayRemove.push("dialog-confirm-del");
$("#dialog-confirm-del").dialog({
autoOpen: false,
resizable: false,
height:220,
modal: true,
buttons: {
'Remove Stuff': function() {
$('#sel_action_form').val('TypoDesClients_DelDef');
$('#name').val('_____');
$('#form_submit').submit();
$(this).dialog('close');
},
Cancelar: function() {
$(this).dialog('close');
}
}
});
$( "#AcceptChanges").button({ icons: { primary: "ui-icon-check" }});
$("#form_submeter").validator({
position: 'center right',
offset: [0, 0],
message: '<div><em /></div>'
}).bind("onSuccess", function(e, els) {
var numSucceeded = els.length,
numExpected = $(this).data('validator').getInputs().length;
if (numSucceeded === numExpected) {
if(!submited){submited=true;
SubmitFormSV('form_submit', 'action/action_a.php');
return false;
}else return false;
}
});
$( "#radio" ).buttonset();
$("#1_radio").click(function () {
$("#tr_1").show();
});
$("#2_radio").click(function () {
$("#tr_1").hide();
});
});
local lib:
function SubmitFormSV(formul, address)
{
DoChecks();
$("#loading").show("slow");
$.post(baseURL + address, $('#' + formul).serialize(), function(html){
$('#content').slideUp("slow", function () {
AjaxChargePage(html, true);
});
});
$("#loading").hide("slow");
return false;
}
next the next chuck of javascript is similar to this one.
and with this work because destroy didn't:
DoChecks() As:
$.each(arrayRemove, function() {
var element = arrayRemove.pop();
$('#'+element).remove();
});
When you're done with dialog 1 try...
$("#dialog-confirm-elimina").dialog("destroy");
or in your Cancel function...
$(this).dialog("destroy");
The .dialog command creates a new dialog on the element selected. You're doing this twice, and thus having problems. Once the dialog is created it can be reused using open and close methods or destroyed as I've shown above and then recreated.
Ok, then finally I got a solution that make everything works. Instead of using the
$("#dialog-confirm-elimina").dialog("destroy");
I use:
$("#dialog-confirm-elimina").remove();
I still don't know the reason but clearly don't have the problem anymore.
Thanks for the answer though.
PS: If anyone know how could this append I appreciate to illuminate me about it.Thanks
I read lots of questions about this, but every solution uses the same workaround, submiting the form inside the jquery dialog, something like this:
$("#dialog").dialog({
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
Isn't there an easier way, more like javascript confirm?
<input type="submit" onclick="return confirm('are you sure?');" />
Why something like return true, return false doesn't work?
Here's what you can do, you change your input type from 'submit' to 'button', then, you can have your script like this:
$(document).ready(function(){
$("#dialog").dialog({
autoOpen: false,
buttons : {
"Confirm" : function() {
$('#form1').submit();
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$('#submitButton').click(function(){
$("#dialog").dialog('open');
});
});
This way your form will only be submitted when the used confirms the dialog.
The reason it doesn't matter if you return false or true in your case is that the dialog is just shown but code from the submit event keeps on executing unless you return false just after showing the dialog.
I wrote the following code to use JQuery's UI Dialog as a modal confirmation. By submitting the form via the event target there is not a recursive call to the submit event handler.
$(function () {
$('form[action*="/Delete"]').submit(function (e) {
e.preventDefault();
$("<div>Are you sure you want to delete this?</div>").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Ok: function () {
e.target.submit();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
});
This is because jQuery UI dialogs are not technically modal, unlike confirm and alert. They don't pause the javascript you're in the process of executing. But you can get essentially the same thing like this:
function restOfTheCode(returnValue)
{
//do stuff
}
$("#dialog").dialog({
buttons : {
"Confirm" : function() { $(this).dialog("close"); restOfTheCode(true); },
"Cancel" : function() { $(this).dialog("close"); restOfTheCode(false); }
}
});
//anything down here executes immediately after the dialog is shown, so that's no good.
Is equivalent to:
var returnValue = confirm("Are you sure you want to confirm?");
//do stuff
Edit: okay, with the addition of the submit issue the alternate code here doesn't make any sense. But the explanation is the same: it's not modal. If you really wanted to, you could simulate this:
function modalDialogConfirm()
{
var buttonClicked = false;
var valueSelected;
$("#dialog").dialog({
buttons : {
"Confirm" : function() { $(this).dialog("close"); buttonClicked = true; valueSelected = true; },
"Cancel" : function() { $(this).dialog("close"); buttonClicked = true; valueSelected = false; }
}
});
function y { setTimeOut("x()", 100); }
function x { setTimeOut("y()", 100); }
while(!buttonClicked);
return valueSelected;
}
...but this just freezes the browser, so it's not a whole lot of useful...