Struts2 display stream pdf - struts2

I want to display pdf stream in the new popup windows, but when the stream is empty, I want to write a error message in the current page (Edition.jsp)
In the Edition.jsp page :
<s:form id="pdf" action="ExportPdf" theme="simple" target="pageEdition" >
...
<sj:menu name="typeEdition" cssClass="edition" list="listeEditions" />
</s:form>
In struts.xml :
<action name="ExportPdf" class="ExportPdfAction">
<result name="success" type="stream">
<param name="inputName">inputStreamPdf</param>
<param name="contentType">application/pdf</param>
<param name="contentDisposition">filename="myFile.pdf"</param>
<param name="bufferSize">2048</param>
</result>
<result name="error">/WEB-INF/web/Edition.jsp</result>
</action>
javascript, when I click on the menu item edition
$('.edition').bind('click', function(even, data) {
window.open('', 'pageEdition', 'location=no, menubar=no, height=600, width=900' );
$('#pdf').submit();
});
When I return error, I don't want to go in the target page.
Yes, I try it via Ajax JQuery, but now, the problem is for display pdf !
// click on the menu item edition
$('.edition').bind('click', function(event, data) {
$('#pdf').submit();
});
$('#pdf').submit(function(event) {
// stop form from submitting normally
event.preventDefault();
// post with parameters
var posting = $.post( $( this ).attr( 'action' ), $('#pdf').serialize());
// wait results
posting.done(function( data, event ) {
if (data.substring(0,4) != '%PDF') {
alert ("error");
} else {
// the format pdf is recognize, but not display (the stream is in the url, but not in the content)
window.open('data:application/pdf,'+ data, 'pageEdition', 'menubar=no, height=600, width=900' );
}
});
When I use this solution, the stream response (data parameter) is not display correctly. The stream is in the url but not in the content.
I try with :
window.document.write(data);
but it's html content.
How can I display pdf stream in javascript ?
Thanks

Related

AngularJS: compiled html alternates content

Here is a simple element directive that displays a name in bold:
WidgetsModule.directive('testwidget', function () {
return {
restrict: 'E',
scope: {
name: '#'
},
template: '<p>My name is <b>{{name}}</b></p>',
controller: function ($scope) {
this.title = $scope.title;
}
};
})
This is a partial page of html that I load from the server:
<h1>My Partial Page</h1>
<testwidget name="Fred"></testwidget>
I have another directive called dymanicRefreshPanel, which has a div and a button. When the button is pressed, the partial page is requested by an ajax post, and inserted into an element like this:
link: function (scope, element, attr) {
scope.compileData = function (data) {
var el = $compile(data)(scope);
$(element).find("div.widget-body").html(el);
}
}
When I first load the dynamic content, the browser shows this:
My name is Fred
The second time I request dynamic content, the browser shows this:
My name is {{name}}
The third time, back to the original:
My name is Fred
And then back and forth between the two. The html that arrives by the ajax post is always the same.
What's going on?

ASP.NET ClientValidation doesn't work on forms generated with jQuery.ajax

I have a list of objects and when I click on one of them, I open a Popup (DevExpress PopupControl) containing the inputs filled correctly accordingly to the object clicked.
To render this, I make a AJAX call, (jQuery.ajax) that replaces the 'body' of the popup and then opens it;
the server answers with a partial view containing the entire form):
var $self = $(this);
var _idSoc = $self.data("id");
var options = {
url: "#Url.Action("GetPopupEditSoc", "Home")",
type: "post",
data: { idSoc: _idSoc }
};
$.ajax(options)
.done(function (data) {
$(".container-popupEdit").empty().append(data);
PopupEditSociete.Show();
$.validator.unobtrusive.parse(document);
})
.fail(function (data) {
console.log("Error: ", data);
});
The problem it that creating a popup in this way I lose the validation on the Client side.
I've already tryed (of course, all the scripts are in the current page)
- $.validator.unobtrusive.parse(document);
- on Ajax.BeginForm Options, onSuccess doesn't work.. it is never called
THE CONTENT OF THE POPUP:
#{
Html.EnableClientValidation();
Html.EnableUnobtrusiveJavaScript();
}
#using (Ajax.BeginForm("ModificationSociete", "Home",
new AjaxOptions
{
OnSuccess = "console.log('???')",
OnBegin = "AjaxFormEditSoc_OnBegin",
OnComplete = "AjaxFormEditSoc_OnComplete",
UpdateTargetId = "container-EditSocForm",
InsertionMode = InsertionMode.Replace
},
new
{
id = "FormModificationSoc"
}))
{
<div style="padding: 10px;" id="container-EditSocForm"> ......
Any ideas????
To turn unobtrusive JavaScript mode on/off and enable/disable client validation by default for the entire application, you can use Web.config:
<configuration>
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
</configuration>
You can also turn them on or off with code:
HtmlHelper.ClientValidationEnabled = true;
HtmlHelper.UnobtrusiveJavaScriptEnabled = true;
In addition to setting the flag, you will also need to include three script files:
jQuery (~/Scripts/jquery-1.4.1.js)
jQuery Validate (~/Scripts/jquery.validate.js),
jQuery Validate for unobtrusive (~/Scripts/jquery.validate.unobtrusive.js)
Please refer below link for more info:
http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html
ASP.NET MVC 3: Required steps for unobtrusive client-side validation of dynamic/AJAX content

Using video.js in a jQuery UI Dialog box has issues with second video and repeat plays

Context
I have a page which contains a bunch of links to jQuery UI Dialog boxes which then have video.js players within them.
Problem
When you click one of these links the first time, everything works perfectly.
It's when you click subsequent times that you run into issues. I've fixed the issue with opening up a second different video by making all of the ids unique.
However, it seems this doesn't help opening the same video a second time; so I even made those player's ids unique (see below the id propery for <video> containing both the hash of the video as well as a rand.
Defined Issue
What I see is happening is that once you close the dialog box the browser is continuing to download the video source. This means that subsequent dialog openings create more videos downloading and so on.
Questions
How can I stop the video from downloading?
Is there a better way of re-initiliazing than what I'm doing.
Is there a better way of killing off the videos when someone hits the close button?
Code
The jQuery UI Dialog window is loaded with the following HTML
<video id="<?php echo $viLibraryItem->getHash().rand() ?>" class="video-js vjs-default-skin" width="320" height="240"
controls="controls" preload="auto" data-setup="{}"
poster="<?php echo viLibraryItem::getWebPath() .'/'. $viLibraryItem->getVideoFilenamePoster() ?>">
<source src="<?php echo $viLibraryItem->getFullWebPath() ?>" type="video/mp4"></source>
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object id="flash_fallback_1" class="vjs-flash-fallback" width="320" height="240" type="application/x-shockwave-flash"
data="<?php echo _compute_public_path('flowplayer-3.2.7.swf', 'swf', 'swf', true)?>">
<param name="movie" value="<?php echo _compute_public_path('flowplayer-3.2.7.swf', 'swf', 'swf', true)?>" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["<?php echo viLibraryItem::getWebPath() ?>/<?php echo $viLibraryItem->getFilename() ?>", {"url": "<?php echo _compute_public_path($viLibraryItem->getFilename(), viLibraryItem::getWebPath(), 'swf')?>","autoPlay":false,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="<?php echo viLibraryItem::getWebPath() .'/'. $viLibraryItem->getVideoFilenamePoster() ?>" width="320" height="240" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
Javascript For the Dialog Box
video_play_click_event: function(event) {
$.loading();
$('<div title="'+$(this).attr('title')+'">').load($(this).attr('href'), function(responseText, textStatus){
$.loading();
$this = $(this);
$this.dialog({
width: 320,
height: 400,
modal: true,
buttons: {
Close: function() {
$(this).dialog( "destroy" );
},
},
open: function(event, ui) {
id = $(this).find('.video-js:first').attr('id');
_V_(id);
$(this).css({overflow: 'hidden', padding: '0'});
},
beforeClose: function() {
$('.video-js').player().pause();
$('.video-js').remove();
}
});
});
return false;
}
I don't know if this is the correct answer to solve this; however, I ended up changing my javascript to look like the following.
The secret was setting src="" to get the browser to stop buffering. This throws a video error on the console which I really don't like; but for now it works.
video_play_click_event: function(event) {
$.loading();
$('<div title="'+$(this).attr('title')+'">').load($(this).attr('href'), function(responseText, textStatus){
$.loading();
$this = $(this);
$this.dialog({
width: 320,
height: 400,
modal: true,
buttons: {
Close: function() {
$(this).dialog('close');
},
},
open: function(event, ui) {
id = $(this).find('.video-js:first').attr('id');
_V_(id);
$(this).css({overflow: 'hidden', padding: '0'});
},
beforeClose: function() {
$('.video-js').player().pause();
$('.video-js video').attr('src', '');
$('.video-js').remove();
}
});
});
return false;
}
I have many videos in a given page and I was facing the same issue. But the below approach worked well for me.
NOTE: Change the MYID for each video in the page.
jQuery(document).ready(function(){
jQuery("a#videolink").fancybox({
frameWidth: 800,
frameHeight: 450,
overlayShow: true,
overlayOpacity: 0.7
});
});
<a id="videolink" href="#MYID" title="Test Video">
<img src="mp4test.jpg" width="248" height="145" />
</a>
<div style="display:none">
<video id="MYID" poster="mp4test.jpg" class="video-js vjs-default-skin"
controls preload="auto" width="300" height="300" data-setup="{}" >
<source src="mp4test.mp4" type='video/mp4'>
</video>
</div>

How to set the title of a struts jquery dialog tag dynamically through jquery/java script?

How to set the title attribute of a struts2 jquery tag dynamically using jquery.
Here is my code
script that sets the title of the dialog tag...
<script type="text/javascript">
function grid_click()
{
$.ajax({
url: 'myAction',
success: function(data) {
solution.innerHTML =data;
$("dialog#solution").title("Myticket");//fails to execute
}
});
$('#solution').dialog('open');
}
</script>
The dialog tag without the title attribute.
<sj:dialog id="solution"
resizable="false"
autoOpen="false"
openTopics="openSolution"
cssClass="solutionPopup"
modal="true"
overlayColor="#903"
overlayOpacity="0.8"
position="['center','top']"
width="830"
height="600"
cssStyle="overflow: hidden;"
>
</sj:dialog>
When I call the dialog display, title is empty while rendering.. Please help me to fix this or other alternative.
$('dialog#solution').dialog('option', 'title', 'MyTicket');
$('dialog#solution').dialog('open');

How to create a dialog using jquery-ui without html div specified

Using jquery-ui to create a dialog is pretty easy:
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
...but one still needs a div in the HTML for this to work. In Dojo:
var dlg = new dijit.Dialog({
title:"dialog",
style: "width:30%;height:300px;"
});
dlg.show();
would just do the trick without anything specified in the html section, can jquery-ui do this? (I have to use jquery-ui here)
Thanks,
David
While I'm not sure why you would want to open a dialog with no content, you could easily create a new one on the fly and invoke the jquery dialog against it:
$("<div>hello!</div>").dialog();
basic code
var d = $("#someId");
if (d.length < 1)
d = $("<div/>").attr("id", "someId")
.appendTo("body");
else
d.dialog('destroy');
d.html('some message')
.dialog({ some_options })
.dialog("open");
and you can probably put rap this in an extension method.
Update (my full code listing)
(function($) {
$.extend({
showPageDialog: function (title, content, buttons, options) {
/// <summary>Utility to show a dialog on the page. buttons and options are optional.</summary>
/// <param name="buttons" type="Object">Dialog buttons. Optional, defaults to single OK button.</param>
/// <param name="options" type="Object">Additional jQuery dialog options. Optional.</param>
if (!buttons)
buttons = { "Ok": function () { $(this).dialog("close"); } };
var defOptions = {
autoOpen: false,
modal: true,
//show: "blind",
//hide: "explode",
title: title,
buttons: buttons
};
if (options)
defOptions = $.extend(defOptions, options);
var pd = $("#pageDialog");
if (pd.length < 1)
pd = $("<div/>").attr("id", "pageDialog")
.appendTo("body");
else
pd.dialog('destroy');
pd.html(content)
.dialog(defOptions)
.dialog("open");
}
}//end of function show...
)//end of extend Argument
})(jQuery)
Sample Usage
$.showPageDialog(title, message, {
"Yes": function () {
$(this).dialog("close");
// do something for 'yes'
},
"No": function () {
// do something for no
}
}
var div = document.createElement('div');
div.innerHTML = "Hello World";
$(div).dialog();
Juan Ayalas solution should work for modal Dialogs.
For a non modal dialog it would be better to track the id inside the function.
I use the following code which is not perfect but should work to ensure that the
id is unique. The code is nearly equal to Juan Ayalas example but uses a counter to avoid a duplicate id. (Furthermore I deleted the OK-Button as default).
(function($)
{
var dCounter=0; //local but "static" var
$.extend({
showPageDialog: function (title, content, buttons, options) {
/// <summary>Utility to show a dialog on the page. buttons and options are optional.</summary>
/// <param name="buttons" type="Object">Dialog buttons. Optional, defaults to nothing (single OK button).</param>
/// <param name="options" type="Object">Additional jQuery dialog options. Optional.</param>
if (!buttons)
buttons = {}; //{ "Ok": function () { $(this).dialog("close"); } };
var defOptions = {
autoOpen: false,
width: "auto",
modal: false,
//show: "blind",
//hide: "explode",
title: title,
buttons: buttons
};
if (options)
defOptions = $.extend(defOptions, options);
dCounter++;
//console.log("dCounter is " + dCounter);
var pdId = "#pageDialog"+dCounter;
var pd = $(pdId);
if (pd.length < 1)
pd = $("<div/>").attr("id", pdId)
.appendTo("body");
else
pd.dialog('destroy');
pd.html(content)
.dialog(defOptions)
.dialog("open");
}//end of function showPageDialog
}//end of extend options
)//end of extend argument
}//end of function definition

Resources