Is it possible to trigger a Velocity Template Language #set value to parameter via a button?
I am trying to combine HTML, JS and Velocity doing the following:
#set($ld=$pageParameters.Work_Item_Link_Direction.values)
<button id="demo2">up</button>
<script>
document.getElementById('demo2').onclick = function() {
#set( $ld = "up" )
alert("button2 was clicked");
};
</script>
The part, however, which doesn't work in this code is:
#set ( $ld = "up")
as it isn't pure JavaScript.
Any hints or ideas how I can combine anyway this "#set value to parameter" as function onclick to the button? I am working inside the application Polarion ALM.
Or is there any other approach how I can set a value to a (page) parameter using velocity and using a Button?
There is a little misconception, here:
the Velocity Template Language code is evaluated at the time the page is sent by the HTTP server, on the server itself.
the Javascript code is evaluated once the page is loaded, in the browser.
So what you ask for doesn't really make sense.
What you can do, however, is trigger an ajax call from inside your javascript handler, which can set some value inside the session, return some value to the success ajax handler, etc.
Related
I've a legacy ASP.NET application, which I'm trying to modernize. I've a page
MyPage.aspx, and its codebehind MyPage.aspx.cs
I've replaced a custom user control (which does a fileupload) with a custom react component. The react component is working as expected. The old ascx usercontrol had an event handler which is defined in 'MyPage.aspx.cs'as follows.
protected void asyncFile_FileUploaded(object sender, FileUploadedEventArgs e)
//logic to set the uploaded file's name etc for saving.
}
Nowthat the custom control is replaced with an empty DIV, where the react component is being mounted, I'm left with no option to call my C# logic in the 'MyPage.aspx.cs' codebehind file.
I've created a 'CreateProperty.aspx.js' file which is responsible of initializing my react component inside the .aspx page, and below is the contents of this file.
$(document).ready(function () {
if ($('#Myupload').length) {
ReactDOM.render(
<Upload id="pictureupload2"
onChange={onChange}
setBusyState={onBusy}
onUploadSucceeded={onUploadSucceeded}
/>,
document.getElementById("Myupload")
);
}
});
function onChange(e) {
console.log(e);
}
function onBusy(e) {
console.log(e);
}
function onUploadSucceeded(e) {
console.log(e);
}
Once the react component has done the uploading, it calls the function onUploadSucceeded() with my required parameters. But how will I pass that value back to my MyPage.aspx.cs file ?
Please help.
Drop in a standard asp.net button on the form.
Move the code you have/had for the previous event into that button code stub
eg:
protected void asyncFile_FileUploaded(object sender, FileUploadedEventArgs e)
//logic to set the uploaded file's name etc for saving.
}
So, move the above code to the button (style="display:none) to hide it.
AND OF COURSE don't copy the event stub code!!!.
Now, in your js function, do whatever and simply "click" on that button.
The bonus here is you get the badly needed post back when the client side js/ajax runs.
So, you have this:
function onUploadSucceeded(e) {
console.log(e);
document.getElementById('<%= btnOkUpLoad.ClientID %>').click();
So, the above is nice. I mean you could do a js __DoPostBack(); in js, but then you have to pass some parameters, and then client side in the on-load page event, detect the parameters (a pain to wrire up).
So, anytime I want to run code behind from js? Just drop in a asp button, write the code stub for that button, and then client side, use the above ".click()" to run that code. As noted, in MOST cases you want a post back anyway - which is what a asp.net button does for you.
Edit: now I said we want a post back in most cases? Well, I mean when we are all said and done - and thus this button click makes sense. We certainly don't want needless post backs - but when you do, and when you want to run+call a code stub, the this button trick is nice. Just use style="display:none" to hide it from view - but js code can still use the .click() to run (click) the button for you))
I had a problem with a vb.net webpage which I solved by commenting out a .Focus() in the page_load. The customer however, will not receive this amendment until next release.
My question is, is it possible to achieve the same result using jquery through an external js file. ie. I would like to know if I can 'bypass' the '.Focus()' line in the page_load by using some kind of jquery wizardry?
I'm guessing that the answer will be 'no', however I'm still hopeful! :-)
Thank you for your time.
If you have the id of the control (or name) you can set focus to it by calling:
$(document).ready(function(){
$('#elementId').focus();
// or
// $('input[name="elementName"]').focus();
}
This will change WHAT is focused, not un-setting focus
If you know the ID of the focused element you can do:
$(document).ready(function(){
$('#elementId').blur();
// or
// $('input[name="elementName"]').blur();
}
to un-focus it.
you could also do:
$(document).ready(function(){
$('input').blur();
}
if you just wanna unset the focus from all/any input
And in my tests this will override asp.net's attempt to set focus (read: asp.net will focus one thing, your script will afterwards focus another thing, so there might be a race for control here, but at least on my page (asp.net c#) and in chrome this works so that the jquery.focus runs last, thus wins :))
Edit/Update:
Should the problem that the control receives focus rather then having focus, you can overwrite the auto_focus function that asp.net uses when you call .Focus() in your code-behind.
For me this works:
WebForm_AutoFocus = function () { };
However this might cause other things to not work (I do not know if this javascript function is used for other things besides setting the .Focus() from your codebehind, but it might be worth trying.)
You should also set this somewhere "late" in your code, eg: after WebForm_AutoFocus is rendered to your page by the asp.net runtime, and where this is done i do not know.
I am creating a website using ASP.
I have a web control with an SVG image embedded on it.
<embed id="InletsComponent" class="InletsComponent" src="../images/svg/Inlets.svg" type="image/svg+xml" width="430px" height="200"px/>
On the web control I also have a button.
<input id="Button3" type="button" value="3 into 2" onclick="return ConfigureInlets()" />
The javascript function is:
function ConfigureInlets() {
document.querySelector(".InletsComponent").getSVGDocument().querySelector(".InletsComponentImage").getElementById("I1IN").setAttribute("visibility", "visible");
return;
}
Which basically makes one of the svg elements visible.
The above code works fine.
I now want to extend the code so that instead of the button calling the function I can call the function from the server side. (the reason for this isn't obvious from the example, but basically I want to show and hide svg elements based on a number of checkbox states. It is easier to process all this on the server side and then call the javascript to update the image on the client.).
I have added a RegisterClientScriptBlock to my server side code
this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Key", "ConfigureInlets()", true);
The javascript function is being called, but I am getting the following error:
Microsoft JScript runtime error: Unable to get value of the property 'getSVGDocument': object is null or undefined
I believe that this function is being called at a different level to when the button press is calling it. i.e it is being called at the page level and not the web control level. But I am not really sure how to fix it.
try to use jquery to run this function when the document is ready
this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Key", "$(function () {ConfigureInlets()});", true);
or use RegisterStartupScript instead of RegisterClientScriptBlock
I have Javascript function which i need to call at code behind in vb.net. The Main problem is it is not called properly because there is redirection to next page before this function executes. I do not want to call this function on Onclick event of button or something like that i want to call it after some specific condition in code behind. I have already tried following solutions please let me know if you have some other suggestions.
System.Web.UI.ScriptManager.RegisterClientScriptBlock(Page, Me.GetType(), "Script", "ShowEntryPermForm();", True)
Page.ClientScript.RegisterStartupScript(Me.GetType(), "Window", "ShowEntryPermForm();", True)
Problem Description: added from comment
The scenario is that in javascript function i have checked various conditions related to the project and it open up a pop up window where user enter his or her comments.
It is not necessary every time the function will open the pop up window. But by default the page redirects to new page as both the functions Javascript and redirection to another window are run on click event of the button.
But now my requirement is changed now i have to call the function from code behind in particular condition. Hope you get it now
You can do this in following way.
window.onbeforeunload = function()
{
//your code goes here
return "";
}
If you return anything here then browser will display and ask user whether to leave the page. In your case you don't need to return anything but runs the code.
The only way is to Separate the code and javascript in the way they will not rely on each other
for example you make an hidden asp:button with the rest of server side code
server side :
if(...) then
page.ClientScript.RegisterStartupScript(Me.GetType(), "Window", "ShowEntryPermForm();", True)
else
page.ClientScript.RegisterStartupScript(Me.GetType(), "Window", "otherfunction();", True)
end if
sub IDServersideHiddenbutton(obj as object ,e as eventargs)handles IDServersideHiddenbutton.click
rest of the server side code including the redirect
end sub
client side :
javascript ShowEntryPermForm()
{
// javascript code
$("#IDServersideHiddenbutton").click();
}
javascript otherfunction()
{
//just the click
$("#IDServersideHiddenbutton").click();
}
I really don't know your code structure but You can manipulate it to work with this idea
There are a million lightbox type modal overlay scripts out there.. but I am looking for one that has the ability to be automatically triggered, depending on the path that leads there. So a property would have to live in the url string that triggered it. Has anyone seen or implemented any such thing? I know colorbox has the ability to automatically open the modal when you land on the page, but I do not know how I could make that functionality dependant on the path that one arrives there. Any ideas?
You could implement some JavaScript that looks at the referring page and opens the light box accordingly, therefore you shouldn't be limited to a particular implementation. You can tie in to the document ready event to open it.
There is an example of how to access the referrer on the W3Schools website linked below.
http://www.w3schools.com/jsref/prop_doc_referrer.asp
You can do this with Colorbox by varying the settings in your initialisation.
Assuming that you do this to start Colorbox:
$('div.gallery a').colorbox({
onClosed: function() { alert('Colorbox closed');},
current: 'Image {current} of {total}'
});
You could do something like this instead:
var colorBoxSettings = {
onClosed: function() { alert('Colorbox closed');},
current: 'Image {current} of {total}',
open: false
};
if (your_logic) {
colorBoxSettings.open = true;
}
$('div.gallery a').colorbox(colorBoxSettings);
I suggest that there is no need for auto triggering. You can do it this way -
First check the whether the url consists of the appropriate value you want or not.
It can be done by server side language (like PHP ) or through javascript.
If done server side pass say a hidden field as below -
<input type="hidden" name="exists" value="true" />
If done using jquery save value as -
var value = "value from javascript if proper url exists";
If done through server side then -
var value = $('input[name="exists"]').val();
Then you can trigger manual cilck (if url value is as per your expectation) to anchor which consists of overlay link -
$('#id of anchor').trigger('click');
If you want auto triggering overlay though then you can try this -
http://flowplayer.org/tools/demos/overlay/trigger.html