Develop Reference

dialog get html span value on click jquery

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
}

fancybox beforeClose issue

I have a form implemented in a fancybox (version 2.1.5) iframe. People can choose to not to fill up the form and click on "X" to close fancybox form or alternately fill up the form and click on Register.
I have a beforeClose callback setup to set cookies and do some work. But I want this to be triggered only if someone clicks on "X" or Esc key. See code below
$.fancybox.open({
type: "iframe",
href: "/[url].php",
autoSize: true,
height: "auto",
margin: 0,
padding: 0,
autoCenter: true,
maxWidth: 460,
maxHeight: 615,
modal: false,
iframe: {
scrolling: "no"
},
beforeClose: function () {
//set cookie code
},
});
But if someone was to Register, it will show a Thank you message for 2 seconds and close the fancybox. This is done by using window.parent.$.fancybox.close(); See detailed code below
$.post('/register.php', post_vars, function(data) {
window.parent.$.fancybox.close();
});
However I do not want the beforeClose event to be called in case I close it from the iFrame or even if it gets called, I need to somehow know that it has been done from the iframe & not using the "X" button.
Is there a way to differentiate this?

I can think different ways to do this, like binding custom events to the fancybox close button or catching the escape key with keyup or keypress, etc.
I guess the simplest way is to create in the parent page, a custom close function like :
var closedFromIframe = false;
function customClose() {
closedFromIframe = true;
jQuery.fancybox.close();
}
This function will close fancybox (from the parent page itself) when invoked from the iframed page AND will enable the (previously defined) closedFromIframe flag, so instead of this :
$.post('/register.php', post_vars, function(data) {
window.parent.$.fancybox.close();
});
... you could do
$.post('/register.php', post_vars, function(data) {
window.parent.customClose();
});
Then, in your fancybox script you could validate within the beforeClose callback, the status of the closedFromIframe flag and do whatever you need to :
$.fancybox.open({
// your API options
beforeClose : function () {
if (closedFromIframe) {
// closed from iframe custom function
} else {
// close button -or- escape key
}
},
afterClose : function () {
closedFromIframe = false; // reset flag
}
});
Notice we are also resetting the closedFromIframe flag within the afterClose callback.
See a DEMO of this implementation.

This will be triggered only if someone clicks on "X" or Esc key
$(document).ready(function () {
$(".fancybox").fancybox({
closeClick: false, // prevents closing when clicking INSIDE fancybox
openEffect: 'none',
closeEffect: 'none',
enableEscapeButton: false,
helpers: {
overlay: {
closeClick: false // prevents closing when clicking OUTSIDE fancybox
}
},
beforeClose: function () {
return confirm('Are you sure?')
}
})
});

Jqgrid info dialog with submit button

I am using the below code to create a info dialog with submit button.This is working well. Now i want to do some action while i click the submit button. This is not working while i use the onSubmit : function(){}. I used onClose means its working. Please help me to do this. sorry for my english..
var totalSelect = "";
$.jgrid.info_dialog("Select Deny Function(s) to Map", selOptin + "</ul>", $.jgrid.edit.bSubmit, {
zIndex: 1500,
width: gwdth,
align: 'left',
height: 'auto',
onSubmit: function () {
alert('enter hgere');
$('input[name="FunctionCheckbox"]:checked').each(function () {
totalSelect = totalSelect + this.value + ",";
});
element.value = totalSelect.slice(0, -1);
return true;
}
});

i found following way to create buttons and properly deal with their click event
var dialog=$.jgrid.info_dialog("Caption","text","", {
zIndex: 1500,
buttons:[{
text:"Submit",
id:"but_submit", onClick:function(b) {
alert("submit button clicked");
}
}, {
text:"Cancel",
id:"but_cancel",
onClick:function(b) {
alert("cancel button clicked");
}
}]
});

Clicking on element from jQuery dialog generated by function

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!

jQuery ajax form submitting multiple times

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.