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!
Related
This is how i open the dialog box i found a tutorial long ago and i forgot the link to that tutorial
$("#dialog1").html("Mr. " + "<span id='name'>" + data[i].name + "</span>" + "has a building property in <span id='address'>" + data[i].address + "</span>");
$("#dialog1").dialog({title: pml});
$("#dialog1").dialog("open");
and this is how i create the dialog box
var div = $("<div id='dialog1'>");
$("body").prepend(div);
$("#dialog1").dialog({
autoOpen: false,
resizable: false,
modal: true,
//title: "Modal",
height: 250,
width: 400,
buttons: {
"Add": function() {
$(this).dialog('close');
},
"No": function () {
$(this).dialog('close');
},
"close": function () {
$(this).dialog('close');
}
}
});
Currently the button add and no has function of closing the dialog box but i want to add a function in a way that when add button(which is inside the dialog box) is clicked i will get the value of the span in the html of the dialog so that i can use it as parameter for ajax request
You can simply execute function in "Add" function:
...
"Add": function() {
$(this).dialog('close');
somefunction($('#span_id').text()); // #span_id = id of span whitch you want to get text from
},
...
and
function somefunction(text) {
// ajax call
}
I have a javascript function that makes a popup and loads an .aspx page inside the popup.
Here is my code:
function moveEvent(doTheMove) {
var selectedNotesList = getSelectedNoteIDs();
if (doTheMove) {
$.fancybox({
'autoScale': false,
'type': 'iframe',
'height': 225,
'width': 800,
'href': 'Utilities/MoveFileTemplate.aspx?eventID=' + selectedNotesList +
'&oldEventCaseFile=' + $('#hidCaseFile').val(),
onComplete: function () {
$('#fancybox-overlay').unbind();
},
onClosed: function () {
$("#viewNotesGrid").flexReload();
}
});
}
else
showMessage("No expenses are selected.");
}
In my .aspx page I have 3 radio buttons, a DropDownList and 2 buttons. What I am trying to do is close the popup when the user clicks on the "cancel" button instead of having to press the "X" button in the top corner. (When the cancel button is pressed it has to mimic the "X" button so that the "onClosed:" can fire and reload my flexigrid)
Any suggestions?
you can try
var theBox;
...
function moveEvent(doTheMove) {
...
theBox = $.fancybox({
'autoScale': false,
'type': 'iframe',
'height': 225,
'width': 800,
'href': 'Utilities/MoveFileTemplate.aspx?eventID=' + selectedNotesList +
'&oldEventCaseFile=' + $('#hidCaseFile').val(),
onComplete: function () {
$('#fancybox-overlay').unbind();
},
onClosed: function () {
$("#viewNotesGrid").flexReload();
}
});
...
} //close the moveEvent function
then on the onclick of your cancel button call
window.parent.theBox.close();
EDIT(OP): it is actually: parent.$.fancybox.close();
client side
window.close(); as javascript code in
EDIT:
Server side
Page.RegisterStartupScript("anykey","window.close();");
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
I added this code in my PopUpWindow.js File.. in my scripts folder
var window = "<div id='window' style='display: none;width:190px'></div>";
PopUpWindow = function (titles, message, redirectURL) {
document.getElementById('window').innerHTML = message;
$("#window").dialog({
resizable: true,
height: 180,
title: titles,
width: 500,
modal: false,
open: function () {
$('.ui-widget-overlay').show();
$('.ui-dialog-titlebar-close.ui-corner-all').hide();
},
buttons: {
"OK": function () {
$(this).dialog("close");
if (redirectURL) {
window.location = redirectURL;
}
}
}
});
};
I have Included this js file in Site.Master page.
But still i am not able to access this PopUpWindow function in any of my aspx page?
is that I am doing something worng?
I am not able to execte this PopUpWindow for showing the Popup Message
PopUpWindow("Field to Show","Message","URL redirect");
Thanks
Although "window" is being held in a variable, it is not added to the page anywhere before you try to get it by id.
var window = "<div id='window' style='display: none;width:190px'></div>";
PopUpWindow = function (titles, message, redirectURL) {
// Add to body (change the selector to whatever's relevant)
$('body').append( window );
// Set the innerHTML the jQuery way :)
$('#window').html( message );
$("#window").dialog({
resizable: true,
height: 180,
title: titles,
width: 500,
modal: false,
open: function () {
$('.ui-widget-overlay').show();
$('.ui-dialog-titlebar-close.ui-corner-all').hide();
},
buttons: {
"OK": function () {
$(this).dialog("close");
if (redirectURL) {
window.location = redirectURL;
}
}
}
});
};
I've only tested this on JSFiddle, and the CSS isn't there, so I can't guarantee there's not more wrong, but this does make a dialog appear if you change display to "block" on `#window'
It would seem that either you are loading this file wrong (bad url) or something else is going on. Could you check and let us know? It could even be a syntax error.
EDIT:
Did you forget to append window to your DOM?
var window2 = "<div id='window' style='display: none;width:190px'></div>";
$(window2).appendTo("body")