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)"
Related
I am using Django Autocomplete Light (DAL) in my application.
In order to do some post-processing in the background on user selection, I am trying to capture the .on('change') event (when DAL select field choice is changed) using jQuery (like we do on objects like an input field or a Django select field etc.). However I am not able to capture the event.
For example the following code (edited):
$(document).on('change', '#x_select_item', function() {
console.log('Selection on x_select_item changed');
});
is not generating any message.
Edit
The following code for capturing .on('focus) is working:
$(document).on("focus", '#x_select_item', function() {
console.log('THIS IS FIELD x_select_item for on Focus Event');
});
Looking for DAL events also did not help much excepting that it takes one to the "select2" events page. There are events listed including "change" and "change.select2", but using both of these (as in example above) are not generating any reaction in the console.
Is there some way selection change event may be captured on DAL?
This is quite an "older" question, but I just stumbled about nearly the same problem.
As I found out, there was a bug in older versions of DAL Django Autocomplete Light.
According to the issues in the github project it's fixed in versions >3.5
I've just upgraded to the latest version (v3.8.1) and change events are firing as expected.
I have installed version 3.8.1 and i have to use this code for the change event to fired, is in the documentation:
$(':input[name$=continent]').on('change', function() {
console.log("change fired");
});
where continent is the model field name, not the id of the select when you inspect the element in the html code.
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 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.
I have fields where multiple extra fields can be added after the page loads (think education & work experience fields on job resumes). I am using this.
I can add a datepicker on the first field, but subsequent added fields do not access the datepicker, despite being cloned/essential duplicates of the original. I'm guessing that the datepicker only intializes on page load or for only one class on the page.
So on a page I initialize the datepicker:
$('.input-append.date').datepicker();
for a block of form code encapsulated by this class. OK for initial page load; and also OK if there is an error and the page reloads multiple fields previously input(there is a datepicker for all fields returned with any error). However, with another js function that adds new fields to the form, additional new fields do not have access to the datepicker. I do not see how to do this now, perhaps someone with more experience/wisdom can provide me a hint.
EDIT:
Simple enough: I simply added:
$('.input-append.date').datepicker();
to the code calling the new field. As to being the optimal solution I do not know, anyone who specializes in js can comment on that, and there are many other similar questions here I found once I expanded my search terms. However, good enough for me now in what I'm doing.
For elements which are being added on fly use data-provide="datepicker" attribute. It will be initialized lazily. For example if an input field is coming up in an ajax response and loaded in a container div. So in this case:
<input type="text" data-provide="datepicker" />
so when when you will load this ajax response it in cotainer div like
$('#container-div').html(ajax_response);
this will work.
In the same way if you are creating an element through jquery and appending it to some container (I think this is happening in your case), for example you have a function that creates textbox and append it to some container div and this function is called on click event of some element let's say it's button. Again data-provide attribute is the solution to this problem. For example
function createTextBox(){
var t = $('<input>').attr('data-provide','datepicker');
$('#container-div').append(t);
}
And this function is called on click event of some button like in this way:
$(document).ready(function(){
$('#someBtn).click(createTextBox);
});
In short whether that dynamic element is coming in ajax response as a string or being created through jquery, just use data-provide attribute to set bootstrap datepicker. Because in this case datepicker is initialized lazily in Bootstrap fashion.
Hopefully a quick one...
I need to fire the uncheckAll event in the click event of a separate button on my page, I have tried the following:
$('.masterProviderOrgsListBox').multiselect().uncheckAll();
but this isnt a recognised method. I basically want to fire the same method that is fired when you click the "Uncheck All" box in the header.
I was previously doing this:
$('.masterProviderOrgsListBox option:selected').removeAttr("selected");
but this removes the selections on the actual multiselect rather than the jQuery UI widget.
Couldnt find anything in the documentation, any ideas?
Methods
After an instance has been initialized, interact with it by calling
any of these methods:
// example: $("#multiselect").multiselect("method_name");
...which can be found in the widgets documentation under Methods
$("#multiselect").multiselect("uncheckAll");
1) first, you need to set default value of the control.
jQuery('#multiselect').val("");
2) Then, execute below code to reset the control.
jQuery('#multiselect').multiselect("refresh");
$("#multiselectoption:selected").removeAttr("selected");
$("#multiselect").multiselect('refresh');
refresh should be call after clearing the drop down.