Bind a click event to a dynamically created Dialog in jQuery - javascript

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 !

Related

jqueryui slider not working inside bootstrap popover

i have number of bootstrap popover and some of them have jqueryui slider as content of the bootstrap popover and that slider is not working
Fiddle
https://jsfiddle.net/yasirhaleem/43qfkjtb/
$( document ).ready(function() {
$('.triggerOverlay').popover({
html : true,
content: function() {
var $this = $(this);
var cont = $this.data('toggle');
return $('#'+cont).html();
},
trigger: 'manual'
}).click(function() {
$('.slider').slider();
});
$(document).on('click', function (e) {
// always hide them all.
var popov = $(".popover");
if (!popov.is(e.target) && popov.has(e.target).length==0 ){
$('.triggerOverlay').popover('hide');
} // if e.target has a popover toggle it.
if ($(e.target).hasClass('triggerOverlay')) {
$(e.target).popover('toggle');
}
});
$( "#slider" ).slider();
});
found the solution to my question posting reply to my own question hope it will be helpful for others.
if someone has better solution please post or suggest in comments.
here is the fiddle https://jsfiddle.net/yasirhaleem/s1ytug1c/
this fiddle http://jsfiddle.net/mmfansler/5kuB8/9/ was not helpful for me i had different schenario, my html was already generated i was using different solution for popover and than we decided to use bootstrap popover and we run into this problem.
All i needed was a callback function below code extend the popover and adds callback function
Extending popover
var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function() {
tmp.call(this); if (this.options.callback) {
this.options.callback();
}
}
Popover Call
$('.triggerOverlay').popover({
html : true,
callback: function () {
$('.slider').slider();
},
content: function() {
var $this = $(this);
var cont = $this.data('toggle');
return $('#'+cont).html();
},
trigger: 'manual'
});
HTML
button<br><br><br><br><br>
<div id="user-profile-overlay" class="customoverlay">content goes here<div class="slider"></div>
</div>

Can't load AJAX content in jQuery dialog

I got this dynamically created JQueryUI dialog from this thread that loads content via Ajax from <a href='2.html'>. But I found there is an issue with the following code. Even though AJAX request is successfully made as shown in Console, the content isn't able to append to the dialog container. Can anyone find out what's problem with the load function at this line:
dialog.load($(this).attr('href') + ' #content').dialog
I have tried
dialog.append($(this).data('source') + ' #content').dialog
dialog.text($(this).data('source') + ' #content').dialog
and they work.
Code:
var loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');
$(document).ready(function () {
$(document).ready(function () {
$('button').click(function () {
$(this).next('.area').append('<a id="open_dia_'+Date.now().toString()+'" class="open_dia" title="this title" href="2.html">Click</a>');
});
$(document).on('click', '.open_dia', function (evt) {
var dialogid = 'dialog_'+$(this).attr('id');
var dialog = null;
if ($('#'+dialogid.toString()).length == 0)
{
dialog = $('<div id="'+dialogid+'"></div>').append(loading.clone());
dialog.load($(this).attr('href') + ' #content').dialog({
title: $(this).attr('title'),
width: 500,
height: 300
});
}
else
{
dialog = $('#'+dialogid.toString());
}
dialog.dialog('open');
return false;
});
});
You can do it in this way:
Create a div, and a div inside that you'll use it to append the content.
<div id="dialogDiv" title="this title" style="display:none;">
<div id='dialogDivDynamic'></div>
</div>
convert your first div in the dialog:
$("#selectionResult").dialog({
modal: true,
width: '900px',
buttons: [{ text: "Close", click: functionToCloseDialog() }]
});
append the content to your second div:
$('#dialogDivDynamic').append("This is my new content");
function functionToCloseDialog() {
$('#dialogDiv').dialog('close');
}
It seems that there is an space before your hash... Try this way:
dialog.load($(this).attr('href') + '#content').dialog({
title: $(this).attr('title'),
width: 500,
height: 300
});

prependTo not working

I am getting data in cometD but when i use prependTo it doesn't show any thing. when i use prepend then it shows. but i want to use prependTo. and for some reason it is not working. below is my code.
function message() {
this.messageDialog = $('<div id="messageDialog"></div>');
this.messageDiv = $('<div id="messageDiv"></div>');
this.show = function() {
this.messageDialog.dialog({
title : 'Message Board',
width : 800,
minHeight : 150,
position: 'bottom',
close : function(ev, ui) {
$(this).remove();
return false;
}
});
this.messageDiv.appendTo(this.messageDialog);
}
}
dojox.cometd.subscribe('/service/order', function(message) {
var getString = message.data.test;
//$(getString+"<br/>").prependTo("#messageDiv");
$(message.data.test+"<br/>").prependTo("#messageDiv");
});
jQuery is looking for a selector that doesn't exists. Try the below code:
$("#messageDiv").html(message.data.test+"<br/>");
Or try wrapping your string in another tag like below:
$('<p>'+message.data.test+'<br/></p>').prependTo("#messageDiv");

Launch JQuery Dialog with Ajax generated link

I have a div which has no content. the content is dynamically loaded into the div, through jquery load(). This content contains links. I'm using the jquery load all links into functions to launch a dialog, but its not working because the links don't show in the source. Any workaround to this?
<pre>
<script type="text/javascript">
$(document).ready(function() {
var $loading = $('<img src="loading.gif" alt="loading" class="loading">');
$('#maindiv a').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;
});
});
});
</script>
</pre>
You need to use the .live keyword so that you can attach events to generated html.
in jquery 1.7 (i think) .live is now .on so watch out for that one.
$(".Link").live("click", function(){
//code here
});
or
$("a").live("click", function(){
//code here
});
You might also want to remove the default behavior of the link when you click on it.
http://api.jquery.com/event.preventDefault/

How to open jQuery modal dialog using <input type="button"> instead of anchor tag?

We previously have:
<input type='button' value='Some Button' onClick="window.open('somefile.php')">
Now we want to activate jQuery UI modal dialog instead of having a pop-up. We can trigger the modal dialog if we use an anchor tag like so: Open Dialog.
But what if it's an input button?
I am using this script to call the dialog (and so that it can open a file into the dialog box):
$(document).ready(function() {
$('.classfordialog').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href') + ' #content')
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
Src: http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
You can use anything to activate the opening of the jQuery Dialog.
For example.
$(function(){
$('.classfordialog').click(function(e){ e.preventDefault(); $('#dialog').dialog(); });
});
You can add the class to either a button, input, anchor, image, etc...
Well you obviously cant get the link and title from the "Link/A" if it isnt there?
$(document).ready(function() {
$('.classfordialog').each(function() {
var $dialog = $('<div></div>')
.load('somefile.php #content')
.dialog({
autoOpen: false,
title: 'Some title',
width: 500,
height: 300
});
$('.inputdialog').click(function(e){
e.preventDefault();
$dialog.dialog('open');
});
});
});

Categories

Resources