I add content to my page dynamically (adding rows to a table).
I want that a modal dialog with content from a foreign URL will be opened by clicking on the table row.
That is what I have. The dialog will open, but without content...
newRow.onclick = function() {
$(".detail_popup").dialog({
modal: true,
open: function (event, ui)
{
$(this).load("http://www.google.com");
},
//autoOpen: true,
width: 500,
height: 600,
title: "Detailed Info",
resizable: false,
});
};
If I understand your question correctly, your problem is not that your click event is failing (as the answers above have addressed) but simply the fact that nothing loads into the dialog that is displayed?
I just tried your code example and I think it's a security issue with jQuery not wanting to load the www.google.com, since it's from a different domain. It works fine when I use a url that points to some content from the same domain. Did you try that yet?
If the element that's triggering the action has been dynamically added to the DOM, you'll need to use the "live" event of jQuery: http://api.jquery.com/live/
For instance:
$("newRowSelector").live("click", function(){
$(".detail_popup").dialog({
modal: true,
open: function (event, ui)
{
$(this).load("http://www.google.com");
},
//autoOpen: true,
width: 500,
height: 600,
title: "Detailed Info",
resizable: false,
});
});
If it is a newly added element then you need to delegate the event to the parent element so that the click event shall be attached to the newly added row,,
$('table').on('tr' , 'click', function() {
$(".detail_popup").dialog({
modal: true,
open: function (event, ui)
{
$(this).load("http://www.google.com");
},
//autoOpen: true,
width: 500,
height: 600,
title: "Detailed Info",
resizable: false,
});
});
HTML:
<input type="button" id="add-row" value="Add row" /><br />
<table id="my-table">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
</table>
<div id="detail-popup">
<iframe>temp</iframe>
</div>
jQuery:
$('#detail-popup').dialog({
modal: true,
open: function (event, ui)
{
$(this).find('iframe').attr('src', 'http://www.microsoft.com');
},
autoOpen: false,
width: 500,
height: 600,
title: "Detailed Info",
resizable: false
});
$('#add-row').click(function() {
$('#my-table').append('<tr><td>New Row</td></tr>');
});
$('#my-table').on('click', 'tr', function() {
$('#detail-popup').dialog('open');
});
Few notes:
You'll want to use .on as .live is deprecated as of jQuery 1.7.
You'll need to load an external site into an iframe, or load it server side, then into your modal dialog div.
The Google homepage has some scripts to not allow you to load www.google.com into an iframe. I know people talk about it on SO a lot, but I'm not sure if there is a workaround. As a result, I'm loading www.microsoft.com in my example.
I added an id to the table, just to make things more explicit when using the .on function.
Fiddle: http://jsfiddle.net/gromer/YEs9R/1/
Related
My page has two jquery dialogs. There is no issue if both open in different time. The issue only comes when two dialog opens together. In my case first dialog opens by user action and second dialog open by system(this dialog will trigger when session timeout happened). Now first open by user and immediately second dialog opened now I need restrict user to click anything on dialog 1. Basically we should restrict user to do any action dialog one.
I tried with resizable: false, draggable: false But these not helped. Is there any way to fix this issue.
Dialog 1
$('.status-dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
closeOnEscape: false,
buttons: [{
text: yes,
click: fun1
},
{
text: no,
click: fun2
}]
});
Dialog 2
$('body').append('<div title="Timeout" id="timeout-dialog">' expired </div>');
$('#sessionTimeout-dialog').dialog({
autoOpen: false,
resizable: false,
draggable: false,
width: 400,
modal: true,
closeOnEscape: false,
open: function () { $(".ui-dialog").hide(); },
buttons: {
"Continue": function () {
$(this).dialog('close');
}
}
});
Maybe have your code to close all other dialogs right before the system triggers one for itself? You can certainly add this condition somewhere between your codes where the dialog will be triggered system-wise.
i am displaying html form inside jqueryui dialog and i am using jquery validation plugin to validate it.
Problem - when i submit form by changing content to original, default form action is running.
It is only happening if i change html content to original content before form closing.
Here is my code:
$(document).ready(function() {
var getOldForm = $("#send-pm-win").html();
$("#pmLink").click(function() {
$("#send-pm-win").dialog({
modal: true,
draggable: false,
resizable: false,
autoOpen: true,
buttons: [{
text: "Cancel",
click: function() {
$(this).dialog("close");
},
style: "outline: none;"
}],
close: function(event, ui) {
$("#send-pm-win").html(getOldForm);
$(this).dialog("destroy");
}
});
});
});
I am trying the tagsinput plugin to work in a textarea which is inside a div that is loaded by the jquery dialog plugin call.
Plugin used is the /xoxco/jQuery-Tags-Input.
I did an initial check if the textarea element is ready. It is while before being called.
The textarea doesn't get displayed as tags by the tagsinput plugin. However when I try the same from firebug in the browser:
$('#textarea').importTags('guava','cherry'); // this works
Code below:
jsp file:
<div id="mydialog">
<textarea name="tags" id="textareaId">
</div>
javascript file:
$(document).ready(function(){
$("#mydialog").dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"YES": function() {
$(this).dialog("close");
}
}
});
$('#textarea').tagsInput({
'autocomplete_url': '',
'autocomplete': {
source: ['apple','banana'],
autofill:true
},
'height':'100px',
'width':'300px',
'interactive':true,
'defaultText':'add a tag',
});
$('#textarea').importTags('guava','cherry');
});
Any help why?
$('#textarea') was not yet ready in the document before the tagsinput was called. I delayed my invocation for tagsinput and it worked Ok.
I want to disable some buttons (with some additional conditions) on jquery dialog show and I am unable to do this. I tried many different ways and none of them worked. I am out of ideas.
Example code attached (in coffeescript):
$('#messages').dialog({
height: 500,
width: 800,
resizable: false,
modal: true,
show: 'fade',
hide: 'clip',
buttons: [
{
id: "msg-close",
text: "Close",
click: ->
$('#msg-close').prop('disabled', true) //this one works
}
],
open: ->
$('#msg-close').prop('disabled', true) //this one doesnt work
});
$('#msg-close').prop('disabled', true) //this one doesnt work
open expects a function like this
open: function () {
$('#msg-close').prop('disabled', true);
}
I am trying to get a button inside a jQuery UI modal dialog to close itself and open another modal dialog.
The problem is that the second dialog when opened will always open without the screen overlay you expect from a modal dialog, as a result you can still click on the screen behind the modal.
The jQuery is as follows
$(function () {
$("#DialogSelectEventType").dialog({
modal: true,
autoOpen: true,
width: 400
});
$("#DialogCreateToDo").dialog({
model: true,
autoOpen: false,
width: 450
});
$("#btnCreateToDo").click(function (e) {
$("#DialogSelectEventType").dialog({ close: function (e, ui) {
$("#DialogCreateToDo").dialog("open");
}}).dialog("close");
});
});
I have also tried changing the handler to
$("#btnCreateToDo").click(function (e) {
$("#DialogSelectEventType").dialog("close");
$("#DialogCreateToDo").dialog("open");
});
Which didn't help
Here is the jsFiddle
Could someone please help me understand why this might be happening? Is this a bug or have I done something wrong?
There is a typo in your code, in the second dialog definition you have "model : true", when it is supposed to be "modal : true"
$(function () {
$("#DialogSelectEventType").dialog({
modal: true,
autoOpen: true,
width: 400
});
$("#DialogCreateToDo").dialog({
modal: true,
autoOpen: false,
width: 450
});
$("#btnCreateToDo").click(function (e) {
$("#DialogSelectEventType").dialog({ close: function (e, ui) {
$("#DialogCreateToDo").dialog("open");
}}).dialog("close");
});
});
Try this: http://jsfiddle.net/tzKf7/3/
Hope it helps.
Moving the .dialog definition into the click handler will do the trick.
$("#btnCreateToDo").click(function (e) {
$("#DialogCreateToDo").dialog({
model: true,
autoOpen: true,
width: 450
});
});