So I have a table of records, where everyone of them has a remove button. I want to add a confirmation popup, which will shows up when button clicked.
var $confirmDialog = $('<div></div>')
.html('This record will be removed.')
.dialog({
autoOpen: false,
title: 'Remove confirtmation',
buttons: {
"OK": function () {
$(this).dialog("close");
return true;
},
"Cancel": function () {
$(this).dialog("close");
return false;
}
}
});
My remove button event:
$(".removeButton").on("click", function(){
if($confirmDialog.dialog('open')){
var name = $(this).siblings(".someClassForNameHolder").text();
var urlPath = $("#hiddenForUrl").val();
Application.postRecord(name, "Remove", urlPath);
}
});
Btw, i have few following points:
1) I can't provide every record in the table with unique ids, so I have to keep my data collections (name variable) inside my removeButton event (to be able to use this.sibling...).
2) I want my script to wait until $confirmDialog returns value and only then continue code execution.
Just assign your urlPath to a global variable, and execute the POST inside the OK handler:
var nameToRemove, urlPathToRemove;
var $confirmDialog = $('<div></div>')
.html('This record will be removed.')
.dialog({
autoOpen: false,
title: 'Remove confirtmation',
buttons: {
"OK": function () {
$(this).dialog("close");
Application.postRecord(nameToRemove, "Remove", urlPathToRemove);
},
"Cancel": function () {
$(this).dialog("close");
return false;
}
}
});
$(".removeButton").on("click", function(){
if($confirmDialog.dialog('open')){
nameToRemove = $(this).siblings(".someClassForNameHolder").text();
urlPathToRemove= $("#hiddenForUrl").val();
}
});
Related
I am having a rather strange issue with jQuery/Javascript. (This happens in IE, FF and Chrome)
I have a (asp.net) webpage as follows:
Header with lots of buttons (generated at PreRender)
Hidden div with buttons doing postbacks (generated OnLoad) & a div to use as a dialog
Page with an iFrame
Lets say I have a Button with '1234_stuff' as its CLIENTID in the Hidden div.
I have a button in the Header that has a OnClientClick = "$('#1234_stuff').click();return false;";
When I click the button that is in the header this works perfectly. Good.
I have an other button in the header (lets call it PopupStarter) that has a OnClientClick = "Popup('Titel', 'Description', '1234_stuff');return false;";
The javascript Popup function is as follows:
function Popup(title, description, buttonid) {
$('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
var buttonsToShow;
if (buttonid!= null) {
buttonsToShow = {
'ClickMe': function () {
$('#' + buttonid).click();
$(this).dialog('close');
},
'Cancel': function () {
$(this).dialog('close');
}
}
} else {
buttonsToShow = {
'Cancel': function () {
$(this).dialog('close');
}
}
}
$('#dialog-popup').dialog(
{
resizeable: false,
width: 'auto',
modal: true,
draggable: false,
buttons: buttonsToShow
});
}
When I click the 'PopupStarter' button the jQuery dialog shows as expected, no trouble there. However... when I click the ClickMe button nothing happens (besides closing the dialog).
I would think I did something wrong: so I tried it with a timer:
function Popup(title, description, buttonid) {
$('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
var buttonsToShow;
if (buttonid!= null) {
buttonsToShow = {
'ClickMe': function () {
setTimeout(""$('#"" + buttonid + ""').click();"", 100);
$(this).dialog('close');
},
'Cancel': function () {
$(this).dialog('close');
}
}
} else {
buttonsToShow = {
'Cancel': function () {
$(this).dialog('close');
}
}
}
$('#dialog-popup').dialog(
{
resizeable: false,
width: 'auto',
modal: true,
draggable: false,
buttons: buttonsToShow
});
}
This works!! Now that is odd. So I called the parent jQuery
parent.$('#' + buttonid).click();
This also does not work.
And to top it all off, when I enter each of the lines manually in the console of the browser they all work!
Try using this:
$(document).on('click', '#' + buttonid, function(){
Your functions here;
});
Any items that do not exist on page load, will need to have the event listeners applied to the document, the body, or any parent selector that existed in the DOM on page load. Javascript does not attach listeners to objects that are not present when the DOM is loaded. Hope this helps!
I am having some issues with multiple form submissions with a jQuery/ajax form. I found this by printing every instance of form submission on my server, and saw that a form would submit correctly once, then again multiple times.
Just to be clear, this code works 100% correctly for the first submission, but when I click on another row in my table, and create a new dialog/submit it, it ends up submitting multiple times.
I think it has to do with event binding, but am having trouble fixing it. Any insight or help would be much appreciated.
The button's id is "save-flag-button"
// When someone clicks on the flag column in my table, a dialog pops up //
// on the condition that a flag does not exist. //
$(function() {
$('.flag').click(function() {
var cellId = "flag" + String(this.getAttribute("data-client-rel"));
if (this.getAttribute("data-flag-exists") == '0') {
// create dialog
var dialog = flagDialog('Create Flag');
// Making the form ajax
$("form", dialog).ajaxForm(function(success, data) {
if (success) {
$("#" + cellId).attr("data-flag-exists", '1');
$("#" + cellId).attr("data-flag-content", data["flag_state"]);
$("#" + cellId).text(data["flag_state"]);
$("#flag-dialog").dialog("close");
} else {
alert("Failed to submit flag. Please retry.");
}
});
} else { }
}).hover(function() {
if (this.getAttribute("data-flag-exists") == '0') {
this.innerHTML = '<span style="color: #4183C4;">Create flag!</span>';
}}, function() {
this.innerHTML = this.getAttribute("data-flag-content");
})
});
// jquery dialog code //
function flagDialog(dialogTitle) {
var dialog = $("#flag-dialog").dialog({
autoOpen: false,
autoResize: true,
modal: true,
minHeight: 300,
minWidth: 450,
position: "center",
title: dialogTitle,
buttons: [{
id: "flag-cancel-button",
text: "Cancel",
click: function() {
$(this).dialog("close");
}
},
{
id:"save-flag-button",
text: "Submit",
click: function() {
$("#flag-dialog").dialog("destroy");
// $("#client-relationship-flag-form").submit();
}
}],
close: function() {
//$("#notes-text").text("");
}
});
// Unbinding buttons here //
$("#save-flag-button, #flag-cancel-button").unbind();
$("#save-flag-button").unbind('click').click(function() {
$("#client-relationship-flag-form").submit();
});
$("#flag-cancel-button").click(function() {
$("#flag-dialog").dialog("close");
});
dialog.dialog("open");
return dialog;
};
ajaxForm binding should be done once only.
Try to put the ajaxForm binding on $(document).ready event and try to restructure your logic. ajaxForm was bind every time you click .flag element and all previously bind ajaxForm would be called on all succeeding click event.
I'm trying to create a dialog box that adds an item to a dropdownlist;
here's the code.
$(function () {
$('#applicantDialog').dialog({
autoOpen: false,
width: 600,
height: 500,
modal: true,
title: 'Add Applicant',
buttons: {
'Save': function () {
var createApplicantForm = $('#createApplicantForm');
if (createApplicantForm.valid()) {
$.post(createApplicantForm.attr('action'), createApplicantForm.serialize(), function (data) {
if (data.Error != '') {
alert(data.Error);
}
else {
// Add the new Applicant to the dropdown list and select it
$('#Applicant').append(
$('<option></option>')
.val(data.id_applicant)
.html(data.Applicant.Applicant_name)
.prop('selected', true) // Selects the new Applicant in the DropDown LB
);
$('#applicantDialog').dialog('close');
}
});
}
},
'Cancel': function () {
$(this).dialog('close');
}
}
});
$('#applicantAddLink').click(function () {
var createFormUrl = $(this).attr('href');
$('#applicantDialog').html('')
.load(createFormUrl, function () {
// The createGenreForm is loaded on the fly using jQuery load.
// In order to have client validation working it is necessary to tell the
// jQuery.validator to parse the newly added content
jQuery.validator.unobtrusive.parse('#createApplicantForm');
$('#applicantDialog').dialog('open');
});
return false;
});
});
My problem is that when the form is saved and the item is added, it never closes the dialog box. When I click on cancel, the list is not updated until I refresh the page.
Is it a problem with postback and how can I deal with that?
Thanks
You may find solution over this in many posts(Post 1 , Post2 ), but their solution not working for me.
Here is the normal jquery dialog box written by me.
$("#dialog").dialog({
autoOpen:false,
buttons:{
"ok":function(){
$(this).dialog("close");
return true;
},
"cancel":function(){
$(this).dialog("close"); return false;
}
}
});
I will open the dialogbox with code:
var returnVal=$("#dialog").dialog("open");
I need to return false,if user clicks 'cancel' and return true if user clicks 'ok'.
var returnVal=$("#dialog").dialog("open");
I NEED returnVal to return boolean value(true/false), but it returns javascript object.
You cannot return something from the OK / cancel functions as they are essentially event handlers that are only processed upon the click of a button.
Use a separate function to process the result :
$mydialog = $("#dialog").dialog({
autoOpen: false,
buttons: {
"ok": function() {
$(this).dialog("close");
processResult(true);
},
"cancel": function() {
$(this).dialog("close");
processResult(false);
}
}
});
$mydialog.dialog("open");
function processResult(result) {
alert(result);
}
Working example : http://jsfiddle.net/nz2dH/
I have implement Yes/No confirmation dialog with custom message and callback function like this. This is useful, if you like to use the same dialog for various purposes.
<script type="text/javascript">
// prepare dialog
$(function () {
$("#confirm-message-dialog").dialog({
autoOpen: false,
modal: true,
closeOnEscape: false,
buttons: {
Yes: function () {
$(this).dialog("close");
$(this).data("callback")(true);
},
No: function () {
$(this).dialog("close");
$(this).data("callback")(false);
}
}
});
});
// open dialog with message and callback function
function confirmMessageDialog (message, callback) {
$('#confirm-message-dialog-message').text(message);
$('#confirm-message-dialog').data("callback", callback).dialog("open");
};
</script>
<!-- The dialog content -->
<div id="confirm-message-dialog" title="Warning">
<p id="confirm-message-dialog-message"></p>
</div>
Hope that this helps others as well :)
I have a javascript function that calls another function, I am now facing a problem where I have to click a button twice to display a modal dialog box, I know the issue most likely lies in this line:
$('#dialog_link').click(function() because I already called 'modaldialog' with an onclick like this:
<input id="dialog_link" type="button" value="Save" onclick ="javascript:modaldialog();" />
How can I rewrite this line $('#dialog_link').click(function() to call function() without another click?
Thanks!
<script type="text/javascript">
function modaldialog() {
window.Page_ClientValidate();
if (window.Page_IsValid) {
$('#dialog_link').click(function() {
$('#dialog').dialog('open');
return false;
});
}}
</script>
<script type="text/javascript">
$(function() {
// Accordion
$("#accordion").accordion({ header: "h3" });
// Tabs
$('#tabs').tabs();
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
modal:true,
close: function() {
document.getElementById('dialog').style.display = 'block';
document.getElementById('fade').style.display = 'None';
},
buttons: {
"Ok": function() {
$(this).dialog("close");
document.getElementById('dialog').style.display = 'block';
document.getElementById('fade').style.display = 'None';
},
"Cancel": function() {
$(this).dialog("close");
document.getElementById('dialog').style.display = 'block';
document.getElementById('fade').style.display = 'None';
}
}
});
// Dialog Link
//$('#dialog_link').click(function() {
// $('#dialog').dialog('open');
// return false;
//});
// Datepicker
$('#datepicker').datepicker({
inline: true
});
// Slider
$('#slider').slider({
range: true,
values: [17, 67]
});
// Progressbar
$("#progressbar").progressbar({
value: 20
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
I'm not sure what your goal really is, but I don't think .click(func) does what you think it does. Since .click(func) adds that function as a click event listener every time you execute this line you would get an additional function in the listener set. You seem to be running this in your onClick meaning every time someone clicks your link you'll add another listener that does the same thing ($('#dialog').dialog('open');). If you just want your verification to be done before substituting the onClick handler you'll have to unbind the current function as well, but you might be better off just doing the check every time and calling $('#dialog').dialog('open') inside your if (window.Page_IsValid) block.
If what you really want is for modaldialog to be called only once and $('#dialog').dialog('open'); to be executed that time and every consecutive clicks do the following inside your conditional:
$('#dialog_link').unbind('click', this);
var f = function () { $('#dialog').dialog('open') }; // Function to replace onClick function.
$('#dialog_link').click(f);
f(); // Execute replacement function after assigning it.