Triggering ASP.Net functions from JS and viceversa - javascript

I was thinking to my self if there is a better implementation to my approach in triggering functions from JavaScript to ASP.Net and viceversa.
Run JS code from ASP.Net
Create asp.net hidden value that will keep information of what
action was done. (Eg. id = hiddenFunctionality)
Behind ASP.NET code, do the functionality than
alter the asp.net hidden value (hiddenFunctionality.value = "AddedUser") to trigger the correct JS function later on.
From the JS aspect create pageLoad() method and within the pageLoad() method
read the asp.net hidden value if(document.getElementById('contentPage_hiddenFunctionality').value=="AddedUser"){...}
Run ASP.Net code from JS
Create a div that hides it's content yet leaves the ASP.Net elements still clickable.
Insert ASP.Net button within the div. (There should be a work around with the __doPostBack(eventTarget, eventArgument), this would remove the hidden div and ASP.Net button)
In JS trigger <li onclick="trigger('#contentPage_btn');">Click me to trigger ASP.Net function</li>) run a method to simply trigger click event on the ASP.Net button. function trigger(x){$(x).click();}
Passing of data from one side to another can be done with ASP.Net hidden values or query strings.

To inject JavaScript from ASP you can do RegisterClientScriptBlock:
Type myType = this.GetType();
if (!ClientScript.IsClientScriptBlockRegistered(someType, "_FROMASP"))
{
string script = "alert('FROM ASP!');";
ClientScript.RegisterClientScriptBlock(someType, "FROMASP", script, true);
}
I think you are on the right track if you want to run ASP code from JS and not use AJAX. I normally use a hidden field with __doPostBack to pass messages rather than a DIV.

Related

Accessing gridview row data CONSISTENTLY from javascript

I have an asp.net webpage that contains a gridview with SQL data bound to it using the DataSourceID property. I want to be able to launch JavaScript from various user events (like button clicks and row clicks in a second gridview) and use JavaScript to read the gv1 data and perform some simple actions. My problem is, some of my JavaScript calls see the data in the gridview, but many times all I see in the gridview is a header (no rows of data!).
For example, if I put a call to JavaScript inside Page_Load() using
ScriptManager.RegisterStartupScript(Me, Page.GetType, "Script", "jsPageLoadFirst();", True)
then I always see the gridview data on the initial page load, and also on some postbacks. On other postbacks however the gridview has been stripped and all I see is the gridview header (rows are undefined).
Similarly, if I setup a call to JavaScript in the html body as
<body id="mybody" onload="JavaScript:myJSsub();">
the JavaScript sub never sees the gridview data; only the header, but no rows. I THOUGHT that the client onload event only occurred after the page was fully loaded (including all data binding!) but apparently not! Note that I always see the gridview data showing on the webpage, even right before I click a button to invoke JavaScript, so it's a mystery to me as to why the gridview data sometimes gets stripped!
I've been pulling my hair out for days trying to figure this one out. Can anyone tell me what I'm doing wrong, and how I can make sure the gridview row data is always available to my JavaScript subs, no matter where (or how) I launch them?
Thanks!
-tom
10/7 update: Here's a little bit more info, plus a possible work around I've come up with today using a hidden field. First, I'm primarily accessing the gridview data in JavaScript using calls to document.getElementById("gv1"). So to start things off, since all the gridview data is available to the JavaScript sub I fire from the first server PageLoad event, I tried saving the gridview data in both a global variable "gvar1" and also in a hidden field on my page "hf1". Here is what my JavaScript looks like:
function jsPageLoadFirst() {
// Save gv1 to a global variable
gvar1 = document.getElementById("gv1");
// *** Also save gv1's html to a hidden field
document.getElementById("hf1").value = document.getElementById("gv1").innerHTML;
}
Now in the JavaScript sub I trigger from the onload() event of the body, I check the values of all three. I always find that 1) document.getElementById("gv1") shows only the gridview header (but no rows), 2) gvar1 is undefined and 3) hf1 looks fine - all row data is present. Similarly when firing javascript from server Postback pageloads, sometimes document.getElementById("gv1") shows all the gridview data, but sometimes it only shows the gridview header but no row data. Can someone explain to me why document.getElementById("gv1") does not always show the row data? I think if I understood this, I could see my way clear to get the rest of my code working. Thanks!!!

Calling javascript method within a user control .NET 1.1

I have a user control that has a server side dropdownlist (it needs to be server side). The user control appears multiple times on a webpage so I need to make the javascript method unique. I want to validate the ddl selection client side so I don't need a postback. I found the following example:
you need to use this.id
function load_v<%= this.ID %>() { alert('anything'); }
so that even if you need two or more same controls in the same page they will have different ids. Hope this Helps! cheers :)
This works with making the javascript method unique like follows:
function DDLSelectionChanged<%=this.ID%>() { code here }
But how would I call the method using the onchange event within the asp:dropdownlist tag, e.g.
<asp:dropdownlist id="list1".... onchange="JavaScript:DDLSelectionChanged()"...>
I tried putting onchange="JavaScript:DDLSelectionChanged<%=this.ID%>()" but that doesn't work.
Please remember this is .NET 1.1.
Please do like this in your server side
DDCONTROL.attributes.add("onchange","javascript:fname(this.id);");
you need to create function named "fname" into javascript with one parameter, that parameter will give you an ID# of particular dropdown control.

Using ryanfait.com custom form elements with .net autopostback

I am using ryanfait.com custom form elements to change the appearance of my dropdown lists in my .net web application. Everything works fine except for .net postbacks on dropdown lists. Having looked at the javascript code for custom work elements I have noticed that the onchange event is overwritten:
if(!inputs[a].getAttribute("disabled")) {
inputs[a].onchange = Custom.choose;
} else {
inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
}
If I comment out the above code the autopostback works but for other dropdownlists which do not require an autopostback the input value now does not change. Is there a way I can get this working for both scenarios? On ryanfait.com he says:
onChange and other JavaScript events
This script utilizes JavaScript's onChange and other events. Because these events can only be used once, if you want to add more functions to an event, you will need to call them from inside my script.
But I can't work out if I can somehow trigger the autopostback event?
Any help would be very much appreciated!
The easiest way do this is to add a a standard asp:dropdownlist with autopostback, preview your page and then view source, find the list in the HTML source and copy the onChange property. this is what you need to call client side to post the page back.
eg.
onchange="javascript:setTimeout('__doPostBack(\'ddlHolidayType\',\'\')', 0)"

JavaScript function calls within Django form fields

I'd like to create a form where I have checkboxes, and when clicked, they open separate textareas for the user to enter more information in.
If I want to use Django's dynamically created form fields, is there a way that I can put a function call in for each checkbox.
You can dynamically add event handlers using JavaScript. You can add a script that, once the page is loaded, will find all checkboxes you want and add the handlers there. In jQuery, you can write something like this:
$(document).ready(function() {
$(".my_form input[type=checkbox]").change(function() {
//Some code here
});
});
Be careful, I have not tested the code above! But should be enough to get you started.

Multiple updatepanels on page remove JavaScript Datepicker calender from textbox

Actually I have Multiple update panels on page, which update different values on server but the problem is that I have textbox to which I attach javascript class for datepicker on Load event.
But There are other updatepanels before that date TextBox, when I update them first calender image with date control which is in updatepanel disappears. or it remove the calender which is next to the textbox.
txtDate.Attributes.Add("class", "show-week w16em dateformat-d-sl-m-sl-Y");
Before using any updatepanel its like this
After we upfdate any updatepanel control its like this.
But the Date controls which are not in any updatepanel are ok and working.
And in these updatepanels I actually saving values in DataTables and save these DataTables in viewState .... no change in HTML.
I guess the datepicker and its textbox both are placed in an updatepanel?
If you do an ajax-postback with UpdatePanels the server will send html back for all UpdatePanels on the page, and refresh all of their contents, so your datepicker will disappear.
If you set UpdateMode=Conditional on the UpdatePanels then only the UpdatePanels that caused the postback will update.
Another option is to recreate the datepicker with ScriptManager.RegisterStartupScript, but this possibly resets its value (depends on which datepicker it is).
Are you changing the INNERHTML of the DIV or TABLE in which the TextBox is present because if you are then its removing the calender control after that DIV or TABLE is being updated.
whatever method you are using to attach the datepicker, you must call again after the updatepanel updates
you can do it on server side with this:
// at some point of the method that updates the panel
ScriptManager.RegisterStartupScript(
this, typeof(object), "someUniqueKey", "theScript();", true);
or on client side with this:
// <body onload='...'> or in the <head>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
function () { theScript() });

Categories

Resources