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.
Related
I am creating an applicaiton where hundreds of controls are created dynamically in Jquery as below.
var $link='<a id="bucket'+data[0].ID+'" class="Initial" href="#"></i></a>';
$($btnGroupdiv).append($link);
While adding controls I am assigning unique ID to each control.
And this is how I am identifying each control while accessing it.
$(".Initial").click(function(){
var $pid=this.id.replace("bucket","");
But here's the issue.
These IDs can be changed at browser with "Inspect Element" option.
ServerSide Situation
IDs which I have assigned to controls, are the primary keys of row in table called employee.
So changing ID at browser can temper data in a different row than intended.
How do I validate these controls at serverside, if ID is changed or not or How do I restore original ID of an element at server side??
I hope my question is clear enough.
Any help is apppreciated.
For everyone who thinks this is not possible.. I would ask - How does facebook or even StckOverflow do it??
You need to define it differently for it to work with dynamic elements:
$(document).on("click", ".Initial", function(){
var $pid=this.id.replace("bucket","");
...
});
It is impossible to detect if anybody has changed the ID via the browser.
You can't (software rule n°1: never trust user input).
What you can validate serverside is:
Make sure the id exists
Make sure the user has the rights to do the action on the data related to the id.
And this is it ! If a user is doing an action he is allowed to, on valid data, why should he be stopped to do so ?
I'm very new to Ajax. Currently I'm working on a new project. For that project one of the requirements is, populating a second dropdown based on the input from the first dropdown. I'm using Struts to do that. I don't want the page to be refreshed, so I need to use Ajax for calling the second dropdown content in the backend and populate in the second dropdown. I don't know how to write code for that.
What should be included (jars,tags) in my struts project?
What entries should come in my JSP (I am using <html:select>)?
What will come in JavaScript?
What will come in action class (in action class I can fetch the list values from the DB based on the selection from the first dropdown)?
Instead of ajax, I used struts only to acheive this. I have assigned all variables to form to keep values when submitting form.
The answer to this question would probably a thesis ;)
I will just guide you in here.
1]Use a javascript framework like jquery. It will help you make ajax calls to your controller URL
Check an easy tutorial on http://www.tutorialspoint.com/jquery/jquery-ajax.htm
2] For the controllers lets have two urls mapped:
urapp/poplateDropdown1 to controller which return values/list target at ur first drop down
urapp/poplateDropdown2 to a another controller(or method within same controller) which responds to a GET request and receives a parameter say name SEL_VALUE for the selected value.
3] onchange events.
Have an onchange or similar best suited even on your first dropdoww.
In your event call a js function; like <select onchange=callDropDown2Controller(this.value) >
in your callDropDown2Controller() method:
//pseudo implementation
callDropDown2Controller(var selectedValue){
// now generate an AJAX get request using jquery with the following url
urlToCall = '/urapp/poplateDropdown2?SEL_VALUE=' + selectedValue
}
The rest buddy u need to do some homework and research.
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.
I have a web page which lists all database records from a certain server.
Along side each row are a few buttons which allow you to rename or delete records.
INPUT( _value='Rename', _type="button", _class='appbutton', _onclick='renameApplication({0},"{1}")'.format(app.id,app.name))
Which generates something like:
<input class="appbutton" type="button" value="Rename" onclick="renameApplication(3,"My Application")"></input>
(The backend templating engine is web2py, but that's not really important.)
I am generating these buttons dynamically. Currently I pass the data each button needs through onClick.
According to jQuery.click() vs onClick I shouldn't be doing this anymore. But if that is the case, how should I be passing data so that each button click can use dynamic data written server side (the application ID and name in this instance.)
I can't do dom traversal through the record to grab the data because the row structure might change.
I can't use custom attributes because I need to support less than HTML 5, and I'm not going to modify the doctype! (Can I add custom attribute to HTML tag?)
The only thing I can think of is to put data in the id attribute then parse it, but that seems very hackish.
Is there a better way?
You may try to use an jQuery on to hook the event on every button. You may put the server Id in an data attribute which is understood by jQuery, without major issues:
<input class="appbutton" type="button" value="Rename" data-id="3"></input>
Then the js:
$('#container').on('click', '.appbutton', function () {
var serverId = $(this).data('Id'); //this binds to html input
renameApplication(serverId);
});
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)"