I'm trying generate a images/chart in my controller and have that image displayed in an image tag in the view. In my view, I have
<div id="graphcontainer">Close Graph<img id="chartImage" alt="" /></div>
and in my controller (called EventReport) I have a method called "BuildChart". My idea was to capture the click event of a button designated as the build report button. In the click event handler I would want to assign the image's source to something like "/EventReport/BuildChart" to have the image control populated.
Here's what's in the controller
public ActionResult BuildChart()
{
var chart = new Chart
{
Height = Unit.Pixel(400),
Width = Unit.Pixel(600),
AntiAliasing = AntiAliasingStyles.Graphics,
BackColor = Color.White
};
// Populate chart here ...
var ms = new MemoryStream();
chart.SaveImage(ms);
return File(ms.ToArray(), "image/png");
}
I'm just having problems wiring this up. Am I on the right track?
Thanks!
Set src of your image as link to your action on the click of your button, eg:
using jquery:
$('#build-chart').click(function() {
$('#chartImage').attr('src', '/EventReport/BuildChart');
});
and action will be asked for content for image. Probably some 'loading' indicator will be needed.
Related
I installed web hide menu on https://www.odoo.com/apps/modules/8.0/web_menu_hide_8.0/
I modified to use it on Odoo 10, but the form will be adjusted to full width IF we press the hide button, if we were to change to another view after we pressed hide button, the form page will remain same as original (not full width).
So i need to adjust class "o_form_sheet" on form view after the page has been rendered. May i know how can i do that using javascript? Which class & method do i need to extend?
I'm going to answer my own question.
After some researched, i found out the best option was to inherit ViewManager widget using load_views function.
var ViewManager = require('web.ViewManager');
ViewManager.include({
load_views: function (load_fields) {
var self = this;
// Check if left menu visible
var root=self.$el.parents();
var visible=(root.find('.o_sub_menu').css('display') != 'none')
if (visible) {
// Show menu and resize form components to original values
root.find('.o_form_sheet_bg').css('padding', self.sheetbg_padding);
root.find('.o_form_sheet').css('max-width', self.sheetbg_maxwidth);
root.find('.o_form_view div.oe_chatter').css('max-width', self.chatter_maxwidth);
} else {
// Hide menu and save original values
self.sheetbg_padding=root.find('.o_form_sheet_bg').css('padding');
root.find('.o_form_sheet_bg').css('padding', '16px');
self.sheetbg_maxwidth=root.find('.o_form_sheet').css('max-width');
root.find('.o_form_sheet').css('max-width', '100%');
self.chatter_maxwidth=root.find('.o_form_view div.oe_chatter').css('max-width');
root.find('.o_form_view div.oe_chatter').css('max-width','100%');
}
return this._super.apply(this, arguments, load_fields);
},
});
how can add new control from controller
// create a simple Input field
var oInput1 = new sap.m.Text('input1');
oInput1.setText("Some Text ");
oInput1.setTooltip("This is a tooltip ");
// attach it to some element in the page
oInput1.placeAt("sample1");
in view I add holder
try to add text from controller but it not display on screen.
var oLayout = this.getView().byId("idholder");
oLayout.addContent(oInput1);
is Run-time add new control is not possible. we have always render control in view and then update it is this good practice we have to follow ?
The placeAt() method is normally only used to place a View or App into the HTML.
If you want to add a UI5 control on your view, you can do it this way from the controller:
this.getView().addContent(oInput1);
But most likely you won't add controls directly to the view, but rather inside a layout or something inside your view. In that case, do it like this:
var oLayout = this.getView().byId("idOfYourSpecificLayoutFrame");
oLayout.addContent(oInput1);
My app create popUp through SafeHTMLBuilder. I want to add Click handler (resize onClick) to this img.
I know that if I use uiBinder i can add ui:field tag:
#UiField
Image
...
image.addClickhandler(...);
In my case I think I should use JSNI but I dont imagine how it looks.
SafeHtmlBuilder html = new SafeHtmlBuilder();
html.appendHtmlConstant("<div class=\"detailsPopup\">")
.append(TEMPLATES.image(record.getImageUrl()))
.appendHtmlConstant("</div>")
Template of image
#Template("<img id=\"img\" src=\"{0}\"/>")
SafeHtml image(String url);
You can achieve that with Label.wrap(). Your code would look something like this (not tested)
Element element = new Element();
element.setInnerSafeHtml(html.toSafeHtml());
Label label = new Label();
label.wrap(element);
label.addClickHandler....
Or simply use GwtQuery like this
$("#detailsPopup").click(new Function() {
public boolean f(Event e){
Window.alert("This is GWT code without widget baggage!");
return true;
}
});
Just to get you up to speed, I have set-up my CKEditor instance so that when viewing the WYSIWYG (live) mode [image:abc123] is replaced with the actual URL to the image.
So for example in the HTML source view, you see this:
<img src="[image:abc123]" />
But when you view the WYSIWYG (live) mode, it shows this:
<img src="/file/image/abc123" />
This is all working great. An issue I am now having is when you edit the image in Image properties. As the image does not exist, it show's the red x.
http://img405.imageshack.us/img405/104/jzny.png
My question is, is there a way to customise the Image Properties dialog so that if it matches [image:abc123], it loads a different image URL in the Preview window?
This code doesn't work but might make it a little clearer what I'm trying to achieve here.
CKEDITOR.on('dialogDefinition', function(evt) {
if (evt.data.name == 'image') {
var image_url = ???;
var preview_image = ???;
var file_id = image_url.value.match(/\[image:([a-zA-Z0-9-]+)\]/);
if (file_id)
preview_image.src = '/file/image/' + file_id[1];
}
});
Thanks in advance!
hi
i am loading images on my web site after page load with jquery, i use $(document).ready to load images after page load now i want to specify order so i can load images of my slide show in a manner and have my slide show hidden, after slide show picture load show it.
this is an html part of my code:
<a class="videoThumb imageLightbox" href="images/slider/pic-usa-11-large.jpg">
<img src="/images/blank.gif" class="delayLoad" onmouseover="this.src = './images/slider/pic-usa-11.jpg'" width=" 215px" height="160px"/>
</a>
and i load images after document ready:
$(document).ready(function() {
// Load images once the page has loaded
jQuery("img.delayLoad").each(function() {
// Create a new span element which we will wrap around our image
// Using a span because if the image was inside an <a> tag then online inline elements should be used
var delaySpan = document.createElement("span");
with (jQuery(this)) {
// Handle images that are hidden, otherwise display mode for the span should be block (inline doesn't work properly)
if (css('display') == 'none') {
var _display = 'none' } else {
var _display = 'block' }
// Copy the style from the image into a new object (this means you don't need to worry about styling this span within your CSS)
var cssObj = {
'height' : css('height'),
'width' : css('width'),
'margin-top' : css('margin-top'),
'margin-right' : css('margin-right'),
'margin-bottom' : css('margin-bottom'),
'margin-left' : css('margin-left'),
'background-image' : css('background-image'),
'background-color' : css('background-color'),
'background-repeat' : css('background-repeat'),
// Hack for now, becuase IE doesn't seem to read the background-position property correctly
'background-position' : '50% 50%',
'display' : _display
}
}
// Apply our style properties to our span
jQuery(delaySpan).css(cssObj);
// Wrap the image in the span
jQuery(this).wrap(delaySpan)
// Hide the image (leaving just the span visible
.hide()
// Simulate the mouse over the image, whcih will cause it to switch the img src
.mouseover()
// Remove the mouseover attribute (since we don't want to update the img src every time the user does a mouseover
.removeAttr("onmouseover")
// Simulate the mouse moving out of the image (To reset the image to its normal state)
.mouseout()
// Once the image is loaded, perform a function
.load(function () {
// Fade the image in
// Remove the span by unwrapping the image
jQuery(this).fadeIn().unwrap();
});
});
});
(i used this document: http://www.purplepixelmedia.co.uk/Ourblog/tabid/78/articleType/ArticleView/articleId/80/Using-jQuery-to-loading-images-after-the-page-is-ready.aspx )
now i want to control images load and hide the box before all images are loaded and show the box after page load
how do i can do such task?
thanks
The jQuery Message Queueing plugin lets you perform serial AJAX requests. This may be what you're looking for.