PDA

View Full Version : [CLOSED] MessageBox doesn't show



ingbabic
Oct 02, 2015, 11:12 AM
Please take a look at this.
View Index.cshtml:



@{
ViewBag.Title = "Index";
}

<h2>Index</h2>

@Html.X().ResourceManager()

@(
Html.X().Panel().Loader(Html.X().ComponentLoader() .Url(Url.Action("RenderDocument")).LoadMask(lm => lm.ShowMask = true)).Height(500)
.TopBar
(
Html.X().Toolbar()
.Items
(
Html.X().Button().Icon(Icon.CommentAdd).ToolTip("Add comment").OnClientClick("Ext.MessageBox.show({title: 'Comment', msg: 'Text:',width: 300,buttons: Ext.MessageBox.OKCANCEL,multiline: true});")
)
)
)


View ContentView.cshtml


@model string

<iframe src="@Model" width="100%" height="100%" />


Controler:


public ActionResult Index()
{
return View();
}

public ActionResult RenderDocument(string objectId)
{
return PartialView("ContentView", "/Test.pdf");
}

On button click MessageBox does not show in IE, but page gets grayed as if it is shown. If You put anything else except pdf, it works.
Remark:
For PDF viewer I am using Adobe Plugin. I saw some threads and tried some things, but I could not resolve this problem.

Daniil
Oct 02, 2015, 2:11 PM
Hi @ingbabic,

I am afraid there is no solution. At least, as far as I can know. IE puts a pdf (internally, it is an ActiveX object) on top of all and we cannot affect it. Seems there are some helpful tricks (StackOverflow thread (http://stackoverflow.com/questions/593176/div-layer-on-top-of-pdf)), but I am not aware of any solid solution.

ingbabic
Oct 02, 2015, 4:02 PM
I'm sorry to hear that. Anyway thanks.

ingbabic
Jan 14, 2016, 7:18 PM
Daniil
Combining samples that you proposed and some more I've come to this solution:
ContentView.cshtml


@model string

<head>
<title>Test Layout</title>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}

#content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0px;
}
#divElement{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 310px;
height: 190px;
background-color: transparent;
z-index:20;
}
</style>
</head>
<body>
<div id="divElement">
<iframe id="Iframe1" frameborder="0" height="100%" width="100%"></iframe>
</div>

<div style="position:absolute;z-index:10" id="content">
<iframe height="100%" width="100%" frameborder="0" src="@Model" />
</div>
</body>


Index.cshtml:


@{
var X = Html.X();
}

<script type="text/javascript">

function hideElement(hide) {

var elem = document.getElementById("Iframe1");

if (!hide){
elem.style.display="block"
}
else{
elem.style.display="none"
}
}

function addComment(btn, text) {
hideElement(true);
};
</script>

@(
X.Panel().Loader(X.ComponentLoader().Url(Url.Actio n("RenderDocument")).LoadMask(lm => lm.ShowMask = true))
.TopBar
(
X.Toolbar()
.Items
(
X.Button().Icon(Icon.CommentAdd).ToolTip("Add comment").OnClientClick("hideElement(false);var msg = Ext.MessageBox.show({title: 'Comment', msg: 'Text:',width: 300,buttons: Ext.MessageBox.OKCANCEL,multiline: true,fn: addComment}); msg.alignTo(Ext.get('Iframe1'), 'c-c');")
)
)
)


Two bad things about this. I don't know how to hide IFrame1 initially (I've tried many things)
Second, is it somehow possible to have IFrame1 "stretchable" that I can have about anything inside?

Daniil
Jan 15, 2016, 6:17 AM
I don't know how to hide IFrame1 initially (I've tried many things)

Please clarify doesn't that help?

<iframe id="Iframe1" ... style="display:none;"></iframe>


Second, is it somehow possible to have IFrame1 "stretchable" that I can have about anything inside?

I am not sure that I get how you use Iframe1 in the sample. Could you, please, clarify what is it for and what content it is going to hold?

Though, I don't really know there is anything else except height="100%" and width="100%" which, probably, don't produce a desired result for you.

Maybe, there is a possibility to determine the size on the iframe's content on the fly via JavaScript and then adjust the iframe's size also programmatically. But again, I am not sure about your scenario.

ingbabic
Jan 15, 2016, 6:54 AM
Please clarify doesn't that help?

<iframe id="Iframe1" ... style="display:none;"></iframe>


Ah silly me :) I was trying on many ways to call hideElement function, on the beginning but none of them was ok. I even have set div that contains frame invisible but that brought very strange result :) Any way this was the right way thanks.


I am not sure that I get how you use Iframe1 in the sample. Could you, please, clarify what is it for and what content it is going to hold?


Well this thread is about how to bring something over PDF viewer in Internet explorer. With this trick it is possible. The only purpose of this IFrame is to float over PDF. And it's doing its job quite well. In this sample it is holding Ext.MessageBox. Only I don't know how to dynamically change size of this frame because for example instead of message box I would open Window. If I stretch size of a div 100% then I wouldn't see my pdf at all. Even in this sample frame is not 100% the same size as message box (I know that with try'n'error approach I could make it but then again it is only for this sample). Please try this sample, you'll see (you just need one sample pdf in your project dir). The right code for ContentView.cshtml is


@model string

<head>
<title>Test Layout</title>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}

#content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0px;
}
#divElement{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 310px;
height: 190px;
background-color: transparent;
z-index:20;
}
</style>
</head>
<body>
<div id="divElement">
<iframe id="Iframe1" frameborder="0" height="100%" width="100%"style="display:none;"></iframe>
</div>

<div style="position:absolute;z-index:10" id="content">
<iframe height="100%" width="100%" frameborder="0" src="@Model" />
</div>
</body>

Daniil
Jan 15, 2016, 10:24 AM
Only I don't know how to dynamically change size of this frame

This should be working:

Ext.get("Iframe1").setSize(400 /* width */, 400 /* height */);

ingbabic
Jan 15, 2016, 7:17 PM
This works. For the sake of completeness I'll post how it is working for any window I want to put over pdf:


function prepareForm(window) {
if (Ext.isIE) {
hideElement(false);
Ext.get('Iframe1').setSize(window.getSize().width, window.getSize().height);
Ext.get('Iframe1').setLocation(window.getPosition( )[0], window.getPosition[1]);
window.alignTo(Ext.get('Iframe1'), 'c-c');
}
}

This method must be called in AfterLayout listener with some delay. On closing of window one must call


hideElement(true);

to hide frame floating over PDF.
There are more to this, for example how to make this frame draggable, together with the window it holds, but for now I am satisfied.
Thanks. Please take a look at http://forums.ext.net/showthread.php?60523-Session-variables&p=276822#post276822

fabricio.murta
Jan 15, 2016, 8:59 PM
This post (http://forums.ext.net/showthread.php?53451-CLOSED-IFrame-s-Loader-quot-Load-quot-listener-is-not-fired-when-non-html-content-is-loaded&p=251801&viewfull=1#post251801) may be the solution to have PDF support cross-browser, cross-os, not dependent on plugins and able to be nicely fit in a panel/window/container.

In other words, rendering the PDF with a JavaScript library.

I hope this helps!