Develop Reference

Bind a click event to a dynamically created Dialog in jQuery

Original fiddle example
Failed example for dynamically created dialog
I got this script to load AJAX content into a jQuery UI dialog whose class is named .open_dia in the fiddle examples. The problem is that I have the .open_dia dynamically loaded into the page in a (window).bind(“load”, function(){} event , so I want to know how to change this line from
var $link = $(this).one('click', function(){....
to something to the effect of
var $link = $('.area').one('click','.open_dia', function() {
so that I can bind the event to the dynamically created element .open_dia to open the dialog. Any help would be appreciated.
Here's the original code:
$(document).ready(function() {
var $loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');
$('.open_dia').each(function() {
var $dialog = $('<div></div>')
.append($loading.clone());
var $link = $(this).one('click', function() {
$dialog
.load($link.attr('href') + ' #content')
.dialog({
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
return false;
});
});
});
Failed Code:
$(document).ready(function(){
$('button').one('click',function(){
$(this).next('.area').append('<a class="open_dia" title="this title" href="http://jsfiddle.net/">Click</a>');
});
var $loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');
$('.open_dia').each(function() {
var $dialog = $('<div></div>')
.append($loading.clone());
var $link = $('.area').one('click','.open_dia', function() {
$dialog
.load($link.attr('href') + ' #content')
.dialog({
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
return false;
});
});
});
Example HTML:
<button>Append open_dia</button>
<div class='area'></div>

Hi I have forked your solution and made modification to your javasript as follows:
var loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');
$(document).ready(function () {
$('button').click(function () {
$(this).next('.area').append('<a class="open_dia" title="this title" href="#">Click</a>');
});
$(document).on('click', '.open_dia', function (evt) {
var dialog = $('<div></div>').append(loading.clone());
dialog.load($(this).attr('href') + ' #content').dialog({
title : $(this).attr('title'),
width : 500,
height : 300
});
dialog.dialog('open');
return false;
});
});
My modified JS fiddle is here: http://jsfiddle.net/91nc1k1t/2/
If you want to load each dialog's content only once, see this update of the forked fiddle: http://jsfiddle.net/91nc1k1t/5/

You can use this:
<button>Append open_dia</button>
<div class='area'><a style="display: none;" class="open_dia"></a></div>

There is no problem if the target DOM element is dynamically generated. For it to work, please ensure that the event handler is registered on container element (parent of the dynamically created element)'s click event. This will fix the issue !

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 Colorbox issue with firefox

I am populating anchor links in repeater through javascript, I am poping up the those links with colorbox iframe.
Its working fine in IE7,Safari, Chrome, but not in Forefox(14.1).
In firefox its opening in a new window, instead of opening in colorbox iframe.
function BidCountFormatter(BidCount, AuctionID) {
if (parseInt(BidCount) > 0)
return "<b><a class=auctionhistorybox href=popupauctionhistory.aspx?auctionid=" + AuctionID + ">" + BidCount + "</a></b>";
else
return "--";
}
$(document).ready(function () {
$(".auctionhistorybox").colorbox({ iframe: true, width: "35%", height: "60%" });
});

As the anchor links were dynamically generated at run time, so I had to rebind ColorBox events after that:
instead of doing " $(document).ready"
$(document).ready(function () {
$(".auctionhistorybox").colorbox({ iframe: true, width: "35%", height: "60%" });
});
I called below function after generating the "auctionhistorybox" links in repeater
function bindColorBoxEvents() {
$('.auctionhistorybox').each(function (i) {
$(this).unbind('click');
$(".auctionhistorybox").colorbox({ iframe: true, width: "50%", height: "95%" });
});
}
appreciate your help #Vector.

ASP.NET MVC 4 JQuery Dialogs

I want to modify the javascript from an ASP.NET MVC 4 template website so that the dialogs that comes with the template to login/register actions could be used in any link that had an ".ajax-link" class in my code. So I did some changes in AjaxLogin.js that now looks like this:
//...
$('.ajax-link').each(function () {
$(this).click(function (e) {
var link = $(this),
url = link.attr('href');
var separator = url.indexOf('?') >= 0 ? '&' : '?';
$.get(url + separator + 'content=1')
.done(function (content) {
var dialog = $('<div class="modal-popup"">' + content + '</div>')
.hide() // Hide the dialog for now so we prevent flicker
.appendTo(document.body)
.filter('div') // Filter for the div tag only, script tags could surface
.dialog({ // Create the jQuery UI dialog
dialogClass: 'fi-dialog',
title: link.data('dialog-title'),
modal: true,
resizable: false,
draggable: true,
width: link.data('dialog-width') || 600,
beforeClose: function () { resetForm($(this).find('form')); }
})
.find('form') // Attach logic on forms
.submit(formSubmitHandler)
.end();
dialog.dialog('open');
});
// Prevent the normal behavior since we use a dialog
e.preventDefault();
});
});
//...
And then I add the attribute class="ajax-link" in all the links I want to be shown in an jQuery dialog.
But it's not working. Actually the dialog opens only to the FIRST link I click inside the page, and after I close the dialog I can click in any other link that it won't appear. What I'm doing wrong here?

Actually you only need 2 very slight modifications to the AjaxLogin.js script to make this work.
The first modification is towards the end of the file where you have an array of selectors. All you have to do is add your .ajax-link selector:
// List of link ids to have an ajax dialog
var links = ['#loginLink', '#registerLink', '.ajax-link'];
and the second modification is inside the resetForm function in order to add a check if there's a form before attempting to reset it. Because if there isn't a form inside the partial you are rendering you will get an error when you attempt to close the dialog:
var resetForm = function ($form) {
// make sure that there's a form before attempting to reset its elements
if ($form.length < 1) {
// No form inside the partial => we have nothing more to do here
return;
}
// We reset the form so we make sure unobtrusive errors get cleared out.
$form[0].reset();
getValidationSummaryErrors($form)
.removeClass('validation-summary-errors')
.addClass('validation-summary-valid')
};
Now you can have:
#Html.ActionLink(
"Foo",
"foo",
null,
new { #class = "ajax-link", data_dialog_title = "hello" }
)
with a corresponding action:
public ActionResult Foo()
{
// return a PartialView or whatever you want to popup in the dialog
return Content("hello world from a jQuery Dialog");
}
and it will show the result of the Foo action inside a dialog, exactly the same way it does for the LogOn and Register actions.

$('.ajax-link').each(function () {
$(this).click(function (e) {
var link = $(this),
url = link.attr('href');
var separator = url.indexOf('?') >= 0 ? '&' : '?';
//clear all cashed dialog form
$("div.modal-popup").remove();
.
.
.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Scripts/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet"
type="text/css" />
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var UIDialogId = 0;
$('.UIDialogOpen').live('click', function (e) {
e.preventDefault();
UIDialogId++;
$('<div/>', {
'id': $(this).attr('data-dialog-id') !== undefined ? $(this).attr('data-dialog-id') : 'UIDialog' + UIDialogId,
'class': 'UIDialog'
}).appendTo('body').dialog({
title: $(this).attr('data-dialog-title') !== undefined ? $(this).attr('data-dialog-title') : 'Message',
position: ['center', 'center'],
modal: true, resizable: false, zIndex: 10000, autoOpen: true,
minWidth: $(this).attr('data-dialog-minwidth') !== undefined ? $(this).attr('data-dialog-minwidth') : '300px',
minHeight: $(this).attr('data-dialog-minheight') !== undefined ? $(this).attr('data-dialog-minheight') : '300px',
maxWidth: $(this).attr('data-dialog-maxwidth') !== undefined ? $(this).attr('data-dialog-maxwidth') : '300px',
maxHeight: $(this).attr('data-dialog-maxheight') !== undefined ? $(this).attr('data-dialog-maxheight') : '300px',
close: function (event, ui) {
$(this).remove();
}
})
//.load(this.href);
//Or //Use .load(this.href); and comment or delete below append line.
.append('<h1>Hi.. This is Testing </h1> <input type="button" class="UIDialogCancel" value="Cancel" /> <input type="button" class="UIDialogClose" value="Close" />');
$('.UIDialogClose, .UIDialogCancel').live('click', function (e) {
var obj = $(this)
e.preventDefault();
obj.parents('.UIDialog').dialog('close');
});
});
});
</script>
</head>
<body>
<a href="http://3.bp.blogspot.com/-atcX8smV6wA/T5ULj6LU4fI/AAAAAAAAAFg/oK08hPLOmWI/s1600/between.png"
class="UIDialogOpen" data-id="bloger">Bloger</a>
<br />
<div>
#Html.ActionLink("ActionLinkName", "MethodeName", "ControllerName", new { Id =2
}, new { #class = "UIDialogOpen", data_dialog_title = "UI Dialog Message" })
</div>
<div>
#Html.ActionLink("ActionLinkName", "MethodeName", "ControllerName", null, new {
#class = "UIDialogOpen", data_dialog_title = "UI Dialog MEssage" })
</div>
</body>
</html>

jquery dialog popup window problem

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")