I'm using handlebars and I'm trying to pass in a function, but this function executes on page load instead of onclick, so trying to see what's wrong
So this is the js code
handlebars.registerHelper("randomOperation", () => {
randomFile.functionCall()
})
Now on handlebar side, this is the code:
<a href="/newURL" target="_blank" onclick={{randomOperation}}>
You will not be able to use a Handlebars Custom Helper as an onclick event handler. These two types of functions execute at very different times.
The Handlebars helper is executed when the template is rendered - ie., when the template function is turning a string of template into a string of HTML. The helper is called so as to affect the rendered output. For example, an uppercase helper might uppercase some string values that are passed to it in the template.
The onclick is executed in response to a click event on the element by the user. Handlebars has spit-out its HTML and that HTML has been parsed and added to the HTML document before it becomes a clickable.
Therefore, in order to add an onclick handler, you will need to define that function globally in your client-side JavaScript. It has nothing to do with Handlebars and is not affected by the templating language you are using to create your HTML.
Related
Using VS2013, is there a way to render markup stored in a file to another page?
For instance:
If I store some basic markup in newFile.html, is there a way to display that from another .aspx file?
I created a small javascript function that you pass the URL and the ID of the container, and load it using the .load() function.
function loadPage(ID, URL) {
$('#'+ ID).load(URL);
}
My server-side ASP.NET code generates a JS function (actual function, e.g. function Foo() {...}) on initial page load using ClientScript.RegisterStartupScript. That function becomes part of ASPX markup and executes when client calls it.
The problem is: I need to modify that function's code in server-side partial postback (Update panel). But when I generate the function with the same name function Foo() {...} via ScriptManager.RegisterStartupScript it doesn't seem to take effect - original function generated in PageLoad's ClientScript.RegisterStartupScript is called.
Is there any way to regenerate client-side function in partial postback after it had been generated on initial page load?
Thanks!
Answered in my first comment to the question.
I have a custom control (ascx) which implements the IPostBackEventHandler interface for intercepting custom events triggered by custom rendered HTML links.
In this control I use an update panel and inside the update panel I use a literal control in which I render custom HTML links.
When I render the HTML links inside the literal control I use a StringBuilder with the following code:
sb.AppendFormat ("Text",
this.Page.ClientScript.GetPostBackClientHyperlink(this, custom_string_param));
Hyperlinks are rendered fine, and when clicking on them an asynchronous postback is triggered and a partial update is fired (since all links are rendered inside the Update panel).
The problem is that I need to do some custom Javascript before firing the __doPostBack which is rendered with the above code. So here is a simplified version of the changed code:
sb.AppendFormat ("Text",
custom_string_param);
Also in the ascx markup I use the following code (inside or outside the Update panel):
<script language="javascript" type="text/javascript">
function JSFunc(param) {
// custom js code here ....
__doPostBack('<%=this.ClientID%>', param);
}
</script>
The problem here is that when a link is clicked it performs a full postback and not a partial one. I also tested more simple versions of the above code and it seems that if you remove the __doPostBack from the href or the onclick events from the link ( tag) and move it to a custom js function which in turns you supply to the link, a full postback is triggered.
Note that there is no error on the page and in both cases the code work correctly. The page is rendering correctly depending on the parameters returned from the __doPostBack, but in the second case a full instead of partial postback is firing.
Any ideas?
Thanks in advance,
George
I think you can't call __doPostBack with the ClientID. It actually uses UniqueIDWithDollars, but generally with ASP.NET Web Forms I say: you don't want to know.
Since calling this method is all about abstracting away the details of how post back works, you would be better off asking the framework for the code. Luckily, there's a special method just for that, which will take care of the details. In your code it would look like something like this:
<script language="javascript" type="text/javascript">
function JSFunc(param) {
// custom js code here ....
<%= Page.ClientScript.GetPostBackEventReference(this, custom_string_param) %>
}
</script>
This let's the client script manager create the piece of JavaScript code, using a reference to your user control (this) and any custom event argument (custom_string_param).
There's one caveat though. When calling it this way, it will add javascript: to the beginning of the string.
To override this behaviour, you need to use an overload of GetPostBackEventReference that accepts an instance of PostBackOptions as its first argument, the instance having its RequiresJavaScriptProtocol property set to false.
PostBackOptions options = new PostBackOptions(this, custom_string_param)
options.RequiresJavaScriptProtocol = false;
Page.ClientScript.GetPostBackEventReference(options)
I am developing an ASP.NET web application that incorporates google maps. I have an ASP.NET listbox on my page which contains a list of items. When the user selects one of the items, I'd like to show this item on the map. The main complication lies in the fact that google maps uses javascript to control it and the listbox is a server control.
I can think of two ways to do this. The first would involve the listbox calling a javascript function when the user selects a new item. I can then write this function to perform the necessary map operations. Unfortunately, the OnSelectedIndexChanged property of the listbox doesn't seem to support javascript functions.
The second involves wrapping an UpdatePanel around the listbox and getting the listbox to perform a postback. In the SelectedIndexChanged event in VB/C#, I would the need to somehow make a call to a javascript function which would then update the map.
Which solution can I use?
Thanks
--Amr
In your codebehind (in your pageload) just add a javascript handler to the OnChange attribute that points to your javascript function. Eg:
lbYourListBox.Attributes.Add("onChange", "UpdateYourMap();");
You could also add this to your control using inline javascript as well but I prefer to do it in the codebehind so that the framework can handle matching up the names.
You could simply embed javascript into your page, avoidig relying on ASP with it. Put the code into your document body:
<script language="javascript">
body.onload=function(){
var lb=document.getElementById("yourlistboxid");
lb.onChange = function(){
// put your handling code here
}
}
</script>
to demo the other approach, here's a rough guide:
void listbox_SelectedIndexChanged( ... ) {
string js = string.Format("callToMapsFunction({0});", listbox.SelectedValue);
string scriptKey = "mapscript";
ScriptManager.RegisterStartupScript( listbox, typeof(ListBox), scriptKey
, js, true);
}
RegisterStartupScript runs whatever javascript you give it after the partial postback completes. you don't necessarily have to pass the listbox value- just whatever data you want to provide to the maps api. the first 3 items are for preventing the script from registering a bunch of times (as far as I know). the true at the end tells the scriptmanager to automagically add opening and closing tags around your js code.
I have a partial view which renders a table.
On page load, I am using JQuery to perform Zebra Stripping on it.
Whenever ajax refreshes the table, DOM elements are updated, but since JQuery code to do the Zebra Stripping is not executed; table looks ugly.
I have tried adding Javascript in my partial view
if( Request.IsAjaxRequest() )
return PartialView( "AdministrationGrid", Users );
but javascript is not executed.
I guess the only way to execute the Javascript as reply is to do:
return JavaScript( "alert( '' )" );
Anyone with an idea how can I achieve this?
I thought about JQuery Live, but it is used to bind itself to events.
Surely if you are using AJAX to refresh the table, you have a function that gets called to request your data. If there is an onSuccess function, you could just call the striping in there.