I'm trying to fire a 'new' event programmatically.
How can I trigger a new event (not just interfering with an existing one via customEvents function).
Can you (pls) share an example
If you have access to the reporting context, you could use event manager to fire events:
<script type="text/javascript">
context.eventMgr().fireExternalEvent("customEventName", customEventObj)
</script>
On the other hand you can fire event outside of the app, if you have access to ic3Reporting instance
for example:
var ic3Application = ic3.startReport(options);
you can fire app events in such way :
<script type="text/javascript">
//get ic3application instance
var ic3Application = ic3.startReport(options);
var customEventObj = {someKey: 'someVal'};
ic3Application.fireEvent("customEventName", customEventObj)
</script>
EDIT
If you are going to use your event in "onSelect" it might look like:
customEventObj = {
selection : {
name: 'selectionName',
uniqueName: 'selectionUniqueName'
}
}
But still, you're free to provide any object that corresponds your needs.
Related
In JsViews i can bind events in the following way:
<li id="myElement" data-link="{on 'click' eventHandler}">Some Content</li>
This will execute the method "eventHandler" after a click.
But I need an event which will be fired when the template is loaded. I tried "ready" or "show", but nothings works. Is there a event which can handle this?
The {on xxx eventHandler} handles events on HTML elements, such as mouse events, submit, change, blur, etc.
With JsViews, the loading of the template happens directly as a result of your own code calling the link method. So elements in the rendered template will have been rendered during that call, and immediately after you can run whatever code you want to call after rendering and linking, such as using jQuery to find your <li> element, and act on the element
JsViews also provides many life-cycle events on tags, so if you want you can create a custom tag just for handling those events:
For example, try running the following code:
<span id="result"></span>
<script>
var data = {};
$.views.tags("test", {
attr:"none",
render: function(data) {
debugger;
},
onBind: function(tagCtx, linkCtx) {
var elem = this.parentElem;
elem.textContent += " added text";
}
});
var myTmpl = $.templates('<ul><li id="myElement" data-link="{test}">Some Content</li></ul>');
myTmpl.link("#result", data);
$("#myElement").css('color', 'red');
</script>
You could use an onload event:-
https://www.w3schools.com/jsref/event_onload.asp
and attach that to the template itself. If you're limited in your options or need to do it in a specific way, explain the use case and why you want to do it a certain way and we'll try to help.
All the best,
Phil
I am loading a report in an iframe using ReportViewerForMvc. Currently, I have a spinner so that the user will know the report is loading. However, the spinner stops spinning when the iframe is placed on the page...not when the content of the report is finished rendering. I have found people using isLoading with $find but I am pretty sure that is just for asp and I need my to be in .Net
What is the simplest way to have spinner continue to spin until the report is loaded in the iframe?
Currently, I have a shared view for all reports that I am hoping to add some javascript to:
#using ReportViewerForMvc;
<div id="reportViewer">#Html.ReportViewer(Model.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer)</div>
iframe onload does not work to stop spinner here.You would need cookies and client side script to accomplish that.
The server code will set the value in the cookie .Once the report is rendered the value will be read on the client side(cshtml) and spinner can be stopped.
Read this article.Here you can replace the blocker with the spinner.
http://gruffcode.com/2010/10/28/detecting-the-file-download-dialog-in-the-browser/
//This should be called on the event when you are loading the report
//In your case you will route the url to controller or invoke the link
//for the report
$(document).ready(function () {
$('#create_pdf_form').submit(function () {
blockUIForDownload();
});
});
//This is where you will place the spinner
function blockUIForDownload() {
var token = new Date().getTime();
//use the current timestamp as the token value
$('#download_token_value_id').val(token);
$.blockUI();
fileDownloadCheckTimer = window.setInterval(function () {
var cookieValue = $.cookie('fileDownloadToken');
if (cookieValue == token)
finishDownload();
}, 1000);
}
//This will read the token generated from the server side controller or
//aspx.cs or ashx handler
function finishDownload() {
window.clearInterval(fileDownloadCheckTimer);
// $.removeCookie('fileDownloadToken'); //clears this cookie value
//$.cookie('fileDownloadToken', null);
//$.removeCookie("fileDownloadToken");
setCookie("fileDownloadToken", '2')
$.unblockUI();
}
//On the server side set the token , it could be controller or ashx handler
var response = HttpContext.Current.Response;
response.Clear();
response.AppendCookie(new HttpCookie("fileDownloadToken",
downloadTokenValue); //downloadTokenValue will have been provided in the
form submit via the hidden input field
response.Flush();
//Lastly don't forget to add these source js files.
<script src="~/Scripts/jquery-1.5.1.js"></script>
<script src="~/Scripts/jquery.blockUI.js"></script>
<script src="~/Scripts/jquery.cookie.js"></script>
I have a repeater that outputs javascript for a Google Map
var marker5450635326848240000000 = new google.maps.Marker({
position: new google.maps.LatLng(31.2272,-85.4072),
map: map,
title: '4/10/2014'
});
markers.push(marker5450635326848240000000);
I have the map plus a pulldown inside an updatepanel. When the user changes the pulldown the updatepanel updates everything, but the pins on the map do not change.
Here is the example: http://prod.windcreekhospitality.bkwld.onyxtek.com/Giving-Back/Good-on-the-Go.aspx
I know it is the update panel because when I take the panel out of the equation it works.
http://windcreekhospitality.com/Giving-Back/Good-on-the-Go
Where is the whole code for the ascx http://pastebin.com/FqX0PndG
This is an ascx control and it is build for use with Kentico CMS. This limits my choices.
I had a similar problem recently trying to integrate a captcha script inside of an UpdatePanel.
Script blocks inside of an UpdatePanel only get recognized by the browser on the initial page load. Due to the way UpdatePanels work, any new script tags won't be injected into the browser correctly for them to actually be executed.
One work-around will be to use the ScriptManager.RegisterStartupScript method to register the script block dynamically from code-behind. The ASP.NET's ajax library will then handle registering the javascript code correctly and calling it to execute.
If you pass an UpdatePanel control as the first paramter to RegisterStartupScript(), the code will be included in the rendering on the first page load, any full postbacks, and every partial postback if that UpdatePanel is being updated.
In code-behind, build the javascript as a string and then pass it to RegisterStartupScript. Example:
protected override void OnPreRender(EventArgs e)
{
var s = new StringBuilder();
s.Append(#"
var markers = [];
var currentWindow;
var myLatlng = new google.maps.LatLng(32.3617,-86.2792);
var mapOptions = {
zoom: 6,
center: myLatlng,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
$('#map-canvas').mouseleave(function(){
if(currentWindow)
currentWindow.close();
});
google.maps.event.addListener(map, 'mousedown', function() {
if(currentWindow)
currentWindow.close();
} );");
// TODO: manually do whatever that cms:CMSRepeater control would be done to generate the additional JS and append it to the StringBuilder.
ScriptManager.RegisterClientScriptBlock(EventsUpdatePanel, GetType(), "InitMap", s.ToString(), true);
base.OnPreRender(e);
}
Better would be to separate out your function that inits the map, move it to be OUTSIDE of the UpdatePanel, and pass it as arguments the data you want it to initialize. Have the code-behind generate JS that is just a call to that function with the data as arguments.
One way our team handle this issueis by adding the following
on the Webpart(here your Map) -> Envelope->Content before
<script type="text/javascript">
function MyFunction() {
......
}
MyFunction();
Sys.Application.add_load(MyFunction);
</script>
Also , bring the repeater outside the script tag(see your Pastbin code) and call the pageLoad method as described up.
On load I'm both calling a JavaScript setTimeout() function that will hide a .NET Panel control, and hiding it in the code behind on first load. Clicking the save button will set the Panel to visible then reload the page at which point a setTimeout() function is called... so basically you click save, and see a panel with "Details Saved" for three seconds, at which point it disappears.
The problem is the external JavaScript file can't find _pDivAlert.ClientID (I've debugged and it returns null). It only works when the code is in a tag in the .aspx page. Any suggestions as to how I can either pass the client ID to the HideControl() function or find the ClientID from the external JS file?
Here's my code, any suggestions?
<script language="javascript" src="Forms.js" type="text/javascript"></script>
<body onload="ToggleAlert()">
<form id="form1" runat="server">
<script type="text/javascript">
//alert the user that the details were saved
function HideControl() {
var control = document.getElementById('<%=_pDivAlert.ClientID %>');
if(control != null)
control.style.display = 'none';
}
function ToggleAlert() {
setTimeout("HideControl()", 3000);
}
</script>
I've also tried sending the ClientID within the ToggleAlert() call, but that didn't work:
<body onload="ToggleAlert('<%=_pDivAlert.ClientID %>')">
External JS:
function HideControl(_c) {
var control = _c;
if (control != null)
control.style.display = 'none';
}
function ToggleAlert(_c) {
setTimeout("HideControl(_c)", 3000);
}
can you show your markup with the panel and the codebehind where you hide it?
there's a difference between setting the Visible property to false and setting the style display attribute to none- the first will not render the element at all, meaning there isn't anything rendered with the id you're looking for.
edit: it's probably because of the way you're calling HideControl in the timeout- this should be a function instead of a string.
try doing
function ToggleAlert(_c) {
setTimeout(
function () {
HideControl(_c);
}, 3000);
}
just for clarity, when you pass a string to setTimeout, it's evaluated and then run. the code chunk that eval produces will run in a different scope than your ToggleAlert method, and so _c won't be available at that time.
edit: you also need to actually get a reference to the control. you're passing the id string to ToggleAlert, which relays it to HideControl, which is expecting an object not a string.
function HideControl(_c) { // _c is the id of the element
var control = document.getElementById(_c);
if (control != null)
control.style.display = 'none';
}
I have the following JQuery code in a external JS file linked into a
usercontrol in .Net 1.1 webapp.
The usercontrol is a timesheet.
When the page loads it calls MonthChange and works fine in one page.
But now I want to load the timesheet/usercontrol into aother
webpage that pops up a in a new browser window for printing.
Problem is my MonthChange is not firing.
Any ideas why???
$(function() {
MonthChange();
//TestData();
$('[class^=TSGridTB]').blur(function() {
var day = GetDay($(this).attr('id'));
var date = GetRowDate(day);
var bgcolor = GetInputFieldColor(date, false);
$(this).css("background-color", bgcolor);
$(this).parent().css("background-color", bgcolor);
//CalcHours($(this).get(0));
});
$('[class^=TSGridTB]').focus(function() {
var day = GetDay($(this).attr('id'));
var date = GetRowDate(day);
var bgcolor = GetInputFieldColor(date, true);
$(this).css("background-color", bgcolor);
$(this).parent().css("background-color", bgcolor);
});
$('[id$=lstMonth]').change(function() {
MonthChange();
});
});
without seeing further code, ensure that the selector is correct for the control in the new page.
The problem may be that the DOM has changed for the new page/window and JQuery does not yet know about it.
The change event
fires when a control loses the input
focus and its value has been modified
since gaining focus.
You might want to use the live event:
Binds a handler to an event (like
click) for all current - and future -
matched element.
When you bind a "live" event it will
bind to all current and future
elements on the page (using event
delegation). For example if you bound
a live click to all "li" elements on
the page then added another li at a
later time - that click event would
continue to work for the new element
(this is not the case with bind which
must be re-bound on all new elements).
Did you make sure that the new web page has jQuery script includes?
ensure you're using:
$(document).ready(
);
around your entire code block. The $ alone often does not do the trick.