JQuery ModalDialog only shows data once and not on repeat attempts - javascript

We have a image that calls a script function that should show a jquery modal dialog popup. The dialog loads once with the data and then when we close it and try to click on the img again it does not load the data, sometimes the dialog will appear but be blank. If we take the link from the img tag and put it in a new browser it pulls the data fine so the link should be ok.
Below is the script in the head section of the page:
function ShowReportDialog(reporturl){
jQuery("#reportdialog").dialog({
title: 'Hello World',
modal: true,
width: 915,
height: 670}).show();
jQuery("#reportdialog").load(reporturl);
}
Image Tag that calls the script:
<img style="border:0;" onclick="ShowReportDialog('Service/REPORT?ARCHIVE=102127');" src="/Images/rerun.png"
Anyone see anything I missed or a better way?
Thanks

jQuery is probably caching your AJAX request. Check out this other thread for ways to prevent this from happening.
Edit: I'm by no means a jQuery expert, but I believe you should only show your dialog after the AJAX request has been responded. So I'm guessing something like this:
function ShowReportDialog(reporturl){
jQuery("#reportdialog").load(reporturl, function(){
jQuery("#reportdialog").dialog({
title: 'Hello World',
modal: true,
width: 915,
height: 670
}).show();
});
}

Related

jQuery EasyUI put scrollbar in $.messager.show

I am using jQuery EasyUI in my web app. After some AJAX call, I will call $.messager.show method to display information if there is any error messages. The error messages sometimes is less and sometimes is in multiple lines. So when it comes to more than 3 lines, some of the message cannot be seen. I plan to put a scroll bar because I don't want to set it too big. Here is what I have and it is not working.
$.messager.show({ // show error message
title: 'Error',
msg: result.msg,
style:{
overflow:'scroll'
}
});
Please help if somebody has any way to do this or trick of doing this. Thank you.
You could try Dialog intead of Messager. I believe the following code produces the result you want:
var div = document.createElement('div');
div.innerHTML = result.msg;
$(div).dialog({
title: 'Error',
width: 300,
height: 'auto',
modal: true,
resizable: true
});

jQuery dialog with <object>, cannot call dialog('close') from within object document

I have the following situation on a web application.
A dialog is built and opened on the fly when clicking on a link:
var dialogInitiator = $("<div id='dialog-initiator' style='background-color: "+bgcolor+";'>Loading...</div>");
dialogInitiator.appendTo(parentFrame);
dialogInitiator.dialog({
modal:true,
autoOpen: false
}).on('keydown', function(evt) {
if (evt.keyCode === $.ui.keyCode.ESCAPE) {
dialogInitiator.dialog('close');
}
evt.stopPropagation();
});
dialogInitiator.dialog('open');
Right after that, I load a new html page into the dialog, with an < object >, like this:
var objectFrame = $('<object style="border: 0;width:'+(dlwidth-30)+'px;min-height:'+(dlheight-46)+'px;" type="text/html" style="overflow:auto;" data="'+url+'"></object>');
dialogInitiator.html(objectFrame);
Now, the "url" variable contains a link to this new html document. When that page is ready, it will focus on an input field. This prevents the ESCAPE key from closing the dialog. So, I am trying to manually trigger the .dialog('close') event on escape keypress.
I do the following, from within the loaded document:
$('#dialog-initiator', window.parent.document).dialog('close');
It get the following error:
"Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'"
Strange thing is, when i call:
console.log( $('#dialog-initiator', window.parent.document).html() );
it shows me the html from the dialog. So it actually IS initiated.
Well, I have tried to fix this error with the help of Google, but without success. I guess my situation is quite specific.
Note: we are forced to use the technique with loading this whole webpage into the dialog due to older functionality we used in modalDialogs. Since they are depricated in the latest Google Chrome, we've built a temporary solution with jQuery dialog.
I hope someone can help me out. I appreciate it!
You can try a global method created after the modal is created
dialogInitiator.dialog({
modal: true,
autoOpen: false,
create: funtion(e,ui) {
window.closeMyDialog = function() {
$('#dialog-initiator').dialog('close');
};
}
})...
Then call it by doing window.parent.closeMyDialog();.
Why not use JQuery UI? It's easier than making your own.
http://jqueryui.com/dialog/#default

Ajax/Magnific-PopUp switching content within a popup

I'm having difficulty with Magnific-popup and its AJAX. I want to simply switch the content of a popup if the link is also a popup. This should work by default, but somehow it doesn't.
JavaScript:
$('.magnific').magnificPopup({
type: 'ajax',
ajax: {
settings: null,
cursor: 'mfp-ajax-cur',
tError: 'The content could not be loaded.'
},
closeOnContentClick: false,
closeOnBgClick: true,
showCloseBtn: false,
mainClass: 'mfp-fade',
callbacks: {
parseAjax: function(mfpResponse) {
mfpResponse.data = $(mfpResponse.data).find('.overlay');
console.log('Ajax content loaded:', mfpResponse);
},
ajaxContentAdded: function() {
console.log(this.content);
}
}
});
This works with a link on the standard site. But if there is a link within the popup, it just executes that link, ignoring the Magnific Popup.
My best guess is, that it cant initiate itself because it cant find the selector (like if you use .click instead of .on('click'...)), but I don't seem to figure it out on my own.
Any help would be VERY! apprechiated!
EDIT: Ok I have identified the problem. It seems that the code in functions.js is not available at all within the limits of a popup. Is there a way to make the .js file available in the popup? The only way I made it work is by including the .js file in every file that has a magnific link... but that seems really dirty. Should I load it with the ajax callback or is there another way?
Best regards,
G

A dialog inside a dialog gets rendered N times over itself

Using ASP.NET MVC 4, jQuery 1.6.2, jQuery UI 1.8.11. Currently debugging in Firefox 16.0.2.
I am trying to make this thing work so I have a reusable jQuery UI modal dialog with autoOpen: false which gets opened from the main page. So far so good. That reusable jQuery UI dialog will open a new modal dialog which is later destroyed and created again whenever needed (I tried to make the other one reusable too but I failed, it kept appearing as a div on the first dialog, not as a new separate dialog as it should so eventually I decided to create it every time I need it).
When I first open the first dialog, I can open and close the second dialog without problems. However the problem occurs when I close the first dialog and open it again. It behaves as it has as many dialog placeholder divs as the number of times I have opened the first dialog. Although I am pretty sure I destroy the second dialog AND remove the placeholder div every time I close it.
I have put the dialog code into the /Views/Shared/_Layout.cshtml file and that layout file is referenced by the main page. For those who are not familiar with ASP.NET MVC, the layout file is a shared file which contains header, footer and other html elements which define the layout of the web page, so that you can reference it from any View in your web site. So the layout is infact rendered along with any View which references that layout.
Here is the (pseudo) code in my layout file:
<html>
<head>
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$("#veliki").dialog({
close: function () {
$("#veliki").html("");
$("#maleni").dialog("destroy");
$("body").find("#maleni").remove(); /* a desperate attempt to remove ALL divs which hold the 2nd dialog, was just: $("#maleni").remove(); */
},
modal: true,
height: 600,
width: 800,
left: 0,
autoOpen: false
});
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("#veliki").load($(this).attr('data-url'));
$("#veliki").dialog("open");
});
});
</script>
</head>
<body>
<div id="veliki"></div>
#RenderBody(); <!-- The ASP.NET MVC view gets rendered here -->
</body>
</html>
The code related to the second dialog is placed in one of the views which reference another layout (the layout which does not contain any jQuery code). The code in that View looks like this:
<script type="text/javascript">
$(document).ready(function () {
$(".openSubDialog").live("click", function (e) {
e.preventDefault();
$('<div id="maleni"></div>')
.appendTo("body")
.dialog({
close: function () {
$("#maleni").dialog("destroy");
$("#maleni").remove();
$("body").find("#maleni").remove(); /* delete them all. but where did "they" appear from?! */
},
modal: true,
height: 450,
width: 600,
left: 0
})
.load($(this).attr('data-url'));
});
});
</script>
To sum it up:
I open the #veliki dialog by clicking a link in the main page.
I create and open the #maleni dialog by clicking a link in the first dialog.
I close the #maleni dialog, destroying it and removing the #maleni div.
I close the #veliki dialog.
I open #veliki dialog by clicking another link in the main page.
I create and open the #maleni dialog which magically appears two times now (as seen in FireBug).
I slam the wall with my head which doesn't solve anything.
Anyone with an idea?
Why don't you use already existing window but with varying content? I have created a fiddle with this functionality : http://jsfiddle.net/scaillerie/wEX42/ .
The main point is that you don't have to handle the close event of your #maleni window : you only close it with $("#maleni").dialog("close"); and when you again need it, you re-open it : $("#maleni").dialog("open");.
An example of implementation in your case can be the following :
Layout page :
<html>
<head>
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$("#veliki").dialog({
close: function () {
$("#maleni").dialog("close");
},
modal: true,
height: 600,
width: 800,
left: 0,
autoOpen: false
});
$("body").delegate(".openDialog", "click", function (e) {
$("#veliki").dialog("open").load($(this).attr('data-url'));
});
$("#veliki").delegate(".openSubDialog", "click", function (e) {
$("#maleni").dialog("open").load($(this).attr('data-url'));
});
});
</script>
</head>
<body>
<div id="veliki"></div>
#RenderBody(); <!-- The ASP.NET MVC view gets rendered here -->
</body>
</html>
Sub-page :
<div id="maleni"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#maleni").dialog({
modal: true,
height: 450,
width: 600,
left: 0,
autoOpen: false
})
.load($(this).attr('data-url'));
});
});
</script>

jQuery UI Dialog To Load HTML Title

I'm using jQuery UI Dialog for pop-ups that read from external pages. How do I get it to load the title from the external HTML instead of having the change it in the code every time? Because I want different titles as well.
Any suggestions please?
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: true,
closeOnEscape: true,
width: '900',
height: '900',
modal: true,
title: 'Bonus Features',
beforeClose: function(){ $(this).remove(); }
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] );
});
adjustJQueryDialogOverlay();
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
What you seem to have are two questions. First, the simple one. How do you change the title?
The jQuery Dialog title comes from the title parameter. In your code, you have:
title: 'Bonus Features'
But if you were to change your function signature to accept a title parameter, you could pass the title along to the function and not have to worry about changing your code all the time.
function openDialog(url, title) {
$("<div class='popupDialog'>Loading...</div>").dialog({
...
title: title,
...
);
}
Now for the complex one: How do you get the title from your target page. I'm not sure there's an easy way for you to pull this off short of requesting the page through AJAX and parsing the result as XML/Text. Here's a link to do that if you're really interested.
http://forum.jquery.com/topic/getting-title-tag-from-html-page-using-ajax
But I really don't want to encourage that. I mean, it seems a little overboard to ask the client script to do all that. And you're not guaranteed that it may work from browser to browser. Rather it would be much easier just to associate whatever you're using to launch your dialogs with the page titles by hard-coding the titles.
Put this in 'open' event:
$(this).parent().find('.ui-dialog-title').html('Printed Card Designer');

Categories

Resources